Why use data-cy selectors instead of CSS classes?

data-cy attributes are added purely for testing, so they do not change when designers rework styles or class names. This keeps tests stable; the Cypress team recommends them over brittle CSS or text selectors.

What does beforeEach do in a Cypress spec?

beforeEach runs before every it block, so it is the natural place to cy.visit the starting page or reset state. This keeps each test independent rather than relying on the order of previous tests.

How does Cypress wait for elements?

Cypress automatically retries cy.get and assertions until the element appears or the command times out, so you rarely need explicit waits. Avoid cy.wait with fixed milliseconds and assert on visible state instead.

Should each it block be independent?

Yes. Each it should set up its own state in beforeEach and not depend on side effects from earlier tests. Independent tests can be reordered, retried, or run in isolation without surprises.

Where do Cypress spec files live?

By default Cypress 10+ looks for end-to-end specs under the cypress/e2e directory with a .cy.js or .cy.ts extension. Place the generated file there so the runner discovers it.

Cypress E2E Test Stub Builder

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

A real Cypress flow, scaffolded

Cypress drives a real browser, so its tests read like a user’s actions: visit a page, type into fields, click a button, and assert on what shows up. A typical first spec covers logging in, landing on a dashboard, and submitting a form. This builder writes that three-test spec with the commands and selectors filled in so you only adjust details.

How it works

The tool emits a describe('...', () => { ... }) block with a beforeEach(() => cy.visit(loginRoute)) that opens your login page before each test. The first it types into the email and password fields with cy.get(selector).type(...), clicks submit, and asserts the URL changed with cy.url().should('include', ...). The second it checks navigation by clicking a link and asserting the new path. The third it fills and submits a form, then asserts a success message is visible. Selectors default to [data-cy="..."] form because those are the most resilient against UI churn.

Tips and example

Prefer [data-cy="submit"] selectors over text or class selectors so restyles do not break tests.
Let Cypress retry — assert on should('be.visible') rather than inserting fixed cy.wait delays.
Set baseUrl in cypress.config.js so you can pass relative paths to cy.visit.

describe("Login flow", () => {
  beforeEach(() => {
    cy.visit("/login");
  });

  it("logs in with valid credentials", () => {
    cy.get('[data-cy="email"]').type("[email protected]");
    cy.get('[data-cy="password"]').type("Passw0rd!");
    cy.get('[data-cy="submit"]').click();
    cy.url().should("include", "/dashboard");
  });
});