Cypress examples (v13.16.0)

Attributes are equal

Let's confirm the fact that the two elements have equal "data-name" attributes. We don't know the expected value of the attribute, unfortunately, just that both elements have the same non-empty string value. For the explanation, watch the video Check If Two Elements Have The Same Attribute Valueopen in new window.

<div id="el1" data-name="Venus">The first planet</div>
<div id="el2" data-name="Venus">Another planet</div>

cy.get('#el1')
  .invoke('attr', 'data-name')
  // use assertions to ensure the data attribute is set
  .should('be.a', 'string')
  .and('be.not.empty')
  .then((s) => {
    // now we know the attribute value
    // and can directly confirm the second element
    // has the same attribute
    cy.get('#el2').should('have.attr', 'data-name', s)
  })

Tip: I recommend striving knowing exactly the values to expect in the test, see the video Good Cypress Test Syntaxopen in new window. A better test would be:

cy.get('#el1').should('have.attr', 'data-name', 'Venus')
cy.get('#el2').should('have.attr', 'data-name', 'Venus')

See also