← Back to library
Cypressselectorsintermediatev10+

CSS attribute selectors

Select elements using CSS attribute selectors — exact match, substring, prefix, and presence checks.

1it('selects elements with various attribute patterns', () => {
2  cy.visit('/form');
3
4  // Attribute presence — all required fields
5  cy.get('input[required]').should('have.length.greaterThan', 0);
6
7  // Exact attribute value
8  cy.get('input[type="email"]').type('qa@example.com');
9
10  // Substring match (*=) — any class containing "btn-primary"
11  cy.get('[class*="btn-primary"]').first().click();
12
13  // Prefix match (^=) — data-testid starting with "card-"
14  cy.get('[data-testid^="card-"]').should('have.length', 6);
15
16  // Suffix match ($=) — href ending with ".pdf"
17  cy.get('a[href$=".pdf"]').should('exist');
18});
#attribute selector#CSS#contains#starts-with#required