Cypress 自动化测试实现细节分享-FunTeaLearn Online Web Tutorials

自动化测试是当前前端开发流程中不可或缺的一环。而成熟的自动化测试框架，可以让我们的工作事半功倍。其中，Cypress 是一个非常好用、功能强大的自动化测试框架。本文将分享 Cypress 实现的一些细节、实践经验和注意事项。

环境准备

在开始之前，需要安装 Cypress 并确认本地环境已经配置完整。操作系统为 Windows 的同学需要特别注意，可能需要进行一些附加安装才能正常使用 Cypress。如果你未安装过 cypress，请执行以下命令安装：

npm install --save-dev cypress

测试文件的组织方式

Cypress 测试用例是基于文件 + 文件夹组织的。默认情况下，Cypress 会从 cypress/integration 文件夹下读取所有的测试文件，这些文件可以是 .spec.js 或 .spec.ts 文件。

在编写测试用例时，可以通过创建子文件夹来组织测试文件。建议按照测试场景、模块或者页面来组织测试文件，这样方便维护和管理。每个测试文件可以包含多个测试用例，每个测试用例都是一个独立的函数。例如：

// www.javascriptcn.com code example
describe('登录测试', () => {
  it('成功登录', () => {
    // 测试用例的代码
  });

  it('用户名错误', () => {
    // 测试用例的代码
  });

  it('密码错误', () => {
    // 测试用例的代码
  });
});

测试用例的编写方式

Cypress 的测试用例与常规的 JavaScript 代码类似，但是有一些注意事项和优化方案，可以让代码更加清晰和易于维护。

启动应用

在进行端到端测试时，第一步通常是启动应用。Cypress 提供了 cy.visit() 函数来帮助我们访问页面，但是该函数是异步函数。因此，我们需要使用 .then() 或 await 来等待应用启动。例如：

cy.visit('http://localhost:3000')
  .then(() => {
    // 应用已经启动，可以进行后续操作了
  });

隐式等待

为了避免因连接速度不稳定导致的测试失败问题，我们需要对每一次操作都进行等待。Cypress 提供了自动的隐式等待机制，每个测试操作都会在后台自动等待预设的时间。可以通过 cy.wait() 函数来设置等待时间，例如：

cy.wait(1000); // 等待一秒钟

切换上下文

Cypress 在执行测试时，可以在页面和 iframe 之间自由切换。例如，如果我们需要在一个 iframe 中进行操作，可以使用 cy.frame()。

断言

Cypress 中内置了一些断言函数，我们可以使用 cy.contains() 或 cy.get() 等函数来验证元素是否存在或元素的值是否符合预期。例如：

cy.contains('button', '登录').click(); // 搜索包含 "button" 元素的文本内容 "登录"，并点击该元素
cy.get('.user-name').contains('Admin'); // 获取 class 为 user-name 的元素，并验证文本内容是否包含 "Admin"

高级断言

在某些情况下，内置的断言函数可能不够灵活，而需要使用更高级的断言库，例如 chai。Cypress 提供了支持 chai 的接口，通过该方式可以实现更加复杂、灵活的断言逻辑。例如，在使用 chai 时，我们可以这样调用断言函数：

cy.wrap(12)
  .should('be.greaterThan', 10);

常用命令

以下是一些常用命令，可以在测试用例中使用：

cy.get(selector)：获取匹配指定选择器的 DOM 元素。
cy.contains(selector, content)：查找符合指定选择器的包含指定文本的 DOM 元素。
cy.type(inputType)：模拟用户在指定的表单元素上输入文本。
cy.click()：模拟用户单击指定的 DOM 元素。
cy.select(option)：模拟用户在指定的下拉列表中选择一个选项。
cy.wait(time)：等待指定的时间（以毫秒为单位）。

示例代码

下面是一个示例代码，演示了如何使用 Cypress 来编写测试用例：

// www.javascriptcn.com code example
describe('登录测试', () => {
  it('成功登录', () => {
    cy.visit('http://localhost:3000/login');
    cy.get('input[name="username"]')
      .type('admin');
    cy.get('input[name="password"]')
      .type('password');
    cy.get('button[type="submit"]')
      .click();
    cy.url()
      .should('include', '/dashboard');
  });

  it('用户名错误', () => {
    cy.visit('http://localhost:3000/login');
    cy.get('input[name="username"]')
      .type('invalid');
    cy.get('input[name="password"]')
      .type('password');
    cy.get('button[type="submit"]')
      .click();
    cy.get('.error-message')
      .should('have.text', '用户名错误');
  });

  it('密码错误', () => {
    cy.visit('http://localhost:3000/login');
    cy.get('input[name="username"]')
      .type('admin');
    cy.get('input[name="password"]')
      .type('invalid');
    cy.get('button[type="submit"]')
      .click();
    cy.get('.error-message')
      .should('have.text', '密码错误');
  });
});

IDE 集成

为了提高开发效率，我们可以将 Cypress 集成到常用的 IDE 中。比如，可以使用 Visual Studio Code，安装 cypress-helper 插件，该插件可以提供代码补全、语法检查等功能，也可以自动生成测试框架代码。

结语

通过本文，我们了解了 Cypress 自动化测试的一些实现细节、最佳实践和注意事项。这些经验可以使测试用例编写更加清晰简洁，也可以提高测试效率和质量。希望能够对读者有所启发和帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67973031504e4ea9bde3b216

Cypress 自动化测试实现细节分享