How to get HTML attribute value in Cypress

Retrieving HTML attribute values in Cypress is a common and useful operation that helps verify element attributes during automated testing. Here are the steps to retrieve and check HTML attributes in Cypress:

1. Use cy.get() to locate elements

First, use cy.get() to locate the HTML element you want to inspect for attributes. For example, suppose we have a button with the following HTML:

html
<button id="submit-button" type="submit" disabled>Submit</button>

We can retrieve this button using cy.get():

javascript
cy.get('#submit-button')

2. Use .should() to verify attribute values

Once you have retrieved the element, apply the .should() method to confirm its attributes. For instance, to check if the button is disabled:

javascript
cy.get('#submit-button').should('have.attr', 'disabled')

This verifies that the disabled attribute is present on the button.

3. Use .then() to retrieve attribute values for further processing

If you need to extract attribute values and perform additional logic, use the .then() method. For example, to retrieve the type attribute value and handle it accordingly:

javascript
cy.get('#submit-button').then(button => {
  const type = button.attr('type');
  expect(type).to.eq('submit'); // Here we verify the type value using an assertion
  // Add more logic based on `type` here
});

Practical Application Example

Suppose we are testing a form page and need to verify the class attribute of the submit button under varying conditions. The button may change its class name based on user input, indicating different states (e.g., active or inactive).

javascript
// Simulate user input
 cy.get('#username').type('Alice');
 cy.get('#password').type('password123');

// Check if the button's class includes 'active'
 cy.get('#submit-button').should('have.class', 'active');

// Verify the button's state when no input or invalid input is provided
 cy.get('#username').clear();
 cy.get('#submit-button').should('not.have.class', 'active');

This example demonstrates how to use Cypress to check element attributes under specific conditions and perform logical evaluations based on these attributes, which is highly valuable in real-world testing scenarios.