Skip to content

SYSTEM Cited by 2 sources

Playwright

Playwright is Microsoft's browser automation + E2E testing framework (Chromium, Firefox, WebKit) with a single API.

Key primitives

  • Page — a browser page/tab.
  • Locator — a resolvable, re-evaluated reference to an element, with built-in auto-wait semantics (wait for attached / visible / stable / enabled before interacting). This is what makes Playwright tests stable against async rendering.
  • Fixtures — Playwright's per-test setup/teardown surface. Teams extend test with a custom fixture ({ slack }) that bundles login, API seeding, page objects, utilities. The fixture model is the canonical extension point for cross- cutting testing concerns — see patterns/a11y-checks-via-playwright-fixture-extension.
  • test.step — labeled sub-steps that show up in the Playwright HTML Reporter (Slack uses test.step labels like "Running accessibility checks in runAxeAndSaveViolations" to make audit call sites visible in reports).
  • HTML Reporter — aggregates test results and supports attaching artifacts (screenshots, violation dumps).

Role on this wiki

  • 380 Playwright E2E tests in vinext's test suite (unit tests miss a lot of subtle browser issues — hydration, client-side navigation, rendered output).
  • Part of AI agent guardrails that made the AI-driven rewrite reviewable.
  • Slack's accessibility-testing substrate. Slack's production a11y integration hangs Axe off the custom Playwright fixture (see patterns/a11y-checks-via-playwright-fixture-extension); Slack investigated and rejected baking Axe into Locator interaction methods due to Locator auto-wait semantics.
  • Zalando's production test-probe substrate. Zalando chose Playwright over Cypress for a new 30-minute cron-driven e2e test probe tier against live zalando.com, paging on failure for critical customer journeys. The framework's auto-wait / auto-retry for web assertions / tracing / unified-browser-API / TypeScript-out-of-box were the explicit decision factors — the post names five primitives as the deciding set. Probe rollout used email-only shadow mode for weeks; iteration-era fixes included local expect.toPass retries and CSS pseudo-class augmentations like :visible for non-visible-content selectors. Final post-promotion false-positive rate: 0 % — only pager firing was on a real incident.

Seen in

  • sources/2026-02-24-cloudflare-how-we-rebuilt-nextjs-with-ai-in-one-week
  • sources/2025-01-07-slack-automated-accessibility-testing-at-slack — Slack's Playwright E2E suite extended with a custom slack.utils.a11y.runAxeAndSaveViolations() helper on the pre-existing slack custom fixture. Uses @axe-core/playwright as the binding. Investigated baking Axe into Locator methods, rejected due to auto-wait abstraction mismatch; landed architecture is explicit-invocation-via-fixture.
  • — canonical wiki instance of Playwright as a production- monitoring substrate. Zalando repurposes Playwright from a CI e2e framework into a 30-minute cron-driven probe tier against zalando.com, with three scenarios mapping to critical customer journeys (home→product, catalog→filter→ product, product→size→cart→checkout). The framework's auto-wait primitive (on Locator) directly replaces a hand-rolled hydration-detection kludge Zalando had built for their Cypress CI tier. Auto-retry for web assertions and expect.toPass for local retry loops close the remaining flakiness gap. Tracing and HTML reports become the iteration signal during shadow-mode rollout. The code example in the post — a ~10-line catalog-landing probe using page.getByRole(...), page.locator(...), page.getByTestId(...), waitForLoadState('domcontentloaded'), expect(page).toHaveURL(...) — is the canonical wiki example of minimal-scope probe code.
Last updated · 542 distilled / 1,571 read