best-practices-for-writing-playwright-e2e-testing

Playwright Testing Standards

Configuration

Base Setup

requirements:
  version: "^1.50.1"
  dependencies:
    - "@playwright/test"
  files:
    - playwright.config.ts: Test configuration
    - tests/e2e/: Test files

Project Configuration

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

export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: false,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  
  reporter: [
    ['html'],
    ['list'],
    ['json', { outputFile: 'test-results/test-results.json' }]
  ],
  
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    video: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
  
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

Test Structure

Test Organization

directory_structure:
  tests/e2e:
    - auth/: Authentication tests
    - pages/: Page tests
    - api/: API tests
    - components/: Component tests
    - utils/: Test utilities

Test File Pattern

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

test.describe('Login Flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('successful login', async ({ page }) => {
    // Test implementation
  });

  test('invalid credentials', async ({ page }) => {
    // Test implementation
  });
});

Testing Standards

Page Object Pattern

// tests/e2e/pages/login.page.ts
export class LoginPage {
  constructor(private page: Page) {}

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

  async login(email: string, password: string) {
    await this.page.fill('[name=email]', email);
    await this.page.fill('[name=password]', password);
    await this.page.click('button[type=submit]');
  }

  async getErrorMessage() {
    return this.page.textContent('.error-message');
  }
}