Cypress: Finding Web Elements

Cypress provides simple and powerful ways to locate and interact with web elements. This reference covers the three core methods for finding elements, how to use chaining, and recommended practices — all demonstrated using the login page at radeksto.com/test/login.

Primary Locator Methods

cy.get(selector)

Selects one or more elements globally using standard CSS selectors.

cy.find(selector)

Used after a parent element to find child elements within that scope. Improves specificity and performance.

cy.contains(text)

Finds elements by their visible text — ideal for buttons and labels.

Advanced: Chaining & DOM Traversal

Cypress supports powerful method chaining to navigate through the DOM tree.

This:

• Starts from the username input

• Goes up to the #comp-mcjcynyb container

• Finds the login button

• Confirms it contains the text “Login”

• Clicks it

  
  

Example Spec: Finding Elements (Working Test)

Best Practices

• Use data-cy or data-test attributes when available for stable selectors

• Prefer meaningful IDs or names for targeting over styling classes

• Avoid brittle, overly specific selectors (like .form > div > input)

• Use .find() instead of long chained CSS when working within a component

• Use .contains() for buttons and links with consistent, visible text