Cypress官方版 v4.12.0 綠色版

軟件介紹

Cypress官方版是一款廣受好評的代碼測試軟件，可以為用戶提供完整的端到端測試體驗，并在構建Web應用程序時觀察它們的實時執行，還可以建立一套CI測試，記錄它們并獲得強大的洞察力，是用戶進行web開發時的好幫手。

Cypress軟件特色

時間旅行

賽普拉斯會在您的測試運行時進行快照。只需將鼠標懸停在命令日志中的命令上，就可以看到每一步的具體內容。

調試性

不要再猜測為什么您的測試會失敗。直接從Chrome DevTools等熟悉的工具中進行調試。我們可讀的錯誤和堆棧痕跡使調試變得非?？焖?。

實時重載

每當您對測試進行更改時，Cypress會自動重新加載。在您的應用程序中查看命令的實時執行情況。

自動等待

永遠不要在你的測試中添加等待或睡眠。Cypress會自動等待命令和斷言，然后再繼續。沒有更多的異步地獄。

Cypress軟件功能

Cypress Test Runner

安裝Cypress Test Runner并在本地編寫測試。

工具，并在本地編寫測試。

設置測試

安裝Cypress很簡單。不需要任何依賴性，額外的下載，或修改你的代碼。

編程

編寫測試

輕松、快速地編寫測試，并在構建Web應用程序時觀看它們的實時執行。

賽普拉斯儀表盤

建立一套CI測試，記錄它們并獲得強大的洞察力。

時候

運行測試

在CI中調試測試就像在本地運行測試一樣簡單。內置的并行化和負載平衡。

圖形設計圖標

測試記錄

記錄 CI 測試數據、屏幕截圖和視頻--并在 Dashboard 中查看匯總的下一級見解。

Cypress使用方法

1、編寫一個最基礎的測試

以一個包含 E2E 測試常用操作的測試用例來介紹 Cypress 的基本使用。結合官方文檔給的案例一起看風味更佳。

打開、跳轉網頁：打開 eleme h5 訂餐首頁

滾動首頁餐廳列表，是否正確滾動加載

填寫搜索詞，提交搜索，正確跳轉頁面

點擊搜索第一項，頁面正確展示

2、添加測試文件

在 cypress/integration 文件夾下新建測試文件。如 example.spec.js

3、根據喜好選擇某種風格編寫測試

Cypress 對 chai、Expect.js 風格的都支持，還拓展了一些斷言，

頁面的展示離不開接口的返回結果。根據測試用例模擬不同的接口返回。不建議使用真實請求測試，完全可以自己設計接口返回進行測試。

第一步開啟請求攔截：

Start a cy.server()

第二步設置目標請求的相關內容。cy.route() 指定的請求會被攔截下來，可以根據需求修改 response、status 等等：

Provide a cy.route()

另外，設置請求時可以使用 cy.fixture()，通過這個 command 可以指定請求 response 從特定文件讀取。

例如：

cy.fixture('list.json').as('listInfo')

cy.route('list', '@listInfo').as('getList')

就是攔截 /list 請求，將返回替換成 cypress/fixtures/list.json 文件的內容。

回到本例，我們首先需要用 cy.visit() 跳轉到需要測試的頁面。

關于滾動 Cypress 提供了接口 cy.scrollto()，獲取 DOM 元素用 cy.get()。用法類似平時使用的 querySeclector。

it('列表滾動加載', () => {

  cy.visit('https://h5.ele.me/')

  // 滾動加載

  cy.scrollTo(0, 600)

  cy.get('.shoplist > section').should('have.length', 10)

})

接下來獲取輸入框并輸入搜多次，輸入可以使用 cy.type()

it('輸入搜索詞，結果正確展示', () => {

  cy.visit('https://h5.ele.me/')

  // 點擊跳轉搜索頁面

  cy.get('.search').click()

  cy.wait(200)

  cy.get('input').type('麻辣燙')

  cy.get('button').click()

  // 目標頁面地址包含 search 點擊列表第一項

  cy.wait(500)

  cy.url().should('include', 'search')

  cy.get('.shop').first().click()

  // 跳轉至商家詳情頁，找到購物車元素

  cy.wait(500)

  cy.get('.cartview')

})

這里面使用的 cy.wait() 意思是等待多少毫秒，因為接口是真實數據，事實上真實測試的時候使用我們攔截過的請求，一般不需要使用等待某個時間。

4、一個修改請求的例子

比如我們想模擬 5xx 這種異常返回，當然可以使用 charles 來攔截請求修改狀態。但是使用 Cypress 的話，編寫測試用例的同時就可以在瀏覽器模擬場景，檢測是否符合預期結果。

cy.route({

  url: /xxxx,

  response: '',

  status: 500

})

5、測試結果分析

可視化測試結果如下圖：

每一個 case 運行的過程和結果會顯示在面板上，運行出錯不會妨礙其他 case，對于檢查結果還是比較清晰明了的。對于運行失敗的 case，可以像平時開發一樣用 chrome Devtools 檢查 dom 或網絡請求。

6、常用 api

除了上文介紹到的一些接口，還有一些比較常用的api：

Hooks

describe('Hooks', function() {

  before(function() {

    // runs once before all tests in the block

  })

  after(function() {

    // runs once after all tests in the block

  })

  beforeEach(function() {

    // runs before each test in the block

  })

  afterEach(function() {

    // runs after each test in the block

  })

})

cy.viewport()

可以方便的修改視窗，就像使用 Chrome 模擬不同設備窗口一樣。比如設置了 cy.viewport('iphone-6') 就會以 iphone6 的大小跑測試。

Environment Variables

類似于全局變量，在根目錄下的 cypress.json 中

{

  "env": {

    "foo": "bar",

    "some": "value"

  }

}

便可以在測試文件中通過 Cypress.env('foo') 來訪問。

注意：

后端修改接口時，可能需要修改測試中的接口返回，否則可能會不匹配實際情況。

Cypress 對多瀏覽器測試支持并不友好，不能做到像 browserstack 那樣測試各個瀏覽器兼容性。這方面可以看一下 這篇文章。接下來我們也可能使用阿里云移動測試來測試兼容性。

Cypress 對 fetch 的兼容不好，處理方法詳見 issue95。

7、總結一下使用 Cypress 寫測試的基本思路：

確定是否需要攔截請求，用 cy.route 修改請求，按照設計好的測試用例設定 response。

用 cy.visit 訪問需要測試的頁面。

根據實際情況，一般校驗元素可見性、是否是禁用狀態、數量、文案是否正確等等。

運行測試，在控制面板查看測試結果。

其實上手很快，關鍵是要了解業務流程，合理劃分功能點寫測試用例。

Cypress安裝方法

1、首先等待Cypress下載完成

2、使用壓縮軟件解壓文件

3、雙擊運行exe文件開始安裝

4、自定義安裝目錄等待安裝完成后即可使用