Playwright Tutorial for Beginners: Where to Begin in 2026

# 1. Check Node.js (v18+ required)
node --version

# 2. Create a new project folder
mkdir my-playwright-tests
cd my-playwright-tests

# 3. Initialise and install Playwright
npm init -y
npm install -D @playwright/test

# 4. Install browsers
npx playwright install

# 5. Generate a starter test file
npx playwright test --ui
# (the UI mode is optional — good for beginners)

That's it. You are ready to write tests.

Recommended folder structure:

my-playwright-tests/
├── playwright.config.ts    → config (browsers, base URL)
├── tests/
│   ├── login.spec.ts
│   ├── checkout.spec.ts
│   └── search.spec.ts
├── pages/                  → Page Object Model
│   ├── LoginPage.ts
│   └── CheckoutPage.ts
├── fixtures/
│   └── test-data.ts        → test users, products
└── package.json

Tests live in /tests.
Page Objects live in /pages.
Data lives in /fixtures.

This structure scales from 1 test to 1,000 tests.

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

test('user can log in successfully', async ({ page }) => {
  // 1. Navigate to the login page
  await page.goto('https://example.com/login');

  // 2. Fill the email field
  await page.getByLabel('Email').fill('test@example.com');

  // 3. Fill the password field
  await page.getByLabel('Password').fill('password123');

  // 4. Click the submit button
  await page.getByRole('button', { name: 'Log in' }).click();

  // 5. Assert the URL changed
  await expect(page).toHaveURL(/dashboard/);

  // 6. Assert a welcome message appears
  await expect(
    page.getByRole('heading', { name: /Welcome/ })
  ).toBeVisible();
});

How to run your first test:

1. Run all tests:
   npx playwright test

2. Run a specific file:
   npx playwright test tests/login.spec.ts

3. Run with UI mode (recommended for beginners):
   npx playwright test --ui

4. Run in a specific browser:
   npx playwright test --project=chromium

5. Run in headed mode (see the browser):
   npx playwright test --headed

6. View the HTML report:
   npx playwright show-report

7. Open trace viewer (for debugging):
   npx playwright show-trace trace.zip

// pages/LoginPage.ts
import { Page, expect } from '@playwright/test';

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

  async goto() {
    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: 'Log in' }).click();
  }

  async expectDashboardLoaded() {
    await expect(this.page).toHaveURL(/dashboard/);
    await expect(
      this.page.getByRole('heading', { name: /Welcome/ })
    ).toBeVisible();
  }
}

// tests/login.spec.ts — refactored with POM
import { test } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

test('user can log in successfully', async ({ page }) => {
  const login = new LoginPage(page);

  await login.goto();
  await login.login('test@example.com', 'password123');
  await login.expectDashboardLoaded();
});

Why this matters:

- Locators live in ONE place
- Tests read like business steps
- When the UI changes, you fix one file
- The team can share Page Objects

# .github/workflows/playwright.yml
name: Playwright Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/

// 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 ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'https://example.com',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});