Cypress 簡介
#什麼是 Cypress
一個前端測試工具
- Cypress 能測試什麼
- E2E 測試
- 集成測試
- 單元測試（因爲內嵌了 Mocha）
- 任何在瀏覽器中運行的內容
- Cypress 提供的一些功能
- 時間旅行
- 自動等待（類似 Jest 中的 wait）
- 以同步風格的代碼完成異步操作
- 網絡流量控制
- 截屏
- 持續集成
- Cypress 語法設計（及內置對象）
- jQuery + 鏈式調用
- Promise（Bluebird）
- Mocha + Chai
#爲什麼要用 Cypress
- 當你需要 E2E 測試
- 在 2019 年 JavaScript 明星項目 的測試分類中位於第二名
- 比其他同類 E2E 測試工具更簡單、靈活、健壯
#學習 Cypress
#概覽
- 耗時：從入門到熟悉基本概念，大約需要 8~16 小時
- 難點：充分利用需要花一定時間學習和配置（報告、覆蓋率、CI 等）
- 工具：cypress
#學習路線
- 前置學習
- 學習 Cypress
- 瞭解 Cypress 的組成，全面閱讀文檔
- 掌握基本使用
- 實戰
- 在業務中編寫測試
- 進一步熟悉各 API 的大量細節
- 爲項目調整 Cypress 配置，使用高級功能
- 在業務中編寫測試
#資料
#自學教材
- Cypress End-to-End Testing：10 分鐘，Cypress 概覽
- Cypress 官方文檔
#實戰
#Cypress 知識體系
#Cypress 概覽
#安裝/初始化
**`# 在已有項目中安裝 cypress
npm install cypress --save-dev
接着運行這個命令，cypress 將初始化並生成一堆用例
npx cypress open`**
#文件結構
- /cypress
- cypress.json
#測試文件 典型代碼
/// <reference types="cypress" />
describe('描述', () => {
before(() => console.log('---- Test Start! ----'));
beforeEach(() => cy.visit('<https://witch.url>'));
afterEach(() => cy.clearCookies());
it('測試用戶交互', () => {
cy.get('#app')
.children('.intro')
.click();
cy.contains('Welcome').should('be.exist');
});
it('測試顯示文本', () => {
cy.get('div').should('have.text', 'Hello');
// * 另一種風格
cy.get('div').should(($div) => {
const text = $div.text();
expect(text).to.match(/hello/i);
});
});
});
大致分爲幾個部分
- TypeScript 自動完成支持（第一行的註釋）
- 運行器和生命週期（describe、it、before 等）
- 元素查找和操作（cy 相關命令）
- 斷言/測試（should、expect、assert 多種風格）
#Cypress 對象
- Cypress：全局對象，影響所有測試
- cy：在每個測試中相互獨立
#測試/斷言
Cypress 中內置的斷言 包含了幾種類型：
- Chai：斷言
- expect('test').to.be.a('string')：BDD 風格
- assert.equal(3, 3, 'vals equal')：TDD 風格
- Chai jQuery：關於 DOM 的斷言
- expect(\$el).to.have.attr('foo', 'bar')
- Sinon-Chai：關於函數調用情況的斷言
- expect(spy).to.be.called
- .should()：在 Cypress 中封裝了以上所有可用斷言
- cy.get('li.selected').should('have.length', 3)：should
- cy.get('div').should(($div) => { expect($div)... })：BDD
注意到 Cypress 使用 Mocha BDD 風格的生命週期，
不同測試的命名風格：
#cy 命令
用來編寫測試
- 測試
- should：斷言
- then：類似 Promise 的 then
- each：遍歷執行（對於數組）
- spread：then 的 each 版
- 查詢
- contains、get
- children、closest、find
- eq、filter、not
- first、last
- next、nextAll、nextUntil
- parent、parents、parentsUntil
- prev、prevAll、prevUntil
- siblings
- window、document、title
- its：取得對象中的字段，如 cy.get('ul li').its('length')
- root：當前上下文的根元素節點
- within：設定上下文元素（類似 JS 中的 with）
- contains、get
- 操作
- 用戶操作
- click、dblclick、rightclick
- blur、focus、focused
- hover：不支持
- trigger：觸發事件
- 表單/輸入框
- check、uncheck、select
- clear：清除文本框
- type：輸入文本框
- submit
- scrollIntoView、scrollTo
- invoke：調用對象中的函數，如 cy.get('div').invoke('show')
- 用戶操作
- 瀏覽器
- viewport：設置應用窗口大小
- clearCookie、clearCookies、getCookie、getCookies、setCookie
- clearLocalStorage
- 網絡請求
- visit、reload：訪問
- hash、location、url：獲取
- go：歷史跳轉，相當於 window.history.go
- request：HTTP 請求
- server：啓動一個服務
- route：跳轉路由
- 功能性
- 任務
- log、debug、pause
- exec：執行 shell 命令
- readFile、writeFile
- screenshot：截屏到 /screenshots
- fixture：讀取 /fixtures 中文件內容
- task：執行 /plugins 中聲明的事件
- 語法糖
- as：設置爲別名
- and：進行多個測試
- end：截斷當前測試（後續鏈式調用將重新計算）
- wrap：包裝一個對象（以便支持 cy 命令）
- 調用監聽
- spy：監聽對象中的函數
- stub：替換對象中的函數（用於監聽）
- Timer
- clock：覆寫原生時鐘（將會影響 setTimeout 等原生函數）
- tick：跳過時間，加快測試速度（需要先 cy.clock()）
- wait：顯式等待（不推薦使用）
- 任務
#Cypress API
包含定製選項方法，或公共靜態方法
- 定製
- Commands：添加自定義命令
- Cookies：測試時的 Cookie 行爲控制
- Screenshot：截屏參數配置
- SelectorPlayground：調整選擇器規則
- Server：調整 cy.server() 默認參數
- config：修改 Cypress 的 配置選項
- env：管理自定義全局變量
- log：配置 log 參數
- 輔助
- dom：一組 dom 相關方法
- 如 Cypress.dom.isHidden($el)
- isCy：是否是 cy 對象
- dom：一組 dom 相關方法
- 環境信息
- arch：獲取 CPU 架構，來源於 Node os.arch()
- browser：獲取瀏覽器信息
- platform：獲取操作系統名字
- spec：當前測試文件信息
- version：版本號
#事件
事件綁定機制是 Node Events，
用法如：Cypress.on/cy.on
- 應用（頁面）事件
- uncaught:exception
- window:confirm、window:alert、window:before:load、window:load、window:before:unload、window:unload
- url:changed
- Cypress 事件
- fail
- viewport:changed
- scrolled
- command:enqueued、command:start、command:end、command:retry
- log:added、log:changed
- test:before:run、test:after:run