Skip to content

Chapter 1 of 8

Foundations: Installing and Configuring Playwright

Playwright is a browser automation framework that drives Chromium, Firefox, and WebKit and ships with its own test runner, @playwright/test. To get a project running, install the test package as a dev dependency, install the browser binaries, and run the test command. Once installed, every project's most important file becomes playwright.config.ts, because it controls where tests live (testDir), what browsers run them (projects), how the app starts (webServer), and how failures are reported.

The webServer block is especially useful when an AI agent or a developer needs to drive a full app during tests: it specifies a command, a URL Playwright should ping until it responds, and reuseExistingServer so that locally you can keep a dev server running while CI always spins a fresh one. baseURL lets tests write short paths like page.goto('/login') instead of full URLs, which makes the same suite portable between local, staging, and CI. Environment variables such as BASE_URL, USERNAME, and PASSWORD are read from process.env inside the config so credentials never have to be hardcoded.

Configuration is also where you decide on browser projects. A project is a named browser/device combination, so you can run the same specs under chromium, firefox, webkit, or an emulated mobile profile by configuring devices from the playwright package. Per-project use settings control viewport, locale, timezone, color scheme, permissions, and reduced motion, all of which help keep tests deterministic across machines. Other use keys worth knowing include headless/headed, video (e.g. 'retain-on-failure'), screenshot (e.g. 'only-on-failure'), trace (e.g. 'on-first-retry'), and ignoreHTTPSErrors for local dev environments.

All chapters
  1. 1Foundations: Installing and Configuring Playwright
  2. 2Selectors, Locators, and Resilient Tests
  3. 3Assertions, Waits, and Avoiding Flakiness
  4. 4Running, Tagging, and Debugging Tests
  5. 5Authentication, State, and Data Isolation
  6. 6Visual Regression and Snapshots
  7. 7CI/CD, Reports, and Parallel Execution
  8. 8Workspace Workflows and AI Agent Collaboration

Drill it

Reading is not remembering. These come from the Anki Playwright Agents deck:

Q

Playwright (Node): minimal setup?

npm i -D @playwright/testnpx playwright installnpx playwright test

Q

Where do Playwright tests live?

Common: ./tests or ./e2e (you choose). Configure testDir in playwright.config.ts so agents know where to add new tests.

Q

Key playwright.config.ts settings?

use.baseURL, webServer (start app), projects (chromium/firefox/webkit), retries/workers, reporter (html + junit), trace/video/screenshot policies.

Q

How do I auto-start my app for tests?

Use playwright.config.ts webServer: { command: "npm run dev", url: "http://127.0.0.1:3000", reuseExistingServer: !process.env.CI }.