【51CTO.com快譯】不可否認(rèn)，Selenium是用于功能性測試和Web應(yīng)用測試領(lǐng)域的首選自動化框架之一。測試人員可以利用在線的Selenium Grid，在不同的瀏覽器和平臺組合上，運(yùn)行測試。不過，不知您是否已注意到，作為該領(lǐng)域的后起之秀--Cypress，正在以驚人的速度迎頭趕上。Cypress也是一種用于測試Web應(yīng)用的自動化開源測試框架。下面我將全方位地和您討論Selenium和Cypress之間的各項差異，以便您在實際項目中，做出明智的選擇。

Selenium與Cypress的概覽

作為一種廣為流行的自動化開源測試框架，Selenium主要被用于Web應(yīng)用測試和跨瀏覽器測試的場景中。Selenium WebDriver是Selenium套件的關(guān)鍵組件之一。

目前，Selenium支持諸如Python、Ruby、C#、JavaScript、Java、PHP等多種編程語言。它支持的自動化框架包括：Behave(一種流行的BDD框架)、JUnit、SpecFlow、MSTest、TestNG、PyTest、PyUnit、Mocha JS、Jest、WebDriverIO、以及Protractor等。

在使用Selenium開展自動化測試之前，開發(fā)人員需要在測試主機(jī)上下載并安裝相應(yīng)的瀏覽器驅(qū)動程序(如，Chrome的ChromeDriver、Firefox的GeckoDriver等)，以及適當(dāng)?shù)腟elenium語言驅(qū)動。

開源的Cypress項目目前被托管在GitHub上，其最新的版本是5.5.0。開發(fā)人員能夠通過Cypress進(jìn)行單元測試，編寫端到端測試，以及開展集成測試。

與能夠支持多種語言的Selenium WebDriver不同，Cypress僅能夠支持JavaScript，不過它是精通JavaScript前端開發(fā)和自動化測試人員的首選。在對測試自動化框架的支持方面，Cypress僅支持Mocha JS框架。因此，我們可以認(rèn)為Cypress的Web自動化測試用例，只在Mocha JS框架上，運(yùn)用JavaScript編寫而成的。

下圖是Selenium WebDriver和Cypress，在過去六個月的下載趨勢圖。可見Cypress的下載量正在慢慢趕上Selenium。

下載比較圖

來源--https://www.npmtrends.com/protractor-vs-selenium-webdriver

Selenium簡介

Selenium項目始于2004年。2006年推出的Selenium IDE，是一款原生的記錄和回放工具，僅能夠使用在Firefox上。當(dāng)然，最新的Selenium IDE已經(jīng)可以被用在Chrome上了。它不但帶有跨瀏覽器的支持，可用于并行測試，而且能夠讓自動化測試人員通過設(shè)置斷點，來調(diào)試腳本。

當(dāng)前，Selenium的最新穩(wěn)定版本是Selenium 3.141.59。不過，Selenium 4(仍處于Alpha階段)中的Selenium WebDriver是W3C的建議版本。由于JSON Wire協(xié)議將不再被用于與Web瀏覽器進(jìn)行通信，因此自動化測試將能夠更加無縫地協(xié)同工作在不同的瀏覽器(如Chrome、Firefox等)之間。

Selenium WebDriver架構(gòu)

由于Selenium WebDriver和相應(yīng)的瀏覽器使用通用的協(xié)議(即W3C協(xié)議)進(jìn)行通信，因此開發(fā)人員往往認(rèn)為Selenium 4具有更穩(wěn)定且統(tǒng)一的特點。

Selenium的主要優(yōu)點

• Selenium WebDriver能夠被廣泛地用于單元測試、E2E(端到端)測試、以及安全性測試。
• 如前所述，Selenium支持多種流行的編程語言，并廣泛用到了各種自動化測試框架。
• 它既兼容最新的瀏覽器(如Chrome、Firefox、Edge等)，又兼容Internet Explorer等過時的瀏覽器。
• 經(jīng)過常年的積累，Selenium擁有不斷壯大的生態(tài)系統(tǒng)。
• 可以將本地的Selenium測試用例，輕松地移植到基于云端的Selenium Grid處。
• Selenium能夠與LambdaTest之類的云端測試工具開展并行測試。這不但可以減少測試時間，提高成本效益，還能夠?qū)崿F(xiàn)更大的測試覆蓋率。

Selenium的缺點

• 對于新手來說，Selenium的學(xué)習(xí)曲線比較陡峭。當(dāng)然，開發(fā)人員和自動化測試人員也可以通過向Selenium社區(qū)里的活躍用戶學(xué)習(xí)，來快速入門。
• 由于涉及到安裝瀏覽器的驅(qū)動程序、Selenium Grid服務(wù)器、以及Selenium IDE，因此Selenium的設(shè)置過程較為耗時。
• 盡管Selenium被廣泛地用于UI測試，但它在測試圖像方面存在著局限性。
• 由于Selenium腳本是在瀏覽器外部被執(zhí)行的(即，測試腳本和被測瀏覽器之間的接口是通過相應(yīng)的“瀏覽器驅(qū)動程序”來實現(xiàn)的)，因此它比Cypress框架執(zhí)行的時間會更長。

