cypress 快速上手

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