Reliable Playwright E2E Tests and Flake Fixes

// loginPage.ts - Page Object Pattern
import { Page } from '@playwright/test';

export class LoginPage {
  constructor(private page: Page) {}

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

  async login(email: string, password: string) {
    await this.page.getByLabel('Email').fill(email);
    await this.page.getByLabel('Password').fill(password);
    await this.page.getByRole('button', {name: 'Sign in'}).click();
    await this.page.waitForURL('/dashboard');
  }

  async getErrorMessage() {
    return await this.page.getByRole('alert').textContent();
  }
}

// checkout.spec.ts - Test Suite
import { test, expect } from '@playwright/test';
import { LoginPage } from './pages/loginPage';
import { CheckoutPage } from './pages/checkoutPage';

test.describe('Checkout Flow', () => {
  test('Happy path: complete purchase', async ({page}) => {
    const loginPage = new LoginPage(page);
    const checkoutPage = new CheckoutPage(page);

    await loginPage.navigateTo();
    await loginPage.login('user@example.com', 'password123');
    
    await checkoutPage.navigateTo();
    await checkoutPage.addItemToCart('Pro Plan');
    await checkoutPage.fillShippingInfo('123 Main St');
    await checkoutPage.fillPayment('4242424242424242', '12/25', '123');
    await checkoutPage.submitOrder();
    
    await expect(page).toHaveURL('/order-confirmed');
    await expect(page.getByText('Order Confirmed')).toBeVisible();
  });

  test('Invalid login: wrong password', async ({page}) => {
    const loginPage = new LoginPage(page);
    await loginPage.navigateTo();
    await loginPage.login('user@example.com', 'wrongpassword');
    
    const error = await loginPage.getErrorMessage();
    expect(error).toContain('Invalid credentials');
  });
});

CONFIG: playwright.config.ts
  webServer: http://localhost:3000
  workers: 4 (parallel execution)
  timeout: 30000
  retries: 2 (flaky-test resilience)

KEY PRACTICES: Page Objects encapsulate selectors. getByRole and getByLabel are accessibility-first. Explicit waits via waitForURL/waitForSelector. No hard sleeps. CI runs headless via GitHub Actions. Screenshot artifacts on failure.