最近在研究如何提升项目质量，提炼了许多个用于自测的测试用例，但是每次修改后，都手工测试，成本太高，于是就想到了自动化测试。

　　在一年前已将 Cypress 集成到管理后台的项目中，不过没有投入到实践中。今天在实践时发现，版本已经到了 12.X，当时集成的版本是 8.X。

一、准备

　　在重新安装后，将之前的目录直接删除，运行命令后。

npx cypress open

1）目录

　　又会在根目录自动生成新文件，测试用例都会写在 e2e 目录中。

|-- downloads
|-- e2e
|----- example.spec.js
|-- fixtures
|-- support

　　将 cypress open 命令添加到 scripts 中，就能通过 npm run cypress 命令执行E2E测试了。

{
  "scripts": {
    "cypress": "cypress open"
  }
}

2）启动

　　在刚启动时，会先让你选择一款浏览器，我选择了 Chrome。

　　然后就会自动打开浏览器，右边的控制台我自己打开的，用于查看通信和打印信息。

　　中间有许多自动生成的 demo spec，初学者可以作为参考。

　　在点击某一个 spec 文件后，就会进入测试页面，左侧是可以回溯的测试过程和结果，中间是在执行的界面。

　　若测试不通过，会有醒目的红色错误提示。

二、实践

　　本次实践的测试对象是一个管理后台，管理后台是需要登录的，肯定不能在每一个测试用例都要重复登录的操作。

　　况且，我们的后台会限制登录次数，若登录太多，就会禁用账号。

1）登录

　　思前想后，决定直接存储登录后的鉴权信息，我们在登录后，会将此信息存储到 localStorage 中。

　　此时需要考虑一个问题，那就我团队中每个人的登录账号是不同的，如何存储这些信息。

　　阅读官方文档后，发现可以将配置信息放在 fixtures 目录中，创建 config.json 文件，内容如下。

{
  "name": "[email protected]",
  "pwd": "yyy2023",
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9",
  "authorities": "*"
}

　　config.json 文件会被版本忽略，所以文件即使被修改，也不会提交到版本库中。

　　然后将存储的功能封装成一条命令，这样在各个测试用例中调用会比较简洁。

Cypress.Commands.add('saveToken', () => {
  cy.fixture('config.json').then((config) => {
    const { token, authorities } = config;
    localStorage.setItem('token', token);
    localStorage.setItem('authorities', authorities);
  });
});

　　在 beforeEach() 方法中只需执行 cy.saveToken() 就能保持登录态。

describe('短链服务', () => {
  beforeEach(() => {
    cy.saveToken(); // 保持登录态
    cy.visit('/operate/shortChain');// 跳转页面
  });
 });

2）测试

　　在解决登录态后，就开始正式的测试。

　　Cypress 的断言集成了 Chai，并且扩展了 Sinon 和 jQuery，也就是说，可以在框架内使用它们提供的功能。

　　下图是需要测试的短链服务界面，接下来会测试新建、更新、查询、分页和删除。

　　点击新建，会有一个弹框，在弹框中有一个表单。

　　cy.get() 用于查找元素，其参数可以是一个 CSS 选择器字符串，官方文档有专门一栏介绍查询方法。

　　cy.type() 用于填写文本框，官方还提供了点击、双击、上传文件等功能。scrollBehavior: false 是为了禁止移动滚动条。

　　页面截图需要上传，测试用的图像保存在 fixtures 目录中，cy.fixture() 可以读取此目录中的文件。

　　cy.selectFile() 用于上传文件，demo 加了个 @ 符号，不加就无法获取到文件。

  it('存储', () => {
    // 定位到新建按钮
    cy.get('.ant-btn').first().click();
    cy.wait(500);
    // 在填写表单控件时禁用滚动
    cy.get('.ant-modal #url').type(`http://www.xxx.com/test${random()}.html`, 
        { scrollBehavior: false });
    cy.get('.ant-modal #remark').type('测试', { scrollBehavior: false });
    // 上传图像，图像存储在 fixtures 目录内
    cy.fixture('demo.png', { encoding: null }).as('demo');
    cy.get('input[type=file]').selectFile('@demo', { force: true });
    cy.wait(1000);
    // 存储
    cy.get('.ant-modal .ant-btn-primary').click();
    cy.get('.ant-modal').should('not.exist'); // 断言存储流程是否正常
    cy.scrollTo(0, 0);
    cy.wait(2000);
  });

　　cy.wait() 就是等待，因为自动操作速度很快，有时候需要停顿下，用肉眼观察下结果。

　　cy.should() 用于创建断言，这与之前的 expect() 断言稍有不同，其参数就是断言结果，关键字可以参考 Chai 的断言方法。

　　Cypress 提供了众多的 API，还有很大的挖掘空间，并且提供了丰富的 demo，学习起来也比较方便。