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

Selenium與Cypress的概覽

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

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

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

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

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

下圖是Selenium WebDriver和Cypress，在過(guò)去六個(gè)月的下載趨勢(shì)圖?？梢?jiàn)Cypress的下載量正在慢慢趕上Selenium。

下載比較圖

來(lái)源--https://www.npmtrends.com/protractor-vs-selenium-webdriver

Selenium簡(jiǎn)介

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

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

Selenium WebDriver架構(gòu)

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

Selenium的主要優(yōu)點(diǎn)

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

Selenium的缺點(diǎn)

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

Cypress簡(jiǎn)介

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

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

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

Cypress的主要優(yōu)點(diǎn)

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

來(lái)源--https://docs.cypress.io/img/guides/parallelization/parallelization-overview.88fddb02.png

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

Cypress的缺點(diǎn)

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

 

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

Selenium跨瀏覽器測(cè)試入門

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

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

下面，我們來(lái)討論一個(gè)使用Selenium進(jìn)行自動(dòng)化測(cè)試的示例：

1. 在Windows 10上的Chrome 86.0中輸入U(xiǎn)RL https://lambdatest.github.io/sample-todo-app/。

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

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

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

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

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

Cypress自動(dòng)化測(cè)試入門

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

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

請(qǐng)?jiān)诮K端上運(yùn)行以下命令，以安裝Mocha：

npm install mocha 

請(qǐng)?jiān)诮K端上運(yùn)行以下命令，以安裝Cypress：

npm install cypress 

如上圖綠色框所示，Cypress5.5.0已成功安裝。接著，我們通過(guò)如下命令，來(lái)啟動(dòng)Cypress：

npx cypress open 

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

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

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

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

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

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

 

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

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

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

Cypress可簡(jiǎn)化Web App測(cè)試

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

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

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

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

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

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

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

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

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

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

測(cè)試執(zhí)行

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

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

 

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

該如何選擇?

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

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

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

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

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