🖱️ Basic Commands & Selector Strategy

Basic Commands & Selector Strategy: Every command in Cypress starts with cy and returns a Promise-like but "chainable" object.

Every command in Cypress starts with cy and returns a Promise-like but "chainable" object. cy.visit() navigates to a page, cy.get() finds an element by CSS selector, and cy.contains() searches by visible text. These commands are WRITTEN as if synchronous but are asynchronous and retry-able under the hood — you never write await/async, Cypress manages its own queue.

Micro Lab: Cypress — cy.get() selection

Replace the TODO line with the critical line from the expected solution. This is not a real runtime; the goal is to reinforce writing the correct structure in a controlled way.

Step by Step: Cypress — cy.get() selection

Check if data-cy attribute exists — if yes, use cy.get("[data-cy=btn]")

If no data-cy, write cy.get("#id") or cy.get(".class")

If text content matters, use cy.contains("Login") or chain .contains()

If nested structure needed, find child element with .find("button")

Assert: .should("be.visible"), .should("have.text", "...")

What is the Cypress element selection and chaining order?

You must write explicit waits, otherwise risk a StaleElementReferenceException.

Cypress (JavaScript)

cy.get()+click() automatically wait until the element is in the DOM and clickable.

In Selenium, findElement() is an "instant" query — if the element isn't in the DOM right now, it throws immediately. Cypress's cy.get() is "patient": it keeps retrying in the background until it finds the element (default defaultCommandTimeout: 4000ms).