介绍

Cypress 是一款强大的端到端测试工具，提供一组强大的内置命令来与 Web 应用程序交互。但是，每个项目都有独特的需求，默认命令集可能无法完全满足这些需求。这就是自定义命令的用武之地。自定义命令允许您扩展赛普拉斯的功能，使您的测试更具可读性和可维护性。在这篇文章中，我们将探讨如何在 Cypress 中创建和使用自定义命令来增强您的测试自动化框架。

为什么使用自定义命令？

自定义命令有几个好处：

1. 可重用性：封装在多个测试中重复的常见操作。
2. 可维护性：集中复杂操作的逻辑，因此只需在一处进行更改。
3. 可读性：通过抽象实现细节来提高测试的可读性。

设置赛普拉斯

在我们深入创建自定义命令之前，如果您还没有设置 Cypress，让我们先设置一下：

npm install cypress --save-dev

安装完成后，打开Cypress：

npx cypress open

创建自定义命令

Cypress 自定义命令在 cypress/support/commands.js 文件中定义。让我们通过一些示例来了解如何创建和使用自定义命令。

示例1：登录命令
假设您有一个需要经常与之交互的登录表单。您可以创建自定义命令来处理登录过程：

// cypress/support/commands.js
Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login');
  cy.get('input[name=email]').type(email);
  cy.get('input[name=password]').type(password);
  cy.get('button[type=submit]').click();
});

现在，您可以在测试中使用登录命令：

// cypress/integration/login.spec.js
describe('Login Tests', () => {
  it('Should login with valid credentials', () => {
    cy.login('[email protected]', 'password123');
    cy.url().should('include', '/dashboard');
  });
});

示例 2：带断言的自定义命令
您还可以将自定义断言添加到命令中。让我们创建一个命令来检查元素是否可见并包含特定文本：

// cypress/support/commands.js
Cypress.Commands.add('shouldBeVisibleWithText', (selector, text) => {
  cy.get(selector).should('be.visible').and('contain.text', text);
});

测试中的用法：

// cypress/integration/visibility.spec.js
describe('Visibility Tests', () => {
  it('Should display welcome message', () => {
    cy.visit('/home');
    cy.shouldBeVisibleWithText('.welcome-message', 'Welcome to the Dashboard');
  });
});

自定义命令的最佳实践

1. 清楚地命名命令：为自定义命令使用描述性名称以使测试更易于理解。
2. 参数化命令：接受参数使命令灵活且可重用。
3. 链命令： 确保命令返回 Cypress chainables (cy.wrap()) 以启用链接。
4. 文档命令： 添加注释来描述每个自定义命令的目的和用法。

高级技巧

1. TypeScript 支持： 如果您使用 TypeScript，您可以为自定义命令添加类型定义以增强自动完成和类型检查。
2. 错误处理：在自定义命令中实现错误处理，以便在出现问题时提供信息反馈。
3. 可重用函数：对于复杂的逻辑，创建可在自定义命令中使用的辅助函数，以保持 Commands.js 文件整洁和集中。

结论

Cypress 中的自定义命令提供了一种强大的方法来扩展框架的功能，使您的测试更具可重用性、可维护性和可读性。通过封装常见操作并添加自定义断言，您可以简化测试自动化流程并专注于最重要的事情：确保您的应用程序完美运行。

立即开始​​在您的赛普拉斯项目中实施自定义命令，看看它们可以在您的测试工作流程中产生的变化。测试愉快！