How can I check an element for multiple CSS classes in Cypress?

In frontend automated testing, Cypress, a popular JavaScript testing framework, is widely adopted for its concise API and real-time reload capabilities. Verifying the CSS classes of an element is a fundamental operation for validating the user interface state. For example, when testing the active state of a button, it is essential to verify that the element simultaneously has multiple classes such as active and disabled. Inaccurate class checks can result in test cases missing critical states, thereby impacting test coverage and reliability. This article will delve into how to efficiently and accurately verify multiple CSS classes on an element in Cypress, ensuring the robustness of test cases.

Main Content

1. Basic Principles: Multi-Class Support of have.class Assertion

Cypress provides the should('have.class', className) assertion command to verify whether an element contains specified CSS classes. The key point is: when multiple class names (separated by spaces) are passed, Cypress checks whether the element contains all specified classes simultaneously. This avoids the complexity of manually chaining assertions, improving the conciseness of test code.

For example, the following code verifies whether an element simultaneously has active and disabled classes:

javascript
// Verify element contains multiple CSS classes
 cy.get('#my-button')
   .should('have.class', 'active disabled')
   .then(($el) => {
     console.log('Element class names:', $el.attr('class'));
   });

Technical Details: Internally, Cypress's have.class implementation is based on jQuery's hasClass, so class name matching is strict (case-sensitive). If an element contains only partial classes (e.g., only active but missing disabled), the assertion will fail. This ensures the precision of tests, avoiding misjudgments.

2. Alternative Methods: Chained Calls and Dynamic Class Handling

Although have.class supports multiple classes, chained calls may be more flexible in certain scenarios. For example, when verifying class states step by step:

javascript
// Chained calls to verify multiple classes
 cy.get('.my-element')
   .should('have.class', 'active')
   .and('have.class', 'disabled');

Advantages and Limitations: Chained calls are logically clearer, especially for complex tests. However, note that it performs two DOM queries, which may affect performance. In contrast, a single have.class call is more efficient.

For dynamic classes (e.g., class names based on state changes), it is recommended to combine with invoke or variables:

javascript
// Using variables to verify dynamic classes
 const expectedClasses = 'active disabled';
 cy.get('#dynamic-element')
   .should('have.class', expectedClasses);

Best Practices: Avoid hardcoding class names in tests. Use descriptive variables (e.g., const ACTIVE_STATE = 'active disabled') to improve maintainability, especially when class names appear repeatedly in code.

3. Code Examples and Common Errors

Example 1: Verifying Button Active StateAssume a button should have active and disabled classes after clicking:

javascript
// Test scenario: Verify button active state after click
 it('Verify button active state', () => {
   cy.get('#submit-btn').click();
   cy.get('#submit-btn')
     .should('have.class', 'active disabled');
 });

Example 2: Handling Class Name ConflictsIf an element may have additional classes (e.g., extra-class), ensure assertions do not misjudge:

javascript
// Verify core classes while ignoring extra classes
 cy.get('.my-element')
   .should('have.class', 'active disabled')
   .and('not.have.class', 'extra-class');

Common Errors:

• Case Sensitivity Issue: Cypress is case-sensitive, so Active and active are treated as different classes. Ensure class names match HTML exactly.
• Space Separation Issue: Class names must be separated by spaces, not commas or newlines. For example, 'active disabled' is correct, while 'active,disabled' is invalid.
• Element Selection Error: If the selector does not match the target element, the assertion fails. It is recommended to use get to ensure the element exists:

javascript
cy.get('.my-element').should('exist').and('have.class', 'active disabled');

4. Best Practices and Performance Optimization

• Performance Consideration: have.class is a lightweight assertion, typically faster than contains or text checks. Avoid calling it in loops; instead, use each to iterate over elements:

javascript
cy.get('.item-list').each(($el) => {
  cy.wrap($el).should('have.class', 'active disabled');
});

• Test Maintainability: Define class names as constants for easier updates:

javascript
const ACTIVE_CLASSES = 'active disabled';
cy.get('#element').should('have.class', ACTIVE_CLASSES);

• Error Handling: Combine with try/catch to avoid test interruption:

javascript
try {
  cy.get('#element').should('have.class', 'active disabled');
} catch (err) {
  console.error('Class state verification failed:', err);
}

• Real-World Application: In test frameworks, such checks are commonly used for state validation. For example, verifying a dropdown menu has open and active classes when expanded:

javascript
cy.get('.dropdown').click();
cy.get('.dropdown-menu').should('have.class', 'open active');

Conclusion

Verifying multiple CSS classes on an element in Cypress is an indispensable skill in frontend testing. Using the have.class assertion, developers can efficiently and accurately verify class states, ensuring UI logic correctness. This article details the basic principles, code examples, and best practices, emphasizing the importance of avoiding common errors. It is recommended to prioritize single have.class calls for performance optimization, while combining descriptive naming and dynamic handling to improve code quality. For complex scenarios, chained calls and variable management provide additional flexibility. Finally, continuously refer to the Cypress official documentation to keep testing practices up-to-date.

Key Tip: Always cover edge cases in test cases, such as missing class names or dynamic changes, to ensure comprehensive testing.

​