← Cheatsheets

Tags: cypress, playwright, e2e, testing, locators, assertions, fixtures, network-stubbing, visual-regression Last updated: 2026-06-26

Cypress / Playwright Cheatsheet

Quick Reference

ConceptCypressPlaywright
Locatorcy.get("selector")page.locator("selector")
Text locatorcy.contains("text")page.getByText("text")
Role locatorcy.findByRole("btn")page.getByRole("btn")
Clickcy.get("b").click()page.click("b")
Type.type("text")page.fill("i", "text")
Networkcy.intercept()page.route()
VisualmatchImageSnapshot()toHaveScreenshot()

Locators

Cypress

cy.get('[data-testid="submit"]')      // Test ID (preferred)
cy.contains("Sign In")                // By text
cy.findByRole("button", { name: "Save" })

Playwright

page.locator('[data-testid="submit"]')
page.getByText("Sign In")
page.getByRole("button", { name: "Save" })
page.getByLabel("Email")
page.getByPlaceholder("Enter your email")
page.getByTestId("submit")

Locator Strategy (Prefer in Order)

  1. getByRole (semantic, accessible)
  2. getByLabel / getByPlaceholder (form fields)
  3. getByText (visible text)
  4. getByTestId (resilient)
  5. CSS selectors (last resort)

Assertions

Cypress

cy.get(".modal").should("be.visible")
cy.get("input").should("have.value", "Max")
cy.url().should("include", "/dashboard")

Playwright

await expect(page.locator(".m")).toBeVisible()
await expect(page.locator("i")).toHaveValue("Max")
await expect(page).toHaveURL(/\/dashboard/)

// Soft assertions (continues after failure)
await expect.soft(loc).toBeVisible()

Network Stubbing

Cypress

cy.intercept("GET", "/api/users", {
  statusCode: 200,
  body: [{ id: 1, name: "Max" }],
}).as("getUsers");

cy.intercept("POST", "/api/login").as("login");
cy.wait("@login").its("response.statusCode").should("eq", 200);

Playwright

await page.route("**/api/users", (route) => {
  route.fulfill({
    status: 200,
    body: JSON.stringify([{ id: 1, name: "Max" }]),
  });
});

const [resp] = await Promise.all([
  page.waitForResponse("**/api/login"),
  page.click("button"),
]);

Visual Regression

// Playwright (built-in)
await expect(page).toHaveScreenshot();
await expect(page.locator(".card")).toHaveScreenshot();
await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });
// Update: npx playwright test --update-snapshots

// Cypress (plugin)
cy.get(".card").matchImageSnapshot("card");

Running Tests

# Cypress
npx cypress open            # Interactive
npx cypress run              # Headless

# Playwright
npx playwright test          # All tests
npx playwright test --ui     # Interactive UI mode
npx playwright test --debug  # Step inspector
npx playwright show-report   # Open HTML report

Tips