15. Initializing Playwright Test & Runner Configuration

Quick Setup Command

Initialize a brand new Playwright TypeScript test project:

npm init playwright@latest

Prompts will ask:
- TypeScript or JavaScript? -> Choose TypeScript
- Where to put tests? -> tests
- Add GitHub Actions workflow? -> False
- Install Playwright browsers? -> Yes

---

Writing Your First Test (tests/example.spec.ts)

import { test, expect } from "@playwright/test";
test("has title and navigates to docs", async ({ page }) => {
  await page.goto("https://playwright.dev/");
// Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
// Click getting started link
  await page.getByRole("link", { name: "Get started" }).click();
// Expects page to have a heading with the name of Installation.
  await expect(page.getByRole("heading", { name: "Installation" })).toBeVisible();
});

---

Running Tests from CLI

# Run all tests (headless by default):
npx playwright test
# Run tests in headed browser mode (watch browser window):
npx playwright test --headed
# Run only chromium:
npx playwright test --project=chromium
# Run UI mode (interactive test explorer with time travel):
npx playwright test --ui