Project Structure

e2e/
├── playwright.config.ts          # Playwright configuration
├── package.json                  # Dependencies
├── .env.test                     # Local test credentials (gitignored)
├── .env.test.example             # Template with dummy values (committed)
│
├── fixtures/
│   └── test-fixtures.ts          # Custom Playwright fixtures
│
├── pages/                        # Page Object Model classes
│   ├── base-page.ts              # Shared methods (waitForLoad, screenshot)
│   ├── login-page.ts
│   ├── product-list-page.ts
│   ├── product-detail-page.ts
│   ├── cart-page.ts
│   ├── checkout-page.ts
│   └── order-history-page.ts
│
├── specs/                        # Test files organized by feature
│   ├── auth/
│   │   ├── login.spec.ts
│   │   └── logout.spec.ts
│   ├── products/
│   │   ├── search.spec.ts
│   │   └── product-detail.spec.ts
│   ├── cart/
│   │   └── cart-management.spec.ts
│   ├── checkout/
│   │   ├── checkout-flow.spec.ts
│   │   └── checkout-validation.spec.ts
│   ├── orders/
│   │   └── order-history.spec.ts
│   └── visual/
│       └── visual-regression.spec.ts
│
├── test-data/
│   ├── users.ts                  # Test user credentials
│   ├── products.ts               # Expected product data
│   └── addresses.ts              # Shipping addresses for checkout
│
├── utils/
│   ├── api-helpers.ts            # Direct API calls for test setup/teardown
│   └── test-helpers.ts           # Shared utility functions
│
└── .github/
    └── workflows/
        └── playwright.yml        # CI pipeline

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

export abstract class BasePage {
  readonly page: Page;
  readonly errorBanner: Locator;
  readonly loadingSpinner: Locator;

  constructor(page: Page) {
    this.page = page;
    this.errorBanner = page.locator('[data-testid="error-banner"]');
    this.loadingSpinner = page.locator('[data-testid="loading-spinner"]');
  }

  async waitForPageLoad() {
    await this.loadingSpinner.waitFor({ state: 'hidden', timeout: 10_000 });
  }

  async expectNoErrors() {
    await expect(this.errorBanner).not.toBeVisible();
  }

  async takeScreenshot(name: string) {
    return this.page.screenshot({ path: `screenshots/${name}.png`, fullPage: true });
  }
}

export const testUsers = {
  standard: {
    email: process.env.TEST_USER_EMAIL || 'testuser@example.com',
    password: process.env.TEST_USER_PASSWORD || 'Test@123',
    name: 'Test User',
  },
  admin: {
    email: process.env.ADMIN_EMAIL || 'admin@example.com',
    password: process.env.ADMIN_PASSWORD || 'Admin@123',
    name: 'Admin User',
  },
  invalid: {
    email: 'nonexistent@example.com',
    password: 'WrongPassword',
    name: 'Invalid User',
  },
} as const;

export const shippingAddresses = {
  valid: {
    name: 'John Doe',
    address: '123 Test Street',
    city: 'Test City',
    state: 'TS',
    zip: '12345',
    phone: '9876543210',
  },
  incomplete: {
    name: 'Jane Doe',
    address: '',
    city: '',
    state: '',
    zip: '',
    phone: '',
  },
} as const;