E2E Testing with Claude Code: Playwright/Cypress Practical Guide

Streamlining E2E Testing With Claude Code

End-to-end (E2E) testing is an important technique for automatically verifying user flows. With Claude Code, you can quickly generate Playwright or Cypress test code and integrate it into CI all in one go.

Writing Tests With Playwright

Testing the Login Flow

> Write an E2E test for the login -> dashboard flow with Playwright.
> Use the Page Object pattern.

// tests/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.getByLabel('Email');
    this.passwordInput = page.getByLabel('Password');
    this.submitButton = page.getByRole('button', { name: 'Log in' });
    this.errorMessage = page.getByRole('alert');
  }

  async goto() {
    await this.page.goto('/login');
  }

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

// tests/e2e/login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

test.describe('Login', () => {
  test('logs in with correct credentials', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('user@example.com', 'password123');

    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByText('Dashboard')).toBeVisible();
  });

  test('shows an error with incorrect credentials', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('user@example.com', 'wrongpassword');

    await expect(loginPage.errorMessage).toBeVisible();
    await expect(loginPage.errorMessage).toContainText('Authentication failed');
  });
});

Writing Tests With Cypress

E-Commerce Purchase Flow

> Create the flow from product selection to add-to-cart to purchase
> completion with Cypress. Also define custom commands.

// cypress/support/commands.ts
Cypress.Commands.add('login', (email: string, password: string) => {
  cy.session([email, password], () => {
    cy.visit('/login');
    cy.get('[data-cy="email"]').type(email);
    cy.get('[data-cy="password"]').type(password);
    cy.get('[data-cy="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

// cypress/e2e/purchase.cy.ts
describe('Purchase flow', () => {
  beforeEach(() => {
    cy.login('buyer@example.com', 'password123');
  });

  it('can add a product to cart and complete the purchase', () => {
    cy.visit('/products');
    cy.get('[data-cy="product-card"]').first().click();
    cy.get('[data-cy="add-to-cart"]').click();
    cy.get('[data-cy="cart-badge"]').should('contain', '1');

    cy.visit('/cart');
    cy.get('[data-cy="checkout-button"]').click();

    cy.get('[data-cy="confirm-order"]').click();
    cy.get('[data-cy="order-complete"]').should('be.visible');
    cy.get('[data-cy="order-number"]').should('exist');
  });
});

Playwright vs. Cypress

Aspect	Playwright	Cypress
Multi-browser	Chromium / Firefox / WebKit	Chrome / Firefox / Edge
Parallel execution	Native support	Requires Dashboard
Multi-tab	Supported	Not supported
API testing	Supported	Supported
Learning curve	Slightly steeper	Gentle

Visual Regression Testing

Playwright’s screenshot comparison features let you catch unintended UI changes.

test('make sure the header did not change visually', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('header')).toHaveScreenshot('header.png');
});

Summary

With Claude Code, you can efficiently write E2E tests in Playwright or Cypress and build a high-quality test suite. Also see the API test automation guide and the testing strategies guide.

For details, see the official Playwright documentation and the official Cypress documentation.