Install Playwright

Browser tests cover the integrated user journey: page, browser behavior, JavaScript, API, and storage.

Use the official initializer in an existing project and choose TypeScript. Configure a local web server command and a base URL so tests navigate to relative paths. Start with Chromium; add browsers when cross-browser risk justifies the time.

npm init playwright@latest
npx playwright test
npx playwright test --ui

Keep the server lifecycle in the configuration so local and CI runs use the same entry point:

import { defineConfig } from '@playwright/test'

export default defineConfig({
  use: { baseURL: 'http://127.0.0.1:3000' },
  webServer: {
    command: 'npm run start',
    url: 'http://127.0.0.1:3000',
    reuseExistingServer: !process.env.CI
  }
})

webServer.url is the readiness target. baseURL lets the test navigate to /books without copying an environment-specific host. In CI, avoid reusing an unknown process; the test command should own the server it exercises.

import { test, expect } from '@playwright/test'

test('shows the books page', async ({ page }) => {
  await page.goto('/books')
  await expect(page.getByRole('heading', { name: 'Books' })).toBeVisible()
})

This is intentionally a smoke test. It proves that the application starts, the route loads, and the expected page reaches the accessibility tree. It does not prove creation, persistence, or error handling. Add those journeys only when they protect important user risks; browser suites become slow and vague when they repeat every unit-level edge case.

Create the smoke test, stop the application server, and run it once to confirm Playwright starts and waits for the configured server. Then change the heading expectation and inspect the failure before restoring it.