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

In Cypress, verifying whether an element has multiple CSS classes is a common testing requirement that can be achieved in multiple ways. Below are several methods and examples demonstrating how to implement this in Cypress tests:

Method 1: Directly using .should('have.class', 'className')

This approach is the most straightforward. You can check if an element has multiple classes by chaining calls to have.class. For instance, to verify that an element possesses both active and highlight classes, you can write the test code as follows:

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

This line first retrieves the element with the class name my-element, then confirms it has both active and highlight classes.

Method 2: Using Regular Expressions

When checking numerous classes, repeatedly calling .should('have.class', ...) may result in verbose code. In such cases, regular expressions can simplify the process. For example:

javascript
cy.get('.my-element').should('have.attr', 'class').and('match', /^(?=.*\bactive\b)(?=.*\bhighlight\b).*$/);

Here, have.attr retrieves the class attribute of the element, and match validates whether this attribute contains both active and highlight using a regular expression. This method makes the code concise when handling many class names.

Method 3: Using Arrays and Iterating Over Each Class

For improved readability, you can create an array containing all required class names and iterate through it to check each class:

javascript
const classes = ['active', 'highlight', 'visible'];

classes.forEach(cls => {
  cy.get('.my-element').should('have.class', cls);
});

The advantage is that when adding or removing class names, you only need to update the array, avoiding modifications across multiple test sections.

Example

Suppose a webpage contains a button that adds active and highlight classes upon clicking. A Cypress test might appear as follows:

javascript
// Simulate user click
 cy.get('.my-button').click();

// Verify the button has the correct classes
 cy.get('.my-button').should('have.class', 'active').and('have.class', 'highlight');

With this test, you can ensure the button acquires the correct classes after interaction, thereby confirming the button's functionality works as expected.

In summary, checking for multiple CSS classes in Cypress is highly flexible, allowing you to select the most suitable method based on specific testing needs and personal coding preferences.