Cypress 簡介

#什么是 Cypress

一個前端測驗工具

• Cypress 能測驗什么
  • E2E 測驗
  • 集成測驗
  • 單元測驗（因為內嵌了 Mocha）
  • 任何在瀏覽器中運行的內容
• Cypress 提供的一些功能
  • 時間旅行
  • 自動等待（類似 Jest 中的 wait）
    • 以同步風格的代碼完成異步操作
  • 網路流量控制
  • 截屏
  • 持續集成
• Cypress 語法設計（及內置物件）
  • jQuery + 鏈式呼叫
  • Promise（Bluebird）
  • Mocha + Chai

#為什么要用 Cypress

• 當你需要 E2E 測驗
• 在 2019 年 JavaScript 明星專案 的測驗分類中位于第二名
• 比其他同類 E2E 測驗工具更簡單、靈活、健壯

#學習 Cypress

#概覽

• 耗時：從入門到熟悉基本概念，大約需要 8~16 小時
• 難點：充分利用需要花一定時間學習和配置（報告、覆寫率、CI 等）
• 工具：cypress

#學習路線

• 前置學習
  • 前端開發入門指南
  • （Jest）
  • （有一定實際應用開發經驗）
• 學習 Cypress
  • 了解 Cypress 的組成，全面閱讀檔案
  • 掌味訓本使用
• 實戰
  • 在業務中撰寫測驗
    • 進一步熟悉各 API 的大量細節
  • 為專案調整 Cypress 配置，使用高級功能

#資料

#自學教材

• Cypress End-to-End Testing：10 分鐘，Cypress 概覽
• Cypress 官方檔案
  • API
  • 最佳實踐

#實戰

• Cypress - Learn By Doing
• cypress-example-recipes

#Cypress 知識體系

#Cypress 概覽

#安裝/初始化

**`# 在已有專案中安裝 cypress

npm install cypress --save-dev

接著運行這個命令，cypress 將初始化并生成一堆用例

npx cypress open`**

#檔案結構

• /cypress
  • /fixtures （mock 資料）
    • example.json
  • /integration （測驗檔案）
    • /examples
      • example.spec.js （一般格式為 *.spec.js）
  • /plugins （用于配置安裝的 插件，task 系統）
    • index.js
  • /support （用于調整 自定義選項）
    • commands.js
    • index.js
  • /screenshots （默認截屏檔案夾）
• 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：全域物件，影響所有測驗
  • 內置工具
    • Cypress._：Lodash
    • Cypress.$：jQuery
    • Cypress.Blob：blob-utli
    • Cypress.minimatch()：minimatch
    • Cypress.moment()：moment.js
    • new Cypress.Promise(fn)：Bluebird
  • 全域 API
• 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 風格的生命周期，

不同測驗的命名風格：

Untitled

#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）
• 操作
  • 用戶操作
    • 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 物件
• 環境資訊
  • 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

#Cypress 典型代碼

查看上文中的 實戰鏈接 及 典型代碼