使用 cypress 作 E2E 測試

E2E 測試即 End to End，也就是端到端測試，屬於黑盒測試。經過編寫測試用例，自動化模擬用戶操做，確保應用程序可以如期運行。以 react-multi-page 模版爲例，談談如何使用 cypress 作 E2E 測試

技術棧

• cypress[3.8.2]
• eslint-plugin-cypress[2.8.1]

如何配置

安裝 cypress

npm i cypress eslint-plugin-cypress -D

設置 npm 腳本命令

{
  "scripts": {
    "test:e2e": "cypress open"
  }
}

運行 cypress

node_modules/.bin/cypress open

cypress 啓動後，會在根目錄看到 cypress 目錄，裏面存放了運行 cypress 相關的配置資料，爲了分類處理目錄結構，能夠約定將測試相關的資料統一放在 test 目錄中。那麼在根目錄創建 test/e2e 目錄用於存放 E2E 測試相關資料，並把 cypress 目錄中的資料轉移到 test/e2e 目錄中

<root>
  |__ test
    |__ e2e
      |__ fixtures
      |__ integration
      |__ plugins
      |__ support

在根目錄建立 cypress.json，配置相關目錄指向 test/e2e 文件夾

{
  "baseUrl": "http://localhost:3000/",
  "fixturesFolder": "test/e2e/fixtures",
  "integrationFolder": "test/e2e/integration",
  "pluginsFile": "test/e2e/plugins/index.js",
  "screenshotsFolder": "test/e2e/screenshots",
  "supportFile": "test/e2e/support/index.js",
  "videosFolder": "test/e2e/videos",
  "video": false
}

其中 baseUr 根據實際網站域名端口自行配置， video 默認是啓用狀態，我這裏設置關閉即不保存測試錄屏文件

編寫測試用例

如今咱們能夠來編寫一些簡單的測試用例，來測試咱們的 APP 的運行是否按預期執行

假設咱們的測試點有：

• 首頁包含 Index 文字
• 首頁包含 Link To Home 文字
• 能夠點擊 Link To Home 文字
• 點擊 Link To Home 文字後進入新頁面，新頁面 url 中包含 home 文字

編寫成對應的 E2E 測試用例以下：

// test/e2e/integration/Index.spec.js
describe('The Home Page', function() {
  it('successfully loads', function() {
    cy.visit('/')
    cy.contains('Index')
    cy.contains('Link To Home').click()
    cy.url().should('include', 'home')
  })
})

運行結果

從新啓動 cypress，選擇 Index.spec.js，能夠看到完整的測試流程，並顯示測試已經經過

持續集成

上面咱們經過 cypress open 命令手動測試，但在實際工做中可能須要在持續集成環境中運行 E2E 測試，能夠使用 cypress run 命令

{
  "scripts": {
    "test:e2e": "npm run serve && cypress run"
  }
}

可是很快就發現問題了，執行 npm run serve 後終端被服務器進程掛起，沒法執行後面的 cypress run 命令，因而我引入 start-server-and-test 來處理 npm run serve 的阻塞問題，也能夠使用官方文檔中的 wait-on

{
  "scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run",
    "serve": "node prod.server.js",
    "test:e2e": "start-server-and-test serve http://localhost:3000 cypress:open",
    "test-ci:e2e": "start-server-and-test serve http://localhost:3000  cypress:run"
  }
}

如今 npm run serve 不會阻塞後面的任務了，終端運行結果以下

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    3.8.2                                                                              │
  │ Browser:    Electron 78 (headless)                                                             │
  │ Specs:      1 found (Index.spec.js)                                                            │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  Index.spec.js                                                                   (1 of 1)
undefined

  The Home Page
    √ successfully loads (1395ms)
undefined
undefined
  1 passing (2s)
undefined

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        false                                                                            │
  │ Duration:     1 second                                                                         │
  │ Spec Ran:     Index.spec.js                                                                    │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ √  Index.spec.js                            00:01        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    √  All specs passed!                        00:01        1        1        -        -        -

參考資料

• https://docs.cypress.io/zh-cn/guides/overview/why-cypress.html