HowToCodePage

Install and first test

Setting up Playwright, running the generated example test, and the trace viewer that makes failures debuggable.

Install and run

npm init playwright@latest
# asks for TypeScript or JavaScript, installs browsers, writes playwright.config.ts

npx playwright test              # run everything headless
npx playwright test --headed     # watch the browser
npx playwright test --ui         # interactive time-travel interface
npx playwright show-report       # open the HTML report
  • npx playwright install downloads the browser binaries; CI needs --with-deps on Linux for the system libraries.
  • Tests live in tests/ by default and are named *.spec.ts (or .spec.js).
  • The config file owns browsers, retries, the base URL and reporters.

What a generated test looks like

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

test('home page has the right title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link reaches the docs', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
💡
On a failure Playwright records a trace: screenshots, DOM snapshots and the network log for every step. Open it with npx playwright show-trace and you can usually see the cause without rerunning anything.

FAQ

Why do the tests pass locally and fail in CI?
The usual causes are a missing browser install (add --with-deps), a different timezone or locale, and a slower machine hitting a timeout. Pin all three in the config.
Do I need a separate test runner such as Jest?
No. @playwright/test ships the runner, assertions, retries, parallel workers and reporting in one package.

Locators and assertions Runner, fixtures and CI

Last refreshed 2026-09-18.