cypress 是一个快速、简单、可靠的浏览器 E2E 测试工具。
image.png
Features
-
cypress 运行过程中会截取当前页面的快照，测试结束后可以通过这些快照回溯当时的细节
image.png -
可以直接在浏览器调试，支持使用例如 Developer Tools 的工具，结合回溯快照的功能，你可以在页面出现错误的那一瞬进行调试，很方便的定位问题
image.png - 除非特定业务的需要，cypress 一般不需要执行
wait或sleep命令，它会自动等待异步返回的结果（比如接口调用）
Quick Strat
- 安装及运行 cypress
npm install cypress --save-dev
npx cypress open
- 创建一个 test
touch {your_project}/cypress/integration/sample_spec.js
// sample_spec.js
describe('My First Test', () => {
it('Does not do much!', () => {
expect(true).to.equal(true)
})
})
-
执行一下
image.png
image.png
Test Voucher Management
- 结合业务，以卡券后台为例( voucher-management )，创建一个简单的测试，在 select 筛选项中选中 Coupon ，然后搜索，此时搜索出的结果应当全部为 Coupon
- 可以看到 cypress 的语法类似 jquery，但是比 jq 还要简单直观
// voucher_spec.js
describe('Voucher', () => {
it('demo', () => {
cy.visit('http://localhost:4200/voucher/list'); // 访问本地页面方便调试
cy.get('#awardType').click(); // 选中 Award Type Select
cy.contains('Coupon').click(); // 有文本的元素可以直接使用 contains API，这里是选择 Select 下的Coupon Option
cy.contains('Submit').click(); // 点击 Submit Button 搜索
cy.get('.ant-table-body .ant-table-row').each(($el) => {
cy.wrap($el).children('td:nth-child(11)').should('contain', 'Coupon');
}); // tbody 的第 11 列（也就是 Award Type 那一列），应当全部为 Coupon
});
});
image.png
- 如果你在写代码的过程中添加一些自定义属性，那么 cypress 的选择过程会更加简单
...
<input data-cy="input-A">
...
cy.get('[data-cy="input-A"]')
...
- Cypress 好用的一个地方在于它的快照，如下图，选中左侧的一个节点，那么不仅会在屏幕中央显示当时的页面画面，还会把快照时的一些信息打印在右侧
-
并且，屏幕中央的页面是可以进行 DevTool 调试的，可以通过查看当时的 Elements 情况来定位一些棘手的问题
image.png