Cypress簡介

Cypress是為開發(fā)人員和質(zhì)量保證工程師打造的下一代前端測試工具，可被用來測試瀏覽器中運(yùn)行的所有內(nèi)容。與Selenium運(yùn)行在瀏覽器外部不同，Cypress能夠與應(yīng)用程序在同一循環(huán)中被執(zhí)行。也就是說，節(jié)點服務(wù)器(Node server)的進(jìn)程能夠與Cypress相互通信，同步并執(zhí)行任務(wù)。由于可以訪問到網(wǎng)絡(luò)層，因此Cypress能夠即時讀取和更改網(wǎng)絡(luò)的流量。

憑借著獨特的DOM操作技術(shù)，Cypress的各項測試皆可訪問到DOM中的Web元素、應(yīng)用實例、計時器、以及服務(wù)worker等內(nèi)容。

由于對自動化過程具有完全的掌控力，因此Cypress可以修改進(jìn)出瀏覽器的所有內(nèi)容，以及那些可能會干擾Web瀏覽器自動化功能的代碼。同時，因為Cypress被安裝在本地，所以可以通過訪問操作系統(tǒng)，來控制各項自動化任務(wù)。

Cypress的主要優(yōu)點

• 由于測試用例直接運(yùn)行在瀏覽器內(nèi)部，因此在安裝Cypress時無需任何依賴項，也無需額外的下載。
• 由JavaScript構(gòu)建的Cypress，可被開發(fā)人員和質(zhì)量保證工程師用于前端開發(fā)。
• Cypress沒有額外的IDE負(fù)擔(dān)。在啟動Cypress時，它會提示您選擇IDE，以方便更改測試腳本。
• Cypress進(jìn)程可實時地響應(yīng)應(yīng)用事件，并處理各種命令。同時，通過Cypress中的實時重載功能，用戶可以實現(xiàn)在應(yīng)用發(fā)生變更時，自動重載測試。
• 由于Cypress對整個自動化過程(從上到下)具有嚴(yán)格的控制，因此它能夠更好地了解瀏覽器內(nèi)、外的變化，進(jìn)而提供一致性的結(jié)果。
• 由于運(yùn)行在應(yīng)用程序內(nèi)，因此Cypress的測試代碼可以訪問到應(yīng)用程序所觸及的所有對象(不限于DOM元素)。由此，Cypress不再需要JSON Wire(或其他協(xié)議)進(jìn)行通信。
• 由于Cypress會自動等待DOM中元素的生成，因此用戶無需在Cypress中添加隱式和顯式的wait語句。在執(zhí)行到下一條語句之前，Cypress也會等待命令和聲明(https://on.cypress.io/introduction-to-cypress#Cypress-is-Not-Like-jQuery)。此外，Cypress也不會產(chǎn)生不屬于DOM的陳舊元素。
• 由于測試是在瀏覽器內(nèi)部執(zhí)行的，并且Cypress可以直觀地獲悉應(yīng)用是如何進(jìn)行同步的，它甚至知道某個元素對于動畫效果處理的起、停時間(https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Animations)。因此，與使用其他自動化測試工具相比，Cypress的測試具有更高的抗剝離性(flake resistant)。
• Cypress會捕獲每個測試步驟的快照，以方便開發(fā)人員可以在測試腳本中的任何特定步驟上，檢查其活動狀態(tài)。
• Cypress可讓用戶直接修改DOM元素，例如：顯示某些隱藏元素。
• 由于是基于Electron App構(gòu)建的，因此Cypress可以讓開發(fā)人員或質(zhì)量保證工程師，通過使用Stubbing DOM API，來更好地控制應(yīng)用程序。
• Cypress中的Stubs [如cy.stub()] 可用于修改某些功能，并將其控制權(quán)委托給開發(fā)人員。Cypress中的Spies [如cy.spy()] 則讓用戶可以監(jiān)控某個功能。Cypress中的時鐘API [如cy.clock()]可用于控制應(yīng)用程序的數(shù)據(jù)和時間。這些都有助于按需替換應(yīng)用的原有行為，或避免在測試中出現(xiàn)緩慢情況。
• 鑒于UI測試之類的活動可能并不需要執(zhí)行分析，因此開發(fā)人員可以在應(yīng)用執(zhí)行測試之前，阻止Google Analytics之類的分析代碼。
• Cypress允許開發(fā)人員像在單元測試中那樣，人工創(chuàng)建不同的狀態(tài)。此過程并不會拖慢整個測試進(jìn)程。
• Cypress通過豐富而直觀的用戶界面和儀表板，向用戶展示了測試被執(zhí)行的每一個細(xì)節(jié)，包括：聲明、網(wǎng)絡(luò)請求、頁面加載、stubs、以及監(jiān)控等。
• 默認(rèn)情況下，它能夠支持并行測試(或稱并行化)。同時，它能夠讓用戶按照瀏覽器、測試標(biāo)簽等條件，對測試進(jìn)行分組。下圖便是Cypress并行測試的簡短過程：

來源--https://docs.cypress.io/img/guides/parallelization/parallelization-overview.88fddb02.png

• Cypress還可以與流行的CI/CD工具相集成，其中包括：Jenkins、Bamboo、Circle CI、Bitbucket、GitLab等。

Cypress的缺點

• Cypress僅適用于Chrome、Firefox、Edge、Brave和Electron瀏覽器。因此Cypress的跨瀏覽器測試方面比較受限。

 

• 它僅支持使用JavaScript框架創(chuàng)建的測試用例。
• 它不支持遠(yuǎn)程執(zhí)行。
• Cypressk在其網(wǎng)站聲稱，Cypress將永遠(yuǎn)不會支持處理多個瀏覽器選項卡。
• 默認(rèn)情況下，Cypress并不支持多個瀏覽器的實例，也不能同時控制多個已打開的瀏覽器。對此，Cypress目前的解決方法(https://docs.cypress.io/guides/references/trade-offs.html#Multiple-browsers-open-at-the-same-time)是通過與其他后端進(jìn)程(如，Selenium、Puppeteer等)同步，以驅(qū)動另一個已打開的瀏覽器的實例。
• 目前，Cypress的測試僅限于用來確定具有相同來源的訪問域，因此用戶無法在同一測試中，訪問到不同來源的兩個域。當(dāng)然，他們可以訪問在不同測試中，不同來源的兩或多個域。

Selenium跨瀏覽器測試入門

您可以選擇使用本地Selenium Grid，或是在LambdaTest之類基于云端的Selenium Grid上，進(jìn)行可擴(kuò)展的跨瀏覽器測試。

• 若要在本地Selenium Grid上進(jìn)行跨瀏覽器測試，您必須事先安裝瀏覽器的驅(qū)動程序，并在被Selenium支持的C#、Java、Python、Ruby等語言中選擇一種。
• 若要在云端Selenium Grid上執(zhí)行Selenium自動化，您必須在該平臺上創(chuàng)建一個帳戶，并在代碼中調(diào)用適當(dāng)?shù)臑g覽器功能。

下面，我們來討論一個使用Selenium進(jìn)行自動化測試的示例：

1. 在Windows 10上的Chrome 86.0中輸入URL https://lambdatest.github.io/sample-todo-app/。

2. 選擇前兩個復(fù)選框。

3. 將“Happy Testing at LambdaTest”發(fā)送到id為sampletodotext的文本框處。

4. 單擊添加按鈕，并驗證是否已添加了該文本。

5. 如果標(biāo)題與預(yù)期的窗口標(biāo)題不匹配，則需要聲明。

下面是在LambdaTest的云端Selenium Grid上進(jìn)行測試的Java代碼：

Cypress自動化測試入門

由于Mocha框架運(yùn)行在Node.js上，因此在安裝Cypress之前，您需要安裝依賴項軟件包：Node JS和類似Visual Studio Code的IDE。

在安裝好Node JS后，我們可以使用Node軟件包管理器npm，從終端上安裝Mocha和Cypress。

請在終端上運(yùn)行以下命令，以安裝Mocha：

npm install mocha 

請在終端上運(yùn)行以下命令，以安裝Cypress：

npm install cypress 

如上圖綠色框所示，Cypress5.5.0已成功安裝。接著，我們通過如下命令，來啟動Cypress：

npx cypress open 

它將打開Cypress儀表板，以便運(yùn)行各種測試：

Cypress在\integration\examples中提供了各種示例腳本：

若想快速檢查測試，應(yīng)將腳本放在同一個文件夾中。我們參照上述Selenium的測試案例，額外添加了wait usingcy.wait()方法，以及用于從DOM處獲取所需的Web元素的cy.get()方法。

Cypress隨附了豐富的API集，以及特定于瀏覽器的，諸如：執(zhí)行按鈕單擊，設(shè)置視圖等命令。

在以上代碼中，cy.visit()用于打開特定的URL。它類似于driver.getSelenium。cy.get()方法則用于在DOM中定位特定的Web元素。一旦訪問到了某個元素，就可以在該元素上執(zhí)行適當(dāng)?shù)牟僮髁恕＠纾覀冋业皆?-#sampletodotext，便可在文本框中輸入“Happy Testing at LambdaTest”。cy.log()方法用于將消息打印到Cypress的控制臺日志中。

