Installing Playwright and setting up your first project

Installing Playwright and Setting Up Your First Project

A clean project structure from day one prevents the maintenance headaches that plague most automation suites six months in.

Prerequisites

• Node.js 18+ (use nvm to manage versions: nvm install 20 && nvm use 20)
• VS Code with the Playwright Test extension (optional but recommended)

Initialise the Project

npm init playwright@latest

The CLI asks four questions: language (TypeScript recommended), test directory, GitHub Actions workflow, and which browsers. Accept the defaults for a first project. This generates:

playwright.config.ts   ← global config (baseURL, timeouts, browsers)
tests/
  example.spec.ts      ← sample tests to verify setup
package.json

playwright.config.ts — the Two Settings You Touch Most

export default defineConfig({
  use: {
    baseURL: 'https://your-app.com',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
  ],
});

baseURL lets you write page.goto('/login') instead of full URLs everywhere. screenshot: 'only-on-failure' means you only generate files when something breaks.

Install Browsers

npx playwright install

This downloads Chromium, Firefox, and WebKit binaries. They are versioned with Playwright — no manual driver management.

Verify the Setup

npx playwright test --ui

This opens UI Mode — an interactive test runner where you can see tests, run them individually, and inspect each step. If the example tests pass, your setup is correct.

Project Structure Recommendation

tests/
  auth/
    login.spec.ts
    logout.spec.ts
  checkout/
    payment.spec.ts
pages/                 ← Page Objects (covered in module 3)
  LoginPage.ts
fixtures/              ← Shared setup/teardown
  auth.fixture.ts
playwright.config.ts

Organise by feature, not by test type. Tests and page objects for the same feature should be close together.