cypress前端自動化測試工具——(1)簡介與selenium争天下

Cypress是什麼？

為現代網絡打造的下一代前端測試工具。我們解決了開發人員和QA工程師在測試現代應用程式時面臨的關鍵難點問題。

我們很容易的能夠做下面的事情:

• ​​設定測試​​
• ​​編寫測試​​
• ​​執行測試​​
• ​​調試測試​​

通常大家都會以為Cypress就是Selenium；

Cypress從底層和結構上都不同于Selenium。Cypress能夠突破很多Selenium上的限制。

這将讓你能夠編寫更快、更簡單和更可靠的測試。

Cypress允許你編寫所有類型的測試：

• 端到端測試
• 內建測試
• 單元測試

Cypress可以測試任何在浏覽器中運作的内容。

特性

Cypress就像一個完整的烘烤箱，他還自帶電池。 下面是一些其它測試架構無法做到的事情：

• 時間旅行： Cypress在你運作測試的時候拍攝快照。 隻要将滑鼠懸停在指令日志 上就能夠清楚的了解到每一步發生了什麼。
• 可調式能力： 你再也不需要去猜測測試為什麼失敗了。調試工具 和Chrome的調試工具差不多。 清晰的錯誤原因和堆棧跟蹤讓調試能夠更加快速。
• 自動等待： 在你的測試中不再需要添加等待或睡眠函數了。在執行下一條指令或斷言前Cypress會自動等待 異步将不再是問題.
• Spies, Stubs, and Clocks: 驗證和控制 函數、伺服器響應或者計時器的行為。你喜歡的單元測試的功能都掌握在你的手中。
• 網絡流量控制： 非常容易的進行控制、儲存和邊緣測試，而這并不需要涉及到你的服務。你可以根據需要保留網絡流量。
• 一緻的結果： 我們的架構不需要Selenium或者WebDriver。向快速，一緻和可靠的無侵入測試看齊。
• 螢幕截圖和視訊： 可以檢視測試失敗時候系統自動截取的圖檔，或者整個測試的錄制視訊。

簡介入門

describe('Post Resource', function() {
  it('Creating a New Post', function() {
    cy.visit('/posts/new')     // 1.

    cy.get('input.post-title') // 2.
      .type('My First Post')   // 3.

    cy.get('input.post-body')  // 4.
      .type('Hello, world!')   // 5.

    cy.contains('Submit')      // 6.
      .click()                 // 7.

    cy.url()                   // 8.
      .should('include', '/posts/my-first-post')

    cy.get('h1')               // 9.
      .should('contain', 'My First Post')
  })
})      

1. 通路​

   ​/posts/new​

   ​ 頁面.
2. 找到類為​

   ​post-title​

   ​ 的輸入框.
3. 輸入”My First Post”.
4. 找到類為​

   ​post-body​

   ​ 的輸入框.
5. 輸入”Hello, world!”.
6. 找到含有​

   ​Submit​

   ​ 文本的元素.
7. 點選.
8. 擷取浏覽器位址，確定位址裡含有​

   ​/posts/my-first-post​

   ​.
9. 找到​

   ​h1​

   ​ 标簽, 確定内容裡含有”My First Post”.

查詢元素

Cypress很像jQuery

如果你之前使用過 jQuery , 你可能習慣于這樣查詢元素:

$('.my-selector')      

在Cypress,查詢元素的方式是相同的:

cy.get('.my-selector')      

// 每個方法都等同于它的jQuery對應方法。用你所知道的！
cy.get('#main-content')
  .find('.article')
  .children('img[src^="/static"]')
  .first()

Cypress利用jQuery強大的選擇器引擎幫助現代Web開發人員熟悉和查找元素。