Playwright E2E Test Suite

Create a comprehensive Playwright E2E test suite for [User Flow].

Setup

1. Authentication State Reuse

• Login once, save auth state
• Reuse across tests
• Faster test execution

2. Page Object Model

• Encapsulate page interactions
• Reusable selectors and methods
• Maintainable test code

3. Test Configuration

• playwright.config.ts setup
• Multiple browsers (chromium, firefox, webkit)
• Parallel execution
• Retry logic

Test Implementation

Test Scenarios

Happy Path

• Complete user flow from start to finish
• All features working as expected
• Successful outcome

Edge Cases

• Invalid inputs
• Network failures
• Slow responses
• Empty states
• Boundary conditions

API Response Mocking

await page.route('**/api/data', (route) => {
  route.fulfill({
    status: 200,
    body: JSON.stringify(mockData)
  })
})

Visual Regression Testing

await expect(page).toHaveScreenshot('homepage.png')

Accessibility Testing

const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
expect(accessibilityScanResults.violations).toEqual([])

Multi-Browser Testing

// playwright.config.ts
projects: [
  { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
  { name: 'webkit', use: { ...devices['Desktop Safari'] } },
]

Parallel Execution

// playwright.config.ts
workers: process.env.CI ? 2 : 4,
fullyParallel: true,

Custom Fixtures

import { test as base } from '@playwright/test'

type MyFixtures = {
  authenticatedPage: Page
}

const test = base.extend<MyFixtures>({
  authenticatedPage: async ({ page }, use) => {
    // setup
    await use(page)
    // teardown
  }
})

Assertions

await expect(page.locator('h1')).toHaveText('Welcome')
await expect(page).toHaveURL(/dashboard/)
await expect(page.locator('.error')).toBeVisible()

Error Handling

• Video recording on failure
• Screenshots on failure
• Trace files for debugging
• Console log capture

CI Integration

GitHub Actions Config

- name: Install Playwright
  run: npx playwright install --with-deps
  
- name: Run E2E tests
  run: npx playwright test
  
- name: Upload test results
  if: failure()
  uses: actions/upload-artifact@v3
  with:
    name: playwright-report
    path: playwright-report/

Configuration File

Provide complete playwright.config.ts:

• Base URL
• Timeout settings
• Reporter configuration
• Browser settings
• Video and screenshot settings

Requirements

• Complete test file implementation
• Page Object Model classes
• Full playwright.config.ts
• CI/CD integration
• Production-ready practices