Skip to content

SYSTEM Cited by 3 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 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 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/2026-08-31-dropbox-testing-cookie-behavior-across-hundreds-of-web-surfaces-with-our-in-house-auditor — privacy-conformance substrate. The Dropbox Cookie Auditor drives Playwright to open each of 200+ web surfaces in a fresh, isolated browser session, record the cookies that load, drive the consent controls to decline non-essential cookies, reload, and re-assert the cookie set. Playwright's isolated-session-per-test + robust locators are what let the auditor observe exactly what a new visitor sees and drive underlying consent controls across 22 languages. Third wiki consumer of Playwright-as-verification-substrate after Slack (a11y) and Zalando (production probe).
  • 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.
  • systems/vinext — production consumer (E2E tier).
  • systems/vitest — complementary unit tier.
  • systems/agent-browser — Vercel's AI-driven browser- verification tool used alongside Playwright in vinext.
  • systems/axe-core-playwright — the Axe binding for Playwright; Slack's integration surface.
  • systems/cypress — the CI-tier framework Zalando kept, paired with Playwright at the probe tier.
  • playwright-locator-auto-wait — the load-bearing abstraction that makes tests stable but rules out embedding whole-page audits in interaction methods.
  • synthetic-monitoring — the production- monitoring primitive Zalando builds on Playwright.
  • flaky-test — the failure class Playwright's auto-wait / auto-retry primitives address at framework altitude.
  • shadow-mode-alert-validation — the alert onboarding discipline Zalando uses for Playwright probes.
  • a11y-checks-via-playwright-fixture-extension — canonical pattern for adding cross-cutting testing concerns (a11y, perf, visual) to a Playwright suite via the custom fixture model.
  • e2e-test-as-synthetic-probe — the pattern whose canonical instance uses Playwright.
  • shadow-mode-alert-before-paging — the probe rollout gate.
  • scenario-minimalism-for-probe-reliability — the scoping discipline that complements Playwright's framework-altitude reliability primitives.
  • systems/dropbox-cookie-auditor — privacy-conformance consumer; drives consent controls across 200+ surfaces / 22 languages in isolated sessions.
  • semantic-control-identification — the selector discipline the Dropbox auditor uses on top of Playwright to survive locale + layout variance.
Last updated · 766 distilled / 2,225 read