⌂ MEMLAB
MEMLAB / FIELD MANUAL 001

THE TEST LAB.

Interactive Playwright × Screenplay learning station

Learning lab: browser preview mode

If you're seeing this message, the page viewer is not running the interactive code. To activate the five stations, save this HTML file to Files and open it in a browser that supports local JavaScript, or serve it from an HTTPS website.

01 — Foundations

Plan tests as experiments: arrange the environment, take an action, and assert a user-observable outcome. A successful click is not itself evidence of correct behaviour.

await page.goto('/shop');
await page.getByRole('button', {name:'Add to cart'}).click();
await expect(page.getByText('1 item in cart')).toBeVisible();
02 — Locators

Prefer semantics: getByRole, getByLabel, getByText and scoped locators. Use test IDs when they provide a stable explicit contract.

03 — Codegen

npx playwright codegen demo.playwright.dev/todomvc records browser actions and produces Playwright code. Edit the generated test to add robust assertions.

04 — Screenplay

Actors pursue goals using Abilities, Tasks, Interactions and Questions. Serenity/JS implements this architecture; it is separate from core Playwright.

05 — Trace Viewer

Trace Viewer helps investigate failed tests with screenshots, browser snapshots, action details, and network evidence. Do not remove a failing assertion just to achieve a pass.