Playwright E2E Testing

Prerequisites

npx playwright --version

npm init playwright@latest
# or add to existing project:
npm install -D @playwright/test && npx playwright install

Workflow

1. Analyze

2. Generate Test File

import { test, expect } from '@playwright/test';

test.describe('Feature Name', () => {
  test.beforeEach(async ({ page }) => {
    // Setup: navigate, authenticate, seed data
  });

  test('should do expected behavior', async ({ page }) => {
    // Arrange
    // Act
    // Assert
  });
});

3. Run Tests

npx playwright test <file>           # Run specific test file
npx playwright test --headed          # With visible browser
npx playwright test --ui              # Playwright UI mode
npx playwright test --trace on        # Capture trace for debugging

4. Debug Failures

• Read error output carefully
• Use

  --trace on

  and open trace viewer:

  npx playwright show-trace trace.zip

• Take screenshots on failure:

  await page.screenshot({ path: 'debug.png' })

• Use

  page.pause()

  for step-by-step debugging in headed mode

Capabilities

• Navigation:

  page.goto()

  , URL assertions, redirect verification
• Forms:

  page.fill()

  ,

  page.selectOption()

  ,

  page.check()

  , multi-step wizards
• Assertions:

  expect(page).toHaveURL()

  ,

  expect(locator).toBeVisible()

  ,

  toHaveText()

• Screenshots:

  page.screenshot()

  , full-page, element-level
• Visual regression:

  expect(page).toHaveScreenshot()

  with thresholds
• Accessibility:

  @axe-core/playwright

  , ARIA role selectors, keyboard navigation
• Network:

  page.route()

  for mocking,

  page.waitForResponse()

  for API calls

Tips

• Use

  data-testid

  attributes for stable selectors
• Prefer user-visible text and ARIA roles over CSS selectors
• Use

  test.step()

  for complex multi-step flows
• Set

  baseURL

  in

  playwright.config.ts

• Use

  page.waitForResponse()

  for async navigation
• Place test files alongside existing test patterns in the project