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

閱讀原文

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文件夾，而且裏面有些測試用例模板，能夠很方便的學習。

初始化的方法有兩種。

1. 若是你下載的客戶端，那麼你用客戶端打開項目時，它會檢測項目目錄下有沒有Cypress目錄，若是沒有，就自動幫你生成模板。
2. 若是你使用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的步驟描述很詳細。