在Cypress中，我們可以輕松地通過cy.contains()方法，來獲取包含特定文本的DOM元素。

 

在安裝了Cypress的主機(jī)上，有Chrome 86、Firefox 82、Edge 86和Electron 85，四種瀏覽器可供選擇。

因此，為了執(zhí)行上述測試，我們只需導(dǎo)航至Cypress儀表板中的測試標(biāo)簽，在首選瀏覽器(如Chrome 86)中單擊測試文件(即Cypress_ToDoApp.js)即可。下圖是正在進(jìn)行的測試快照：

測試成功的快照如下圖所示。可見，Cypress能夠?qū)崟r地顯示執(zhí)行狀態(tài)，并提示代碼中是否存在問題。

Cypress可簡化Web App測試

Cypress在如下方面大幅簡化了開發(fā)人員和質(zhì)量檢查工程師的工作。

查找網(wǎng)絡(luò)元素

從Cypress的實現(xiàn)可以看出，Web元素沒有使用標(biāo)準(zhǔn)的Web定位符(即XPath、Name等)來予以標(biāo)識。那么，腳本將如何在DOM中定位元素呢?

Cypress在測試運(yùn)行器中具有一項被稱為“Selector Playground”的出色功能，可方便查找Web元素。您可以在待測試的URL旁，單擊“Open Selector Playground”按鈕，然后將鼠標(biāo)懸停在需要提供詳細(xì)信息的元素上。

