Select by attribute

See jQuery selectors guide (opens new window)

Select by the attribute presence

Watch the explanation for this example in the video Select DOM Elements With An Attribute Present Or Absent (opens new window).

<ul>
  <li data-priority>One</li>
  <li data-priority>Two</li>
  <li>Three</li>
  <li data-priority="last">Four</li>
</ul>

• One
• Two
• Three
• Four

[data-priority] {
  font-weight: bolder;
}

// find all LI elements that have
// the "data-priority" attribute
cy.get('li[data-priority]').should('have.length', 3)

Tip: to select the elements without an attribute, use cy.not (opens new window) command

// find all LI elements that do not have
// the "data-priority" attribute
cy.get('li')
  .not('[data-priority]')
  .should('have.length', 1)
  .and('have.text', 'Three')

Select by the attribute value

<ul>
  <li data-priority="low">One</li>
  <li data-priority="medium">Two</li>
  <li>Three</li>
  <li data-priority="high">Four</li>
</ul>

• One
• Two
• Three
• Four

[data-priority='medium'] {
  font-weight: bolder;
}

// find all LI elements that have
// the "data-priority" attribute with value "medium"
const priority = 'medium'
// because the value comes from the variable priority
// we use JavaScript template string.
// Tip: to be safe, put the value in double quotes
cy.get(`li[data-priority="${priority}"]`)
  .should('have.length', 1)
  .first()
  .should('have.text', 'Two')