E2E Testing: Playwright vs Cypress - Which to Choose in 2026

# Install Playwright
npm init playwright@latest

# Or add to existing project
npm install -D @playwright/test
npx playwright install chromium

// tests/example.spec.ts
import { test, expect } from '@playwright/test';

test('user can login', async ({ page }) => {
  await page.goto('https://example.com/login');
  
  // Fill form
  await page.fill('[data-testid="email"]', '[email protected]');
  await page.fill('[data-testid="password"]', 'password123');
  
  // Submit
  await page.click('[data-testid="submit"]');
  
  // Verify redirect
  await expect(page).toHaveURL('/dashboard');
  
  // Verify welcome message
  await expect(page.locator('[data-testid="welcome"]')).toContainText('Welcome');
});

// pages/LoginPage.ts
import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;
  readonly errorMessage: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.locator('[data-testid="email"]');
    this.passwordInput = page.locator('[data-testid="password"]');
    this.submitButton = page.locator('[data-testid="submit"]');
    this.errorMessage = page.locator('[data-testid="error"]');
  }

  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }
}

// Usage in test
import { LoginPage } from '../pages/LoginPage';

test('login flow', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.login('[email protected]', 'password123');
  await expect(page).toHaveURL('/dashboard');
});

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  
  use: {
    baseURL: 'https://example.com',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' },
    },
    {
      name: 'firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'webkit',
      use: { browserName: 'webkit' },
    },
  ],
});

# Install Cypress
npm install cypress --save-dev

# Open Cypress
npx cypress open

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

  it('should login successfully', () => {
    cy.get('[data-testid="email"]').type('[email protected]');
    cy.get('[data-testid="password"]').type('password123');
    cy.get('[data-testid="submit"]').click();
    
    // Verify redirect
    cy.url().should('include', '/dashboard');
    
    // Verify welcome message
    cy.get('[data-testid="welcome"]').should('contain', 'Welcome');
  });

  it('should show error with invalid credentials', () => {
    cy.get('[data-testid="email"]').type('[email protected]');
    cy.get('[data-testid="password"]').type('wrongpassword');
    cy.get('[data-testid="submit"]').click();
    
    cy.get('[data-testid="error"]').should('be.visible');
  });
});

// cypress/support/commands.ts
declare namespace Cypress {
  interface Chainable {
    login(email: string, password: string): Chainable<void>;
    logout(): Chainable<void>;
  }
}

Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login');
  cy.get('[data-testid="email"]').type(email);
  cy.get('[data-testid="password"]').type(password);
  cy.get('[data-testid="submit"]').click();
});

// Usage
it('should work', () => {
  cy.login('[email protected]', 'password123');
});

comparison:
  browser_support:
    playwright: "Chromium, Firefox, WebKit (all major)"
    cypress: "Chromium-based only (Electron)"
    
  parallelization:
    playwright: "Built-in, easy"
    cypress: "Requires plugin, more complex"
    
  auto_wait:
    playwright: "Auto-waits for elements"
    cypress: "Explicit waits needed"
    
  multi_tab:
    playwright: "Native support"
    cypress: "Plugin required"
    
  iframes:
    playwright: "Native support"
    cypress: "Plugin or workaround"
    
  test_isolation:
    playwright: "Great (fresh context)"
    cypress: "Good (clears state)"

<!-- Always use data-testid for tests -->
<button data-testid="submit" class="btn-primary">
  Submit
</button>

// Both frameworks support page objects
// Keeps tests clean and maintainable

# GitHub Actions - Playwright
- name: Run Playwright tests
  run: npx playwright test

# GitHub Actions - Cypress
- name: Run Cypress tests
  uses: cypress-io/github-action@v5