通過點擊該Web元素，其詳細(xì)信息將會填充并顯示在“cy.get”或“cy.contains”中(緊挨著顯示測試文件名的區(qū)域)。

由于“Selector Playground”類似于Chrome(或Firefox)中的檢查工具，因此用戶無需額外學(xué)習(xí)該功能，即可修改并執(zhí)行目標(biāo)代碼。

時間點跳轉(zhuǎn)(Time Travel)

由于Cypress在運(yùn)行測試時會捕獲快照，因此它能夠靈活地追溯到曾經(jīng)執(zhí)行過的某個時間點。具體而言，您只需將鼠標(biāo)懸停在命令日志中的某個命令上，然后檢查該步驟曾經(jīng)的歷史記錄即可。Cypress默認(rèn)最多可以保留50個測試值的快照和命令數(shù)據(jù)。

下面顯示的是在LambdaTest的ToDo頁面上第一個元素(li1)被單擊后，執(zhí)行“時間點跳轉(zhuǎn)”的截圖。

可見，當(dāng)您想在測試腳本中檢查某個特定操作的效果時，“時間點跳轉(zhuǎn)”功能就能派上用場了。

測試執(zhí)行

如前所述，Cypress的測試是在瀏覽器內(nèi)部執(zhí)行的。由于被安裝在本地，因此它可以獲取Web瀏覽器內(nèi)、外部發(fā)生的所有情況。這便是您可能不會察覺到Cypress測試中有任何網(wǎng)絡(luò)延遲的主要原因。而且，由于Cypress使用的是與瀏覽器相同的DOM事件，因此其命令的執(zhí)行速度要比Selenium快得多。

此外，Cypress使用Mocha的BDD語法，來實現(xiàn)單元測試和集成測試。Mocha JS本身提供了出色的異步支持。而Chai-jQuery、Sinn.JS和Sinon-Chai則為Mocha提供了編寫帶有錯誤消息的可讀聲明等功能。

 

下表是對上述討論過的，有關(guān)Cypress和Selenium在不同方面的總結(jié)與比較。

該如何選擇?

可見，Cypress是一個新興且不斷迭代的工具，而Selenium是自動化測試領(lǐng)域的成熟工具。如果您精通JavaScript，并且正在尋找可以在本地主機(jī)上執(zhí)行自動化測試的工具，那么請選用Cypress。同時如果您的Web應(yīng)用是使用React、Angular等時下流行的JavaScript框架構(gòu)建的，并且對于跨瀏覽器測試的要求不高，那么也請選用Cypress。

如果您希望測試代碼能夠在各種瀏覽器和操作系統(tǒng)上流暢運(yùn)行，則請使用Selenium。此外，由于Selenium測試也可以在基于云的Selenium Grid上執(zhí)行，因此您可以用到由LambdaTest平臺提供的大規(guī)模并行測試的優(yōu)勢。

總之，Selenium和Cypress沒有絕對的完勝者，但是它們之間的確有著眾多差異。您可以從實際項目的測試覆蓋率需求、團(tuán)隊的技能儲備、以及長遠(yuǎn)發(fā)展的角度，通過試用，來選擇最適合的一種工具。

原文標(biāo)題：Selenium Vs. Cypress: Which Is Better in 2021?，作者：Himanshu Sheth

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】