Stop 07 · Web Automation TestingTopics · 7/10

Cypress Fundamentals

In short

Cypress runs your test inside the browser, right next to the app. You see every command in a live side panel and can time-travel through each step.

A JavaScript-native testing framework popular for frontend-heavy teams — runs directly in the browser (unlike Selenium/Playwright's external driver model), offering a distinct developer experience and debugging workflow.

The purple blob in a coach's cap demonstrates a batting stroke right next to the stumps.

Think of it like this

The coach on the pitch

One coach shouts instructions from the stands. Another stands right next to the batter, adjusting the grip in real time. Selenium and Playwright drive the browser from outside. Cypress is the coach on the pitch, running inside the browser with your app.

Watch it happen

Cypress commands and retries

Spec file

App in browser

Command log

cy.visit('/')

1/6Cypress loads your app inside the browser it controls.

The big ideas

What you need to know

JavaScript only

Tests are written in JavaScript or TypeScript. Great for front-end teams, not an option for Java shops.

Built-in retries

cy.get and should retry automatically, which handles most loading delays.

Time travel

The runner keeps snapshots of every step, so debugging feels like rewinding a video.

Network control

cy.intercept can watch or fake API calls, so you can test error screens easily.

See it in code

Walk through the code

1describe("Login", () => {2  it("logs in a standard user", () => {3    cy.visit("https://www.saucedemo.com/");4    cy.get("#user-name").type("standard_user");5    cy.get("#password").type("secret_sauce");6    cy.get("#login-button").click();7 8    cy.url().should("include", "/inventory");9    cy.get(".title").should("have.text", "Products");10  });11});

1/3describe groups tests, it defines one test. Same style as Mocha and Jest.

Save as cypress/e2e/login.cy.js. Install with npm install cypress --save-dev and open with npx cypress open.

Save yourself the pain

Common mistakes

Oops

Saving cy.get() results in normal variables like const btn = cy.get(...).

Do this instead

Cypress commands are queued, not returned. Chain off them or use .then() and aliases.

Oops

Expecting to test two browser tabs or two websites in one test easily.

Do this instead

Cypress works best inside one origin. Know this limit before choosing it for a project.

Your mission

Open the Cypress runner

~30 min

Quick check

What makes Cypress architecturally different from Selenium?

Go deeper

1Set up Cypress and write a simple test for a sample web application.
2Learn how Cypress's in-browser execution model differs architecturally from Selenium/Playwright.
3Understand Cypress historically had single-browser-tab and cross-origin limitations, evolving over time.