Setting Up Playwright

Installation

npm install -D @playwright/test
npx playwright install

Tip

Use npx playwright install chromium to install only Chromium browser.

Project Initialization

npx playwright test --init

Basic Project Structure

tests/
├── e2e/           # End-to-end tests
└── pages/         # Page object models

Sample Test

// tests/e2e/basic.spec.ts
import { test, expect } from "@playwright/test";

test("page navigation", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveTitle(/Home/);
  await expect(page.locator("h1")).toBeVisible();
});

Basic Configuration

// playwright.config.ts
import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  testDir: "./tests",
  use: {
    baseURL: "http://localhost:3000",
    screenshot: "only-on-failure",
  },
  projects: [{ name: "chromium", use: devices["Desktop Chrome"] }],
});

Running Tests

npx playwright test
npx playwright test --ui  # With UI mode