Cypress 是 SAP Spartacus 前端 e2e 測試使用的框架。

Cypress 并不是廣義上的 web 自動化工具，并不適合編寫腳本來測試已經處于生產狀態下的不受測試者控制的網站。

Cypress is not a general purpose web automation tool. It is poorly suited for scripting live, production websites not under your control.

https://docs.cypress.io/guides/getting-started/writing-your-first-test#Step-1-Visit-a-page

After a test function is finished running, Cypress goes to work executing the commands that were enqueued using the cy.* command chains.

等到 Cypress 所有的測試函數都結束運行后，Cypress 才開始執行之前通過 cy.* 命令放到任務隊列中的指令。

這個簡單的 Cypress 測試程序，源代碼如下：

/// <reference types="Cypress" />describe('My First Test', () => {it('finds the content "type"', () => {cy.visit('https://example.cypress.io')cy.contains('type').click();cy.url().should('include', '/commands/actions');cy.get('.action-email').type('jerry@email.com').should('have.value', 'jerry@email.com');}) })

測試結果如下：

逐行語句分析

1. describe 語句

describe 是一個 Mocha.SuiteFunction 函數，接受字符串 title 和箭頭函數作為輸入參數。返回 Mocha.Suite 實例。該 describe 函數僅當被 mocha CLI 調用時才可用。

2. it

定義一個 test specification(也稱 test case)，回調函數為測試主程序的執行代碼。

3. cy.visit

訪問指定的 url.

命令的幫助文檔：

https://docs.cypress.io/api/commands/visit

當 visit 參數指定的 url 對應的頁面結束加載后，會 yield 一個 windows 對象：

cy.visit('/') // yields the window object.its('navigator.language') // yields window.navigator.language.should('equal', 'en-US') // asserts the expected value

its 方法：取得調用對象指定參數的值。

例子：

cy.wrap({ width: '50' }).its('width') // Get the 'width' property cy.window().its('sessionStorage') // Get the 'sessionStorage' property

參考其幫助文檔：

https://docs.cypress.io/api/commands/its

cy.visit() 的執行細節：

Cypress automatically detects things like a page transition event and will automatically halt running commands until the next page has finished loading.

Cypress 自動檢測諸如 page transition 類型的事件，如果 cy.visit 待訪問的頁面沒有加載完畢，則不會繼續執行指令。

Had the next page not finished its loading phase, Cypress would have ended the test and presented an error.

如果 cy.visit 的頁面最終無法完成加載， Cypress 會停止測試，拋出錯誤消息。

Under the hood - this means you don’t have to worry about commands accidentally running against a stale page, nor do you have to worry about running commands against a partially loaded page.

這使得我們完全不用擔心，我們書寫的 Cypress 程序里的指令，會運行在一個正在加載中的頁面。

We mentioned previously that Cypress waited 4 seconds before timing out finding a DOM element - but in this case, when Cypress detects a page transition event it automatically increases the timeout to 60 seconds for the single PAGE LOAD event.

Cypress 指令查找 DOM 元素的超時時間是 4 秒，而 Cypress 等待 cy.visit 加載頁面完成時，超時時間自動修改成了 60 秒。

4. cy.contains(‘type’)

Get the DOM element containing the text.

查找 DOM 樹中包含 type 文本的元素。

如下圖所示：

打開 Chrome 開發者工具，可以查看到該指令執行后返回的結果：

下面這個例子，待測試的 HTML 如下圖所示：

<ul><li>apples</li><li>oranges</li><li>bananas</li> </ul>

下面這行語句：

cy.contains(‘apples’)

生成的 DOM 對象為：

<li>apples</li>

contains 方法可以在一個節點的后代節點里進行查詢：

<div id="main"><form><div><label>name</label><input name="name" /></div><div><label>age</label><input name="age" /></div><input type="submit" value="submit the form!" /></form> </div>

查找 input 元素的代碼：

cy.get('form').contains('submit the form!').click()

5. click

This command simulates a user interacting with your application. Under the hood, Cypress fires the events a browser would fire thus causing your application’s event bindings to fire.

click 命令模擬應用里的用戶點擊行為。在底層，Cypress 采取和用戶在瀏覽器上真實點擊時拋出 event 的同樣方式，來觸發應用程序的事件處理函數。

Prior to issuing any of the commands, we check the current state of the DOM and take some actions to ensure the DOM element is “ready” to receive the action.

在 Cypress 執行 click 命令之前，框架會進行 DOM 狀態的檢查，確保該 DOM 元素真正能夠接收點擊事件。

在執行 click 命令之前，總共有這些檢查和前置事件需要執行：

• Scroll the element into view.
• Ensure the element is not hidden.
• Ensure the element is not disabled.
• Ensure the element is not detached.
• Ensure the element is not readonly.
• Ensure the element is not animating.
• Ensure the element is not covered.
• Scroll the page if still covered by an element with fixed position.
• Fire the event at the desired coordinates.

打開 Chrome 開發者工具，可以觀察到 click 指令執行時的屏幕坐標，以及發生的鼠標事件：

6. cy.url

得到當前處于激活狀態的頁面的 url.

7. cy.url().should(‘include’, ‘/commands/actions’);

7. cy.get(’.action-email’)

使用 get 輸入參數里包含的 select，獲取指定的 DOM 元素。

結果：得到了包含 .action-email 的 input DOM 元素。

8. type(‘jerry@email.com’)

在第 7 步查詢到的 input 字段里，輸入指定的字符。

指令幫助文檔：

https://docs.cypress.io/api/commands/type#Tabindex

發生的鍵盤事件如下：

最后的 assert 成功執行：

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的通过一个简单的例子，了解 Cypress 的运行原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。