端到端測試哪家強？不容錯過的Cypress

LancerComet 發布于2019-08-22 17:19 / 1721人閱讀

摘要：閱讀原文目前測試工具有哪些項目不需要不需要端到端測試一般都需要一個容器，來運行前端應用。向快速，一致和可靠的無剝落測試問好。

閱讀原文

1. 目前E2E測試工具有哪些？

項目	Web	Star
puppeteer	Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win)	31906
nightmare	Electron	15502
nightwatch	WebDriver	8135
protractor	selenium	7532
casperjs	PhantomJS	7180
cypress	Electron	5303
Zombie	不需要	4880
testcafe	不需要	4645
CodeceptJS	webdriverio	1665

端到端測試一般都需要一個Web容器，來運行前端應用。例如Chromium, Electron, PhantomJS, WebDriver等等。

從體積角度考慮，這些Web容器體積一般都很大。

從速度的角度考慮：PhantomJS, WebDriver < Electon, Chromium。

而且每個工具的側重點也不同，建議按照需要去選擇。

2. 優秀的端到端測試工具應該有哪些特點？

安裝簡易：我希望它非常容易安裝，最好可以一行命令就可以安裝完畢

依賴較少：我只想做個E2E測試，不想安裝jdk, python之類的東西

速度很快：運行測試用例的速度要快

報錯詳細：詳細的報錯

API完備：鼠標鍵盤操作接口，DOM查詢接口等

Debug方便：出錯了可以很方便的調試，而不是去猜

3. 為什么要用Cypress？

Cypress基本上擁有了上面的特點之外，還有以下特點。

時光穿梭 測試運行時，Cypress會自動截圖，你可以輕易的查看每個時間的截圖

Debug友好 不需要再去猜測為什么測試有失敗了，Cypress提供Chrome DevTools, 所以Debug是非常方便的。

實時刷新 Cypress檢測測試用例改變后，會自動刷新

自動等待 不需要在使用wait類似的方法等待某個DOM出現，Cypress會自動幫你做這些

Spies, stubs, and clocks Verify and control the behavior of functions, server responses, or timers. The same functionality you love from unit testing is right at your fingertips.

網絡流量控制 在不涉及服務器的情況下輕松控制，存根和測試邊緣案例。無論你喜歡，你都可以存儲網絡流量。

一致的結果 我們的架構不使用Selenium或WebDriver。向快速，一致和可靠的無剝落測試問好。

截圖和視頻 查看失敗時自動截取的截圖，或無條件運行時整個測試套件的視頻。

4. 安裝cypress 4.1. 使用npm方法安裝

注意這個方法需要下載壓縮過Electron, 所以可能會花費幾分鐘時間，請耐心等待。

npm i cypress -D

4.2. 直接下載Cypress客戶端

你可以把Cypress想想成一個瀏覽器，可以多帶帶把它下載下來，安裝到電腦上，當做一個客戶端軟件來用。

打開之后就是這個樣子，可以手動去打開項目，運行測試用例。

5. 初始化Cypress

Cypress初始化，會在項目根目錄自動生成cypress文件夾，并且里面有些測試用例模板，可以很方便的學習。

初始化的方法有兩種。

如果你下載的客戶端，那么你用客戶端打開項目時，它會檢測項目目錄下有沒有Cypress目錄，如果沒有，就自動幫你生成模板。

如果你使用npm安裝的Cypress，可以使用命令node_modules/.bin/cypress open去初始化

6. 編寫測試用例

// hacker-news.js
describe("Hacker News登錄測試", () => {
  it("登錄頁面", () => {
    cy.visit("https://news.ycombinator.com/login?goto=news")
    cy.get("input[name="acct"]").eq(0).type("test")
    cy.get("input[name="pw"]").eq(0).type("123456")
    cy.get("input[value="login"]").click()

    cy.contains("Bad login")
  })
})

7. 查看結果

打開Cypress客戶端，選擇要測試項目的根目錄，點擊hacker-news.js后，測試用例就會自動運行

運行結束后，左側欄目鼠標移動上去，右側欄都會顯示出該步驟的截圖，所以叫做時光穿梭功能。

從截圖也可以看出來，Cypress的步驟描述很詳細。

云服務器 GPU云服務器端到端測試端到端 webrtc端到端通信 webrtc端到端延時

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95054.html

端到端測試神器Cypress!進階

摘要：前言官方文檔目前只支持英文，好處是官方入門視頻很多，對于英文水平不好的也很容易入手優缺點優點只要你學好語法上應該不是很大問題獲取類似，對前端同學來說是好處缺點內置的工具集成了谷歌內核，決定你只能是在谷歌瀏覽器上測試，但隨著新版的內核采用內核前言官方文檔：https://docs.cypress.io 目前只支持英文，好處是官方入門視頻很多，對于英文水平不好的也很容易入手；優缺點 ...

oysun 2019-08-26 13:55 評論0 收藏0
端到端測試神器 cypress 淺入淺出

摘要：我之前寫過關于的文章，，最近在工作中用到比較多了，頓時覺得確實是比較優秀的一個。我之前寫過關于cypress的文章，https://segmentfault.com/a/11...，最近在工作中用到cypress比較多了，頓時覺得cypress確實是比較優秀的一個。 1. 軟件安裝. 2. 安裝cypress 安裝cypress客戶端：http://download.cypress...

CarlBenjamin 2019-08-22 18:45 評論0 收藏0
FE.TEST-前端測試初探

摘要：使用可以快速生成一個項目，其中包含了和以及覆蓋率統計的配置參考一個創建測試腳本的快速方法其他參考資料前端自動化測試概覽測試之使用對項目進行單元測試 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言測試可以提供快速反饋，根據測試用例覆蓋代碼，從而提升代碼開發效率和質量。根據投入產出價值，通常迭代較快的業務邏輯不做...

Travis 2019-08-23 12:55 評論0 收藏0
FE.TEST-前端測試初探

摘要：使用可以快速生成一個項目，其中包含了和以及覆蓋率統計的配置參考一個創建測試腳本的快速方法其他參考資料前端自動化測試概覽測試之使用對項目進行單元測試 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言測試可以提供快速反饋，根據測試用例覆蓋代碼，從而提升代碼開發效率和質量。根據投入產出價值，通常迭代較快的業務邏輯不做...

張率功 2019-08-29 17:11 評論0 收藏0