Playwright + axe-core + Lighthouse CI
When coding agents author 136 commits in three days, subtle mobile layout breaks, contrast failures, or slow hero images will reach production unless automated browsers block bad merges.
Configured Playwright 1.63 + axe-core 4.13 to run 324 browser checks (Chromium, WebKit, and Firefox across 4 viewport widths on all 27 routes), 54 axe accessibility scans, and Lighthouse 13.5 performance gates in CI.
Blocked layout and contrast regressions before merge, pushed home-page mobile Lighthouse scores from 97 to 99, and cut one article’s lab Largest Contentful Paint from 10.65s to 1.58s (score 75 to 100).
All 49 static pages migrated off Wix needed automated cross-browser smoke tests, accessibility verification, and mobile speed budgets on every pull request.
Added `tests/a11y.mjs` (Playwright + axe-core across Chromium, WebKit, and Firefox) and `lighthouserc.json` mobile budget checks on 5 core page templates inside `.github/workflows/ci.yml`.
Live in CI on every PR, followed by a post-deploy check confirming the live site serves the approved commit SHA.
$0 for Playwright, axe-core, and Lighthouse CI (all open source), running on standard GitHub Actions runners ($0 within included repo minutes) (as of 2026-10-22).
GitHub Actions builds the production site once, boots a local server in CI, runs Playwright across Chromium/WebKit/Firefox at 4 viewport widths with `@axe-core/playwright` and `lhci autorun` (`lighthouserc.json`), deploys the exact build artifact, and verifies the `x-build` SHA header on the live domain.
Running 324 browser checks plus Lighthouse on every push slowed feedback loops, so we added changed-path test selection in `.github/workflows/ci.yml`. More importantly, green DOM and axe checks did not catch that CallRail’s external script missed `fetch`-based `/join` submissions or that GTM fired duplicate GA4 `page_view` events—teaching us to pair DOM checks with network-beacon assertions.
Compared against manual Chrome click-testing and unit-only Jest/Vitest tests (which never catch Safari/WebKit overflow, WCAG contrast violations, or 10-second mobile LCP regressions). We picked Playwright + axe-core + Lighthouse CI because it tests the real rendered DOM across all three browser engines.
