Cypress 自动化测试实践：使用其它断言库扩展 Cypress

Cypress 是目前比较流行的前端自动化测试框架，提供了很多方便的 API 帮助我们编写自动化测试用例，但是它自带的断言库有一些局限性，比如无法直接支持异步测试，也无法使用 chai 的一些插件，因此我们需要使用其它断言库来扩展 Cypress 的能力。

安装其它断言库

Cypress 官方文档推荐使用 Chai.js 作为默认的断言库，但实际上我们完全可以使用其它的库，只需使用如下命令安装即可：

npm install --save-dev [library-name]

例如我们可以安装 expect.js：

npm install --save-dev expect.js

集成其它断言库

安装好其它断言库后，我们需要修改 Cypress 的 support/index.js 文件来集成这个库。在这个文件中，我们可以将断言库扩展到 Cypress 的命名空间上，使其在测试文件中可以通过 cy 命令使用。

import '@testing-library/cypress/add-commands';

// 导入断言库
import expect from 'expect.js';

Cypress.Commands.add('expect', expect);

在这个文件中，我们使用了 Cypress 的命令添加机制将 expect.js 的 api 添加到 Cypress 命名空间中，这样在测试文件中就可以直接使用这些 api 了。

在测试中使用其它断言库

在测试文件中，我们可以使用添加的 cy.expect 命令实现常规的测试，并使用 Chai.js 的断言语法：

describe('my test', () => {
  it('should show title', () => {
    cy.visit('https://example.com/');
    cy.get('h1').should('have.text', 'Example Domain');
  });

  it('should test async', () => {
    cy.wait(500).then(() => {
      cy.wrap('foo')
        .should('have.length', 3)
        .and('equal', 'foo');
    });
  });

  it('should test with expect.js', () => {
    cy.visit('https://example.com/');
    cy.get('h1').should(element => {
      cy.expect(element.text()).to.equal('Example Domain');
    });
  });
});

在上面的测试代码中，我们先测试了常规的断言库，具体包括页面上是否含有 h1 元素以及是否包含特定文本。然后我们测试了一个异步测试用例，虽然 Cypress 原生的断言库无法直接支持异步测试，但是使用其它断言库可以很方便地解决这个问题。最后，我们测试了使用 expect.js 完成一个常规的有选择器的测试用例。

总结

使用其它断言库可以很好地扩展 Cypress 的能力，达到我们更多的测试需要。在选择其它断言库时，我们需要根据实际需求和个人喜好进行选择，只要符合规范和要求，都可以快速集成到 Cypress 中实现自动化测试。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b5c6d3add4f0e0ffe8519f