体验Cypress E2E测试
相比Puppeteer，Cypress支持更多的浏览器（Chrome家族、Edge、Firefox），在编写测试用例时不需要使用代码去拉起浏览器。Cypress Test Runner是开源软件且免费的，在本地运行、不使用Dashboard Web服务时，不需要付费。
Cypress可以用在端到端测试、集成测试、单元测试，但是作为一款一站式重型框架，比较合适用在端到端测试。单元测试，在NodeJS中使用jsdom模拟浏览器就足够了。
以下内容的操作均针对一个npm项目。
1. Cypress 安装
yarn add cypress -D
或者在package.json添加如下内容，再执行yarn：
{
"scripts": {
"test": "cypress run"
},
"devDependencies": {
"cypress": "^4.9.0"
}
}
2. 添加Cypress配置
在项目根目录添加cypress.json，内容如下：
{
"baseUrl": "https://example.cypress.io"
}
baseUrl是给测试用例中开始浏览使用的。
3. 添加E2E测试用例
在项目的cypress/integration/目录中添加sample_real_spec.js，内容如下：
// sample_real_spec.js
/// <reference types="cypress" />
describe('My First Real Test', function() {
it('Gets, types and asserts', function() {
// https://example.cypress.io
cy.visit('/')
cy.contains('type').click()
// 应该存在一个包含'/commands/actions'的新URL
cy.url().should('include', '/commands/actions')
// 获取一个输入, 输入进去并且验证文本值已经更新了
cy.get('.action-email')
.type('fake@email.com')
.should('have.value', 'fake@email.com')
})
})
普通的单元测试用例也可以添加，如下：
// sample_spec.js
/// <reference types="cypress" />
describe('My First Test', function () {
it('Does not do much!', function () {
expect(true).to.equal(true)
})
})
4. 跑测试用例
可以选择下面的一种命令开始：
# Electron headless
yarn run cypress run
# Electron
yarn run cypress run --headed
# Chrome
yarn run cypress run --browser chrome
5. 查看结果
执行 yarn test，控制台输出如下：
PS D:\Dev\Web\Testing\cypress-1> yarn test
yarn run v1.22.4
$ cypress run
====================================================================================================
(Run Starting)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Cypress: 4.9.0 │
│ Browser: Electron 80 (headless) │
│ Specs: 2 found (sample_real_spec.js, sample_spec.js) │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: sample_real_spec.js (1 of 2)
My First Real Test
√ Gets, types and asserts (8166ms)
1 passing (8s)
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 1 │
│ Passing: 1 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 8 seconds │
│ Spec Ran: sample_real_spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: D:\Dev\Web\Testing\cypress-1\cypress\videos\sample_real_spe (1 second)
c.js.mp4
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: sample_spec.js (2 of 2)
My First Test
√ Does not do much! (141ms)
1 passing (165ms)
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 1 │
│ Passing: 1 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 0 seconds │
│ Spec Ran: sample_spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: D:\Dev\Web\Testing\cypress-1\cypress\videos\sample_spec.js. (0 seconds)
mp4
====================================================================================================
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ √ sample_real_spec.js 00:08 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ sample_spec.js 161ms 1 1 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
√ All specs passed! 00:08 2 2 - - -
Done in 29.98s.
可以看到输出两个视频文件，其中录制整个测试过程的页面情况：
PS D:\Dev\Web\Testing\cypress-1> dir .\cypress\videos\
目录: D:\Dev\Web\Testing\cypress-1\cypress\videos
Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 2020/7/2 11:15 138567 sample_real_spec.js.mp4
-a---- 2020/7/2 11:15 19090 sample_spec.js.mp4
视频内容如下：
