Cypress Selecting Elements

Cypress needs a way to find specific parts of a web page before it can interact with them. This process is called selecting elements. This topic covers the common methods Cypress offers for finding buttons, fields, and text.

The cy.get Command

The cy.get command finds elements using CSS selectors, the same patterns used in styling web pages. A CSS selector can target an ID, a class, or a tag name.

cy.get('#login-button')
cy.get('.error-message')
cy.get('input')

A Simple Way to Picture It

Think of a web page as a large building with many rooms. Each room has a unique door number, similar to an ID. Some rooms share a common label, similar to a class. Selecting an element means giving Cypress the exact door number or label to find the right room.

Selecting by ID

An ID selector targets a single unique element on the page. IDs should never repeat within one page, which makes this selector reliable.

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

Selecting by Class

A class selector can match multiple elements sharing the same class name. This works well for buttons or cards that repeat across a page.

cy.get('.card').should('have.length', 5)

Selecting by Attribute

Cypress can target elements using custom attributes, such as data-testid. Many teams add these attributes specifically for testing purposes, since they stay stable even when styling changes.

cy.get('[data-testid="checkout-button"]')

Why Test Attributes Help

Class names often change when a designer updates the page style. A dedicated test attribute stays untouched during these changes. This stability prevents tests from breaking due to unrelated design updates.

Selector Priority Diagram

Most Stable
   |
   data-testid attribute
   |
   ID selector
   |
   Class selector
   |
Least Stable
   Tag name selector

Finding Elements by Text

The cy.contains command finds elements based on their visible text instead of their structure.

cy.contains('Sign In').click()

This approach works well for buttons and links where the visible label rarely changes.

Combining Selectors

Cypress allows chaining a text search inside a specific section of the page.

cy.get('.navbar').contains('Home').click()

This command first narrows the search to the navigation bar, then finds the word "Home" inside it.

Selecting Child and Parent Elements

Cypress offers commands like find, parent, and children to move between related elements.

cy.get('.form').find('input')
cy.get('.error').parent()

These commands help when a target element does not have a direct, unique selector of its own.

Handling Multiple Matches

A selector matching several elements returns all of them as a group. Use the eq command to target one specific item from that group.

cy.get('.product').eq(2).click()

This example clicks the third product on the page, since counting starts at zero.

Checking Element Existence

Sometimes a test needs to confirm an element exists before interacting with it.

cy.get('.discount-banner').should('exist')

This check prevents errors caused by missing elements during page updates.

Key Points

cy.get finds elements using CSS selectors like ID, class, or attribute.
Data test attributes provide the most stable way to select elements.
cy.contains finds elements based on their visible text.
Commands like find, parent, and children navigate between related elements.
The eq command targets one specific item from multiple matches.

Previous lesson

Back to course

Next lesson