Advanced Topics & Mastery

Guided briefing

Advanced Topics & Mastery video demo

A practical screen-share style walkthrough for chapter 7, showing how the Playwright idea works in TypeScript and Java.

Briefing focus

Scaling test architecture

This is a structured lesson briefing. Real video/audio can be added later as a media source.

Estimated time

10 min

1. 1Scaling test architecture
2. 2Flakiness triage playbook
3. 3Visual regression & screenshot stability
4. 4Performance insights with Playwright

Transcript brief

Deep-dive into Playwright at scale: flakiness triage, visual regression, performance metrics, CI guardrails, and a capstone lab. The video brief explains the mental model first, then demonstrates the workflow using the course code samples, and finishes with reliability checks you can apply in CI.

Key takeaways

• Translate the concept into a maintainable Playwright test.
• Understand the TypeScript and Java equivalents without changing the test intent.
• Avoid the common source of flaky or slow end-to-end tests for this topic.

Scaling test architecture

Organise test suites by layer (unit → api → e2e). Keep CI fast with a smoke gate and run full regression on a scheduled pipeline. Separate fast API checks from heavyweight browser tests and use dedicated runners for visual and cross-browser suites.

• Define a smoke set that runs on every PR (5–15 tests)
• Run full regression nightly or on-demand (100s of tests)
• Use workers + shards to balance speed vs cost
• Keep flaky, slow or platform-specific tests out of the main PR gate

Flakiness triage playbook

• Reproduce locally with the same tag/grep and --trace on-first-retry
• Open the Trace Viewer: inspect snapshots, network and console for overlays or race conditions
• Check for shared state: unique test data or DB isolation failures are common culprits
• Replace brittle selectors with role/name or add scoped locators
• Avoid masking flakes locally; use retries only as CI tolerance after diagnosis

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  use: {
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
});

# Re-run the failing test locally with a trace
npx playwright test tests/failing.spec.ts --trace on

# Open the trace
npx playwright show-trace test-results/.../trace.zip

Visual regression & screenshot stability

Use Playwright's screenshot assertions or integrate third-party visual tools. For stable snapshots: fix viewport, freeze dynamic regions, mask timestamps and user-specific content, and normalise fonts and locales in CI.

// Expect the page to match an approved screenshot
await expect(page).toHaveScreenshot('homepage-baseline.png', { fullPage: true });

Performance insights with Playwright

Capture navigation timings and measure core vitals from the browser. Use traces to find long tasks and expensive paint/layout operations. For end-to-end performance, consider Lighthouse in CI or gather window.performance entries from the page.

const timings = await page.evaluate(() => JSON.stringify(window.performance.timing));
console.log(JSON.parse(timings));

Labs & Capstone

• Lab 1: Replace 10 explicit waits with locators + expect() assertions and measure flakiness before/after.
• Lab 2: Create a reusable `signedInPage` fixture that seeds test data via the API and verifies isolation.
• Lab 3: Record a HAR and replay it with page.routeFromHAR() to stub a flaky 3rd-party service.
• Capstone: Build a 30–50 test E2E suite for a sample app that runs on PR smoke and nightly full regression; include visual checks and CI sharding.

Recommended further reading & resources

• Playwright official docs — Test Runner, Locators, Fixtures, Network, Tracing (playwright.dev/docs)
• Playwright examples repository on GitHub — real-world patterns and config
• Articles: flaky test triage, visual testing best practices, and CI cost/parallelism planning