playwright-testing

Playwright E2E Testing Skill

Generate Playwright tests for Nav web applications. Covers page object pattern, authentication fixtures, accessibility testing, and CI configuration.

Getting Started

1. Install Playwright and configure playwright.config.ts
2. Create page objects for your app's pages
3. Set up auth fixtures for Azure AD / MockOAuth2Server
4. Write tests: navigation, forms, responsive, accessibility
5. Add CI workflow in GitHub Actions

1. Project Setup

# Install Playwright
pnpm add -D @playwright/test
pnpm exec playwright install --with-deps chromium

# Create configuration
pnpm exec playwright init

playwright.config.ts

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

export default defineConfig({
  testDir: "./e2e",
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: [["html", { open: "never" }]],
  use: {
    baseURL: process.env.BASE_URL ?? "http://localhost:3000",
    trace: "on-first-retry",
    screenshot: "only-on-failure",
  },
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
    { name: "mobile", use: { ...devices["Pixel 7"] } },
  ],
  webServer: {
    command: "pnpm dev",
    url: "http://localhost:3000",
    reuseExistingServer: !process.env.CI,
  },
});

2. Page Object Pattern

// e2e/pages/oversikt.page.ts
import { type Locator, type Page, expect } from "@playwright/test";

export class OversiktPage {
  readonly heading: Locator;
  readonly searchField: Locator;
  readonly table: Locator;

  constructor(private readonly page: Page) {
    this.heading = page.getByRole("heading", { name: /oversikt/i });
    this.searchField = page.getByRole("searchbox", { name: /søk/i });
    this.table = page.getByRole("table");
  }

  async goto() {
    await this.page.goto("/oversikt");
    await expect(this.heading).toBeVisible();
  }

  async search(query: string) {
    await this.searchField.fill(query);
    await this.searchField.press("Enter");
  }

  async expectRowCount(count: number) {
    const rows = this.table.getByRole("row");
    // Minus header row
    await expect(rows).toHaveCount(count + 1);
  }
}