Installation & Project Structure

Installation & Project Structure

A well-organised Playwright project is easy to maintain and easy to onboard. This lesson covers setup and the structure conventions used by professional teams.

Install

npm init -y
npm install -D @playwright/test
npx playwright install

Or use the interactive wizard: npm init playwright@latest

Configuration: playwright.config.ts

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 4 : undefined,
  reporter: [['html'], ['list']],

  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },

  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
    { name: 'mobile',   use: { ...devices['iPhone 13'] } },
  ],
});

Recommended Project Structure

playwright.config.ts
tests/
  auth/
    login.spec.ts
    logout.spec.ts
  checkout/
    cart.spec.ts
    payment.spec.ts
pages/
  LoginPage.ts
  CheckoutPage.ts
fixtures/
  auth.fixtures.ts
helpers/
  api.helpers.ts

Key conventions:

• Test files end in .spec.ts
• Page objects in pages/ — one file per page
• Shared fixtures in fixtures/
• API helpers for test data setup in helpers/

Running Tests

npx playwright test                      # all tests, all browsers
npx playwright test tests/auth/          # specific directory
npx playwright test --project=chromium   # one browser
npx playwright test --ui                 # interactive UI mode
npx playwright test --reporter=html      # generate HTML report
npx playwright show-report               # open last report