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

Cypress 并不是廣義上的 web 自動化工具，并不適合編寫腳本來測試已經(jīng)處于生產(chǎn)狀態(tài)下的不受測試者控制的網(wǎng)站。

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

https://docs./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 所有的測試函數(shù)都結(jié)束運行后，Cypress 才開始執(zhí)行之前通過 cy.* 命令放到任務(wù)隊列中的指令。

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

/// <reference types="Cypress" />

describe('My First Test', () => {
  it('finds the content "type"', () => {
    cy.visit('https://example.')

    cy.contains('type').click();

    cy.url().should('include', '/commands/actions');

    cy.get('.action-email')
      .type('jerry@email.com')
      .should('have.value', 'jerry@email.com');
  })
})

測試結(jié)果如下：

逐行語句分析

1. describe 語句

describe 是一個 Mocha.SuiteFunction 函數(shù)，接受字符串 title 和箭頭函數(shù)作為輸入?yún)?shù)。返回 Mocha.Suite 實例。該 describe 函數(shù)僅當(dāng)被 mocha CLI 調(diào)用時才可用。

2. it

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

3. cy.visit

訪問指定的 url.

命令的幫助文檔：

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

當(dāng) visit 參數(shù)指定的 url 對應(yīng)的頁面結(jié)束加載后，會 yield 一個 windows 對象：

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

its 方法：取得調(diào)用對象指定參數(shù)的值。

例子：

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

參考其幫助文檔：

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

cy.visit() 的執(zhí)行細(xì)節(jié)：

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 待訪問的頁面沒有加載完畢，則不會繼續(xù)執(zhí)行指令。

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.

這使得我們完全不用擔(dān)心，我們書寫的 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 開發(fā)者工具，可以查看到該指令執(zhí)行后返回的結(jié)果：

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

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

下面這行語句：

cy.contains('apples')

生成的 DOM 對象為：

<li>apples</li>

contains 方法可以在一個節(jié)點的后代節(jié)點里進(jìn)行查詢：

<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 命令模擬應(yīng)用里的用戶點擊行為。在底層，Cypress 采取和用戶在瀏覽器上真實點擊時拋出 event 的同樣方式，來觸發(fā)應(yīng)用程序的事件處理函數(shù)。

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 執(zhí)行 click 命令之前，框架會進(jìn)行 DOM 狀態(tài)的檢查，確保該 DOM 元素真正能夠接收點擊事件。

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

• 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 開發(fā)者工具，可以觀察到 click 指令執(zhí)行時的屏幕坐標(biāo)，以及發(fā)生的鼠標(biāo)事件：

6. cy.url

得到當(dāng)前處于激活狀態(tài)的頁面的 url.

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

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

使用 get 輸入?yún)?shù)里包含的 select，獲取指定的 DOM 元素。

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

8. type('jerry@email.com')

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

指令幫助文檔：

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

發(fā)生的鍵盤事件如下：

最后的 assert 成功執(zhí)行：