技术栈
- 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 目录中
|__ 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.jsdescribe('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)undefinedundefined 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 - - -
