← 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