Cypress vs Playwright: Which E2E Testing Tool in 2025?

Cypress dominated end-to-end testing for years. Playwright, released by Microsoft in 2020, caught up fast — and in many benchmarks now surpasses it. The key difference: Cypress runs inside the browser; Playwright controls browsers from outside via the Chrome DevTools Protocol and WebDriver BiDi. This guide tells you exactly what that means in practice and which to pick.

At a glance

How Playwright works

Playwright runs as a Node.js process outside the browser. It communicates with Chromium, Firefox, and WebKit via the Chrome DevTools Protocol (CDP) and the newer WebDriver BiDi standard. Each test gets its own BrowserContext — an isolated browser session with separate cookies, localStorage, and cache — without the cost of launching a full browser.

// playwright.config.ts
import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  testDir: "./tests",
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 4 : undefined,
  reporter: "html",
  use: {
    baseURL: "http://localhost:3000",
    trace: "on-first-retry",
  },
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
    { name: "firefox",  use: { ...devices["Desktop Firefox"] } },
    { name: "webkit",   use: { ...devices["Desktop Safari"] } },
  ],
});

How Cypress works

Cypress runs inside the browser in an iframe alongside your application. This gives it direct DOM access and synchronous JavaScript execution, but limits it to one browser tab, one origin (by default), and makes network stubbing work via a Node.js proxy rather than native browser interception.

// cypress.config.js
const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    setupNodeEvents(on, config) {},
    specPattern: "cypress/e2e/**/*.cy.{js,ts}",
    video: true,
    screenshotOnRunFailure: true,
  },
});

Writing the same test: side by side

Scenario: Log in, navigate to dashboard, assert a welcome message.

Playwright

// tests/login.spec.ts
import { test, expect } from "@playwright/test";

test.beforeEach(async ({ page }) => {
  await page.goto("/login");
});

test("user can log in and sees dashboard", async ({ page }) => {
  await page.getByLabel("Email").fill("user@example.com");
  await page.getByLabel("Password").fill("secret123");
  await page.getByRole("button", { name: "Sign in" }).click();

  await expect(page).toHaveURL("/dashboard");
  await expect(page.getByRole("heading", { name: /welcome/i })).toBeVisible();
});

test("shows error for wrong password", async ({ page }) => {
  await page.getByLabel("Email").fill("user@example.com");
  await page.getByLabel("Password").fill("wrong");
  await page.getByRole("button", { name: "Sign in" }).click();

  await expect(page.getByText("Invalid credentials")).toBeVisible();
});

Cypress

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

  it("user can log in and sees dashboard", () => {
    cy.get('input[name="email"]').type("user@example.com");
    cy.get('input[name="password"]').type("secret123");
    cy.get('button[type="submit"]').click();

    cy.url().should("include", "/dashboard");
    cy.get("h1").should("contain.text", "Welcome");
  });

  it("shows error for wrong password", () => {
    cy.get('input[name="email"]').type("user@example.com");
    cy.get('input[name="password"]').type("wrong");
    cy.get('button[type="submit"]').click();

    cy.contains("Invalid credentials").should("be.visible");
  });
});

Key syntax differences:

• Playwright uses await (real async); Cypress uses a custom command queue
• Playwright prefers semantic locators (getByLabel, getByRole); Cypress uses CSS selectors by convention
• Playwright assertions use expect(locator).toBeVisible(); Cypress chains .should()

Performance comparison

API comparison

Browser support

WebKit support is the clearest Playwright advantage — you can catch Safari-specific bugs without owning a Mac.

Where Playwright wins

Where Cypress wins

Project setup comparison

Playwright setup

npm init playwright@latest
# Installs browsers, creates playwright.config.ts, example tests
npx playwright test              # run all tests
npx playwright test --ui         # open interactive UI mode
npx playwright codegen           # record a test
npx playwright show-report       # open HTML report

Cypress setup

npm install cypress --save-dev
npx cypress open                 # interactive test runner (browser)
npx cypress run                  # headless run
npx cypress run --spec "cypress/e2e/login.cy.ts"

CI/CD integration

Playwright (GitHub Actions)

# .github/workflows/playwright.yml
name: Playwright Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: "20" }
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/

Cypress (GitHub Actions)

# .github/workflows/cypress.yml
name: Cypress Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: cypress-io/github-action@v6
        with:
          build: npm run build
          start: npm start
          wait-on: "http://localhost:3000"
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: cypress-screenshots
          path: cypress/screenshots

Network mocking comparison

Both tools let you intercept HTTP requests, but the implementation differs.

Playwright

test("shows cached products", async ({ page }) => {
  // Intercept at browser level — no proxy needed
  await page.route("**/api/products", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify([{ id: 1, name: "Laptop", price: 999 }]),
    });
  });

  await page.goto("/products");
  await expect(page.getByText("Laptop")).toBeVisible();
});

Cypress

it("shows cached products", () => {
  cy.intercept("GET", "/api/products", {
    statusCode: 200,
    body: [{ id: 1, name: "Laptop", price: 999 }],
  }).as("getProducts");

  cy.visit("/products");
  cy.wait("@getProducts");
  cy.contains("Laptop").should("be.visible");
});

Debugging experience

Full comparison

Migration: Cypress → Playwright

Decision guide

Do you need Safari/WebKit testing?
├── Yes → Playwright

Do you need multi-tab or multi-origin tests?
├── Yes → Playwright

Is your team using Python, Java, or C#?
├── Yes → Playwright

Do you want free parallelisation?
├── Yes → Playwright

Is component testing a priority?
├── Yes → Cypress (more mature)

Does your team prefer a visual, in-browser runner for daily development?
├── Yes → Cypress

Are you migrating from Selenium with a JS/TS team?
├── Yes → Cypress (easier conceptual jump)

Are you starting fresh with a modern JS/TS project?
├── → Playwright (default recommendation 2025)

Common mistakes

Cypress vs Playwright vs Selenium vs WebdriverIO

FAQ

Is Playwright replacing Cypress? Playwright has overtaken Cypress in npm downloads and GitHub stars in 2025. For new projects — especially cross-browser or multilingual teams — Playwright is now the default recommendation. Cypress remains the better choice for component testing and teams that value its interactive runner.

Can I use both Playwright and Cypress in the same project? Yes, though it's unusual. Some teams run Playwright for E2E cross-browser tests and Cypress for component tests (React/Vue). The maintenance overhead doubles, so only do this if the tradeoff is worth it.

Which is faster — Cypress or Playwright? Playwright is faster in CI, mainly because: (1) free parallelisation across workers, (2) lighter per-test BrowserContext vs full page reload, (3) headless Chromium default. For a 100-test suite, Playwright typically runs 30–50% faster with 4 workers vs free-tier Cypress.

Does Playwright work with React Testing Library? Not directly — RTL is a unit/component testing tool. Playwright has @playwright/experimental-ct-react for component tests, but for E2E, you write tests against the full running app. Use semantic locators (getByRole, getByLabel) which share the same accessibility-first philosophy as RTL.

Which should I learn first? If you're learning E2E testing for the first time: Playwright. Its modern async/await API matches how JavaScript works, the docs are excellent, and it's where the industry is heading. Cypress's queued command model is a non-standard mental model you'll have to unlearn later.

Does Playwright support mobile testing? Playwright supports mobile emulation (WebKit + Chromium with device profiles) for web tests. It does not test native iOS/Android apps. For real device mobile web testing, use cloud providers like BrowserStack or Sauce Labs with Playwright's remote connection support.