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') 

事實上,Cypress 捆綁了jQuery並向你公開其許多DOM遍歷方法，以便你可以輕松使用你已熟悉的API來處理復雜的HTML結構。

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

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