如何在 Cypress 中检查一个元素的多个 CSS 类？

在Cypress中检查一个元素的多个CSS类是一种常见的测试需求，可以通过几种方法来实现。下面我会详细解释我通常如何操作，以及提供具体的代码示例。

方法1：使用.should()和have.class

这是最直接的方法。如果您想要检查元素是否具有特定的CSS类，可以使用Cypress的.should()命令结合have.class断言。

javascript
// 假设我们要检查的元素应该同时具有`active`和`enabled`两个类
cy.get('.my-element') // 获取目标元素
  .should('have.class', 'active')
  .should('have.class', 'enabled');

这种方法很直观，也容易理解。如果元素缺少任何一个类，测试将不会通过。

方法2：使用.invoke()和JavaScript的classList属性

如果你想一次性检查多个类，或者处理的类名较多，你也可以使用.invoke()命令来获取元素的类列表，然后使用JavaScript的include函数来检查这些类是否都存在。

javascript
cy.get('.my-element') // 获取目标元素
  .invoke('attr', 'class') // 获取class属性
  .should('include', 'active') // 检查是否包含active类
  .should('include', 'enabled'); // 检查是否包含enabled类

方法3：自定义断言

如果你发现自己经常需要检查多个类，或者想要简化你的测试代码，你可以编写一个自定义的断言来完成这项工作。

javascript
// 添加一个新的断言来检查多个类
Cypress.Commands.add('haveClasses', (selector, classes) => {
  const classList = classes.split(' ');
  cy.get(selector).then($el => {
    const actualClasses = $el[0].className.split(' ');
    expect(actualClasses).to.include.members(classList);
  });
});

// 使用这个新的命令
cy.haveClasses('.my-element', 'active enabled');

这种方式让代码更加模块化和可重用，尤其是在有很多此类检查的大型项目中。

示例

假设我们正在测试一个网页，用户点击一个按钮后，一个消息框 (div) 会获取到active 和 enabled两个类。我们可以使用以上任一方法来确保当按钮被点击后，这个div确实获取了正确的类：

javascript
// 模拟用户点击
cy.get('.toggle-button').click();

// 检查div是否有正确的类
cy.get('.message-box')
  .should('have.class', 'active')
  .should('have.class', 'enabled');

这样，我们就能确保我们的应用程序在用户交互后能够表现出预期的行为。使用Cypress进行这样的检查有助于提高我们应用的可靠性和用户体验。