创建可动态添加 Cypress 命令的自定义命令

本文旨在指导开发者如何创建一个 Cypress 自定义命令，该命令可以根据用户传入的参数动态地添加 Cypress 操作，并将其链接在一起。文章将提供示例代码，展示如何处理断言，并讨论动态添加命令的复杂性。通过学习本文，你将能够更好地理解 Cypress 自定义命令的创建和使用，从而提高你的测试效率。

创建自定义 Cypress 命令

Cypress 允许我们创建自定义命令，以封装常用的操作序列，提高测试代码的可维护性和可读性。 创建一个可以根据用户输入动态添加 Cypress 操作的自定义命令，需要仔细处理命令的执行顺序和参数传递。

以下示例展示了如何创建一个名为 selectButton 的自定义命令，该命令接受按钮文本和一个或多个操作类型作为参数。

Cypress.Commands.add(
  'selectButton',
  (text: string, ...actionTypes: string[]) => {
    cy.get('button').contains(text).then($el => {
      actionTypes.forEach(actionType => {
        switch (actionType) {
          case 'click':
            cy.wrap($el).click();
            break;
          case 'visible':
            cy.wrap($el).should('be.visible');
            break;
          case 'disabled':
            cy.wrap($el).should('be.disabled');
            break;
          case 'blur':
            cy.wrap($el).blur();
            break;
          default:
            // 处理未知的 actionType
            console.warn(`Unknown action type: ${actionType}`);
        }
      });
    });
  }
);

代码解释：

1. Cypress.Commands.add('selectButton', ...): 这行代码定义了一个名为 selectButton 的自定义命令。
2. (text: string, ...actionTypes: string[]): 该命令接受一个字符串 text（按钮文本）和一个可变参数 actionTypes（操作类型数组）。
3. cy.get('button').contains(text).then($el => { ... }): 首先，使用 cy.get('button').contains(text) 选择包含指定文本的按钮元素。 .then($el => { ... }) 确保在元素被找到后执行后续操作。
4. actionTypes.forEach(actionType => { ... }): 遍历 actionTypes 数组，对每个操作类型执行相应的 Cypress 命令。
5. switch (actionType) { ... }: 使用 switch 语句根据 actionType 的值执行不同的操作。
6. cy.wrap($el).click();，cy.wrap($el).should('be.visible'); 等： 使用 cy.wrap($el) 将 DOM 元素包装成 Cypress 对象，然后调用相应的 Cypress 命令，例如 click()、should('be.visible') 等。
7. default: console.warn(...): 处理未知的操作类型，并输出警告信息。

用法示例：

cy.selectButton('Send', 'visible', 'disabled', 'click');

此代码将选择文本为 "Send" 的按钮，然后依次执行以下操作：

Red Panda AI

AI文本生成图像

下载

• 验证按钮是否可见 (should('be.visible'))
• 验证按钮是否禁用 (should('be.disabled'))
• 点击按钮 (click())

使用 Expect 进行断言

在 Cypress 中，可以使用 expect 进行更灵活的断言。expect 允许我们访问底层断言库，并使用其提供的各种断言方法。

Cypress.Commands.add(
  'selectButton',
  (text: string, ...actionTypes: string[]) => {
    cy.get('button').contains(text).then($el => {
      const expectWrapper = expect($el);

      actionTypes.forEach(actionType => {
        switch (actionType) {
          case 'visible':
            expectWrapper.to.be.visible;
            break;
          case 'disabled':
            expectWrapper.to.be.disabled;
            break;
          default:
            console.warn(`Unknown action type: ${actionType}`);
        }
      });
    });
  }
);

代码解释：

1. const expectWrapper = expect($el);: 使用 expect($el) 创建一个 expect 包装器，该包装器允许我们对选定的元素执行断言。
2. expectWrapper.to.be.visible;，expectWrapper.to.be.disabled;: 使用 expect 包装器提供的断言方法，例如 to.be.visible 和 to.be.disabled，来验证元素的状态。

动态添加命令的挑战

虽然可以动态地添加 Cypress 操作和断言，但动态添加 Cypress 命令本身是具有挑战性的。Cypress 在执行测试之前会设置命令队列，因此动态添加命令可能无法按预期工作。

总结：

创建自定义 Cypress 命令可以极大地提高测试代码的效率和可维护性。通过结合使用 Cypress 命令和 expect 断言，可以创建灵活且强大的自定义命令，以满足各种测试需求。虽然动态添加命令具有一定的挑战性，但通过合理的设计和实现，可以有效地解决这些问题。