摘要：Cypress和TestCafe這兩個工具相比於Selenium都更加的輕量級，且在不同的方面有了改進，比如安裝更簡單，增加了內置等待機制，調試更加方便等。
Cypress、TestCafe、Puppeteer在技術雷達中被譽爲後Selenium時代Web UI測試的三駕馬車。
一、初步印象
談起Web UI自動化測試，首先想到的肯定是Selenium了，畢竟Selenium是名噪一時的Web UI自動化測試工具。在一次QA Community的Catch Up上，大家聊起了最近火起來的Cypress、TestCafe等測試工具，那時候還不知道這是什麼，心裏想着大概就像是Selenium的改進版吧。後來在同事聊天時、在QA的微信羣裏，越來越多的聽到這兩個單詞。終於，忍不住準備自己探索一下這兩個小東西。他們究竟爲什麼就開始被頻繁的提起了呢？
首先，翻翻ThoughtWorks技術雷達，我堅信一切前沿的值得被採納的技術都會出現在我司的技術雷達裏。果然沒有失望，在技術雷達中，他們的定位是這樣的：
Cypress 採納
我們不斷收到關於Cypress 、TestCafe 和 Puppeteer等 “後Selenium” web UI測試工具的積極反饋。運行端到端測試時經常會遇到一些棘手的問題，如運行時間過長、測試過於零碎、還需要修復無頭模式下運行的測試所導致的CI失敗。我們的團隊藉助Cypress很好地解決了性能差、響應時間長、資源加載慢等常見問題。Cypress已成爲我們團隊內部執行端到端測試的首選工具。
TestCafe 試驗
在使用Cypress、TestCafe和Puppeteer等 “後Selenium” web UI測試工具方面，我們擁有良好的體驗。TestCafe支持採納JavaScript或TypeScript來編寫測試，並在瀏覽器中運行測試。TestCafe提供了開箱即用的並行執行、HTTP請求模擬等有用的功能。TestCafe使用異步執行模型而無需指定等待時間，有效提升了測試套件的穩定性。它的選擇器API可更輕鬆實現PageObject模式。TestCafe最近發佈了1.0.x版本，進一步提升了穩定性和功能性。
技術雷達中明確的指出了Cypress在採納階段，TestCafe在試驗階段。這就意味着他們很牛啊，如果項目有需要，那麼請放心大膽的嘗試吧。
讀到這裏，大家可能開始好奇了，說好的三駕馬車，怎麼只剩下了兩駕？這是因爲Puppeteer具有其自己的特殊性。Puppeteer是谷歌出品的一個通過Devtools 協議控制Chromium或Chrome的Node庫。由於其只支持Chrome，無法進行跨瀏覽器的兼容性測試，所以有評論提出，Puppeteer從嚴格意義上來講並不算是自動化測試工具，而是一款自動化工具。如果你想打造更加靈活可控的自有平臺，Puppeteer可能會比Cypress和TestCafe更加適用。而Cypress和TestCafe作爲前端測試框架，其易用性和較低的學習成本會使得測試人員用起來更加得心應手，後文中也主要是對Cypress和TestCafe的種草。
二、相比於Selenium的小優勢
####（1）簡單到令人驚喜的安裝過程
對TestCafe和Cypress初有好感是從安裝開始的。對於Web的自動化測試，大部分人熟悉的還是Selenium + Webdriver 的解決方案。還記得去年在某通信類企業用Selenium進行自動化測試時，僅安裝就耗費了兩天時間，Webdriver版本問題、環境變量配置問題和特殊環境限制下出現的其他問題等等，安裝體驗非常痛苦，若不是爲了賺錢養家，幾乎就是要放棄了。
而本文種草的兩種工具，其安裝真的是非常簡單，只需要一行命令就可以自動安裝和配置所有驅動程序和依賴項：
npm install testcafe
如果你想安裝cypress，把testcafe換成cypress即可。
還可以選擇本地安裝，以支持不同項目使用不同的版本：
npm install --save-dev testcafe
就算沒寫過代碼的QA同學也完全都夠上手，瞧，是不是非常的驚喜。
####（2）內置的等待機制
還記得第一次獨立開始寫自動化測試，是來要完善一個基於Selenium的自動化測試。代碼中在很多地方都重複的使用time.sleep(2)、time.sleep(5)等類似的等待。開始覺得很冗餘，試圖刪掉一些，發現刪除後測試出現了不穩定狀況，時過時掛，無奈只能又加回來。後來，發現了“隱式等待”，只需要加上“driver.implicitly_wait(10)”（在嘗試發現某個元素的時候，如果沒能立刻發現，就等待固定長度的時間10s）。像是發現了新大陸一樣，終於可以幹掉那些看着鬧心的time.sleep()了。
然而，TestCafe和Cypress更讓人驚喜，他們是內置了自動等待機制的。
TestCafe具有內置的自動等待機制，它不需要專用的API來等待頁面元素出現。他對以下幾種行爲內置了等待機制：
- Actions：元素出現前不運行action，而是持續監聽selector，直到元素出現或超時。
- Selectors：監聽selector，直到元素出現或超時。
- Assertions：智能斷言查詢機制，重試斷言結果直到通過或超時。
- XHR and Fetch Requests：執行測試動作之前，等帶XHR 和 fetch request，測試在收到響應或超時後運行下一步。
- Redirects：當觸發重定向時，自動等待服務器響應。
Cypress更是將使用cy.wait()當作是反模式，明文寫在其文檔中。例如，以下代碼中的等待就是不需要的：
cy.request('http://localhost:8080/db/seed')
cy.wait(5000) // <--- this is unnecessary
在cy.request()收到服務器響應之前不會進行解析，此處添加的“等待5s”已經默認存在了。除此之外，cy.visit() 會自動等待所有資源都加載完成，cy.get() 會自動重試尋找元素。
三、TestCafe的獨特優勢
####（1）Live模式
TestCafe支持Live模式，該模式下進行調試工作會簡單一些。啓用Live模式運行測試時TestCafe會打開瀏覽器運行測試，並顯示報告。然後，TestCafe會監視測試文件和其引用的所有文件，一旦發現這些文件有更改並且進行了保存，TestCafe就會重新運行測試，實時展示代碼運行情況。測試完成後，瀏覽器會保留在最後打開的頁面上，方便使用開發者工具進行調試。
實時模式可以在任何瀏覽器中使用：本地，遠程，移動或無頭。
使用-L(-live)標誌從命令行界面啓用實時模式。
testcafe chrome tests/test.js -L
####（2）多瀏覽器併發測試變得很簡單
TestCafe允許執行併發測試，運行以下的命令啓動測試：
testcafe chrome tests/test.js
當需要調用一個瀏覽器的多個實例同時運行時，可以用-c或—concurrency命令，如用以下命令調用三個Chrome實例同時運行：
testcafe -c 3 chrome tests/test.js
還可以針對多個不同的瀏覽器進行併發測試，例如啓用4個Safari實例和4個Firefox實例：
testcafe -c 4 safari,firefox tests/test.js
甚至可以使用all在全部本地計算機已經安裝的瀏覽器中運行測試，這種一下子把全部本地瀏覽器都打開進行測試的感覺太酷了，我自己都沒想到電腦上裝了這麼多瀏覽器，哈哈哈：
testcafe all tests/test.js
####（3）可以在遠程計算機和移動設備進行測試
可以在沒有安裝TestCafe的計算機設備上運行測試，只要這臺設備可以訪問已安裝了TestCafe的這臺計算的網絡即可。
在遠程計算機上運行測試：
1、用testcafe remote啓用一個web服務器，供遠程測試機訪問。
testcafe remote tests/test.js
2、遠程機器打開任意瀏覽器，訪問控制檯中輸出的URL即可進行測試。
在移動設備上運行測試：
1、用testcafe remote啓用一個web服務器，添加–qr-code標誌以生成移動設備的QR碼。
testcafe remote tests/test.js --qr-code
2、TestCafe將二維碼輸出到控制檯，如下圖所示。
3、 使用移動設備上的瀏覽器，掃描二維碼，TestCafe將在移動瀏覽器中啓動測試。
四、Cypress的殺手鐗
####（1）吹爆Time travel功能
Cypress的Time travel功能絕對是它的最大亮點，支持回退至任意時間的Snapshot，像是在回放電影一樣，將測試運行過程中的每個細節重現出來。可以非常快速的定位問題，極大的提高了調試自動化測試的體驗，相信調試過自動化的同學一定可以體會到它的好處。不過目前該功能的使用是有限制的，若想更好的使用該功能是需要付費的。
在它的運行界面中可以看到每一步的操作，只需點擊你想重現的步驟即可看到該步的截屏。如下圖所示，點擊“找到包含type的元素”這一行代碼，右側就會呈現出此時的場景，並高亮出這個元素。
對於包含動作的步驟（如Click），還會出現兩個場景：before和after（箭頭3所指向的位置），完全不需要重新跑測試就可以重現，節省了大量爲了重現某一問題而需要跑前面若干場景的時間。
####（2）官方文檔大讚
Cypress的官方文檔中是帶小視頻的，這對於QA同學入門自動化非常的友好，從入門開始，就像是有老師帶着你一步一步的升級打怪一樣，按着視頻上的教程來，你一定能掌握這個工具的。
五、TestCafe和Cypress小對比
####（1）從對瀏覽器的支持度上來看：
明顯TestCafe更佔優勢。
Cypress目前只支持Chrome，其開發團隊目前正在致力於對IE、Firefox等瀏覽器的支持，以滿足對跨瀏覽器測試的支持。
TestCafe支持市面上主流的瀏覽器，包括：
- Google Chrome: Stable, Beta, Dev and Canary
- Internet Explorer (11+)
- Microsoft Edge
- Mozilla Firefox
- Safari
- Android browser
- Safari mobile
####（2）從github角度看兩個工具：
可以看出Cypress的Star更多，表示有更多的人認可該工具。而TestCafe的Open/Issue的比例更低，表明TestCafe社區對問題的修復率更高。
####（3）支持語言
TestCafe和Cypress都是隻支持JavaScript的，對一些只會python的QA同學就有些沒那麼友好了。
六、小結
這兩個工具相比於Selenium都更加的輕量級，且在不同的方面有了改進，比如安裝更簡單，增加了內置等待機制，調試更加方便等。
當然，這兩個工具也有其侷限性。比如，有同事指出TestCafe和Cypress對視覺測試（Visual
Testing）的支持並不是很友好，TestCafe中Visual Regression Testing相關的issue還是Open狀態，而Cypress需要通過plugin來支持視覺測試，其本身也不支持。再比如，我個人在使用testcafe過程中遇到了框架不穩定的問題，執行typetext()（用於在輸入框中輸入字符串）時，文字的後半部分輸入尚未完整就繼續執行下一個action，且在排除了版本匹配問題後仍不穩定出現。
若想了解更多這兩個工具的特點，大可以親自試用一下。如果剛巧項目需要進行Web UI自動化，同學們也不妨試試這兩個新工具。
作爲一篇種草貼，必然是要附上兩款自動化測試工具的鏈接噠：
https://devexpress.github.io/testcafe/
文/ThoughtWorks 王薇
更多精彩商業洞見，請關注微信公衆號：ThoughtWorks洞見