Lesson 08 — Playwright with TypeScript

Title: Install tooling and author the first typed end-to-end spec

Description: Bootstrap @playwright/test, install browsers locally, and assert on a deterministic public page.

Why it matters for QA: Playwright defaults to TypeScript fixtures — every spec is a .ts file with rich editor feedback.

1. Install

npm install -D @playwright/test
npx playwright install

2. Minimal playwright.config.ts (optional starter)

Teams often generate with npm init playwright@latest. For class labs a config can be minimal; follow your team template in production.

3. First test (tests/example.spec.ts)

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

test("example.com shows the expected title", async ({ page }) => {
  await page.goto("https://example.com/");
  await expect(page).toHaveTitle(/Example Domain/);
});

Run:

npx playwright test

4. Typed test API highlights

• test receives a fixture object (page, context, browser) already typed.
• expect matchers know locators versus pages — leverage autocomplete.

5. Practice

1. Duplicate the test for https://playwright.dev/ adjusting the title regex.
2. Add await expect(page.getByRole("link", { name: "Get started" })).toBeVisible(); if structure matches — swap locator when DOM differs.

6. Debugging habits

npx playwright test --headed --debug

Trace viewer (npx playwright show-trace trace.zip) belongs in later labs — bookmark it.

7. Stretch goal

Configure baseURL in playwright.config.ts and rewrite navigation relative (await page.goto("/")) inside a disposable local site.