cypress 是一个快速、简单、可靠的浏览器 E2E 测试工具。
image.pngFeatures
-
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
网友评论