[{"data":1,"prerenderedAt":75},["ShallowReactive",2],{"hub:tools-playwright":3},{"path":4,"key":5,"title":6,"h1":7,"description":8,"crumbs":9,"blocks":17},"\u002Ftools\u002Fplaywright\u002F","tools-playwright","Playwright Guides for Testing Static Sites","Playwright","Guides for testing and monitoring static sites with Playwright: end-to-end flows, web vitals in tests, flaky preview tests and scheduled synthetic checks.",[10,13,16],[11,12],"Home","\u002F",[14,15],"Tools","\u002Ftools\u002F",[7,4],[18,21,23,26,35,37,65,67],{"k":19,"text":20},"p","Playwright drives a real browser through a static site the way readers use it, which makes it the tool for the parts of a static site that can break without the HTML changing: search and its index files, menus and focus handling, version switchers, forms backed by functions. The guides below use it in three places — on every pull request, against preview deploys, and on a schedule against production.",{"k":19,"text":22},"Two guides go beyond pass or fail. One measures layout shift and interaction latency inside existing tests, catching the regressions Lighthouse cannot see because it never clicks or scrolls. Another works through the causes of flaky runs against previews — the wrong deploy, cold caches, timing assumptions and third-party scripts — because a suite that fails one run in six stops being trusted.",{"k":24,"html":25},"fig","\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 138\" role=\"img\" aria-labelledby=\"hub-playwright-hero-title hub-playwright-hero-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-playwright-hero-title\">Stages at which the Playwright guides test a static site\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-playwright-hero-desc\">Four stages. Pull request tests against the built site cover search, navigation and vitals. Smoke tests run against the preview deploy. Scheduled synthetic checks run against production. Traces from failures feed back into fixes.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"138\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"20.0\" y=\"64.0\" width=\"154.5\" height=\"58.0\" rx=\"8\" fill=\"#1982c4\" opacity=\"0.14\" stroke=\"#1982c4\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Crect x=\"208.5\" y=\"64.0\" width=\"154.5\" height=\"58.0\" rx=\"8\" fill=\"#6a4c93\" opacity=\"0.14\" stroke=\"#6a4c93\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Cpath d=\"M176.5 93.0 L204.5 93.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:2px;marker-end:url(#hub-playwright-hero-arrow)\"\u002F>\n    \u003Crect x=\"397.0\" y=\"64.0\" width=\"154.5\" height=\"58.0\" rx=\"8\" fill=\"#8ac926\" opacity=\"0.2\" stroke=\"#5a8a16\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Cpath d=\"M365.0 93.0 L393.0 93.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:2px;marker-end:url(#hub-playwright-hero-arrow)\"\u002F>\n    \u003Crect x=\"585.5\" y=\"64.0\" width=\"154.5\" height=\"58.0\" rx=\"8\" fill=\"#ffca3a\" opacity=\"0.24\" stroke=\"#a97b00\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Cpath d=\"M553.5 93.0 L581.5 93.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:2px;marker-end:url(#hub-playwright-hero-arrow)\"\u002F>\n    \u003Ctext x=\"380.0\" y=\"30.0\" fill=\"#1f2937\" style=\"font-size:16px;text-anchor:middle;font-weight:700\">Where Playwright runs in the pipeline\u003C\u002Ftext>\n    \u003Ctext x=\"97.2\" y=\"90.8\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">Pull request\u003C\u002Ftext>\n    \u003Ctext x=\"97.2\" y=\"107.7\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">full suite on the build\u003C\u002Ftext>\n    \u003Ctext x=\"285.8\" y=\"90.8\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">Preview deploy\u003C\u002Ftext>\n    \u003Ctext x=\"285.8\" y=\"107.7\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">smoke subset\u003C\u002Ftext>\n    \u003Ctext x=\"474.2\" y=\"90.8\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">Production\u003C\u002Ftext>\n    \u003Ctext x=\"474.2\" y=\"107.7\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">scheduled checks\u003C\u002Ftext>\n    \u003Ctext x=\"662.8\" y=\"90.8\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">Traces\u003C\u002Ftext>\n    \u003Ctext x=\"662.8\" y=\"107.7\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">evidence for fixes\u003C\u002Ftext>\n  \u003C\u002Fg>\n  \u003Cdefs>\n    \u003Cmarker id=\"hub-playwright-hero-arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto-start-reverse\">\n      \u003Cpath d=\"M0 0 L10 5 L0 10 z\" fill=\"#556071\"\u002F>\n    \u003C\u002Fmarker>\n  \u003C\u002Fdefs>\n\u003C\u002Fsvg>\n\u003Cfigcaption>The same flows appear at every stage, with fewer tests further right.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":27,"h":28,"items":29},"group","Core Web Vitals Optimization for SSGs",[30],{"t":31,"u":32,"d":33,"y":34},"Measuring Web Vitals in Playwright Tests","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Fmeasuring-web-vitals-in-playwright-tests\u002F","Measure LCP, CLS and interaction latency inside existing Playwright tests on a static site, with throttling, stable thresholds and per-PR results.","How-to",{"k":24,"html":36},"\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 295\" role=\"img\" aria-labelledby=\"hub-playwright-kinds-title hub-playwright-kinds-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-playwright-kinds-title\">Number of Playwright guides of each kind\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-playwright-kinds-desc\">Vertical bars: How-tos 6, Fixes 1, Comparisons 0 and Concepts 0.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"295\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"80.0\" y=\"76.0\" width=\"90.0\" height=\"170.0\" rx=\"3\" fill=\"#1982c4\" opacity=\"0.3\" stroke=\"#1982c4\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"250.0\" y=\"217.7\" width=\"90.0\" height=\"28.3\" rx=\"3\" fill=\"#ff595e\" opacity=\"0.3\" stroke=\"#d83b41\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"420.0\" y=\"243.0\" width=\"90.0\" height=\"3.0\" rx=\"3\" fill=\"#ffca3a\" opacity=\"0.45\" stroke=\"#a97b00\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"590.0\" y=\"243.0\" width=\"90.0\" height=\"3.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Cpath d=\"M30.0 246.0 L730.0 246.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ctext x=\"380.0\" y=\"30.0\" fill=\"#1f2937\" style=\"font-size:16px;text-anchor:middle;font-weight:700\">Playwright guides by kind\u003C\u002Ftext>\n    \u003Ctext x=\"125.0\" y=\"69.0\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">6\u003C\u002Ftext>\n    \u003Ctext x=\"125.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">How-tos\u003C\u002Ftext>\n    \u003Ctext x=\"295.0\" y=\"210.7\" fill=\"#b32b30\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">1\u003C\u002Ftext>\n    \u003Ctext x=\"295.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">Fixes\u003C\u002Ftext>\n    \u003Ctext x=\"465.0\" y=\"236.0\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">0\u003C\u002Ftext>\n    \u003Ctext x=\"465.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">Comparisons\u003C\u002Ftext>\n    \u003Ctext x=\"635.0\" y=\"236.0\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">0\u003C\u002Ftext>\n    \u003Ctext x=\"635.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">Concepts\u003C\u002Ftext>\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n\u003Cfigcaption>7 guides use Playwright in depth; each is listed below under the section it belongs to.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":27,"h":38,"items":39},"Production-Ready Deployment & CI\u002FCD for SSGs",[40,44,48,52,56,60],{"t":41,"u":42,"d":43,"y":34},"Accessibility Testing with axe and pa11y in CI","\u002Fproduction-ready-deployment-cicd-workflows\u002Ftesting-static-sites-in-ci\u002Faccessibility-testing-with-axe-and-pa11y-in-ci\u002F","Run axe-core through Playwright and pa11y-ci on sampled pages of a static site in both themes, fail pull requests on new violations and track the rest.",{"t":45,"u":46,"d":47,"y":34},"End-to-End Tests for Static Sites with Playwright","\u002Fproduction-ready-deployment-cicd-workflows\u002Ftesting-static-sites-in-ci\u002Fend-to-end-tests-for-static-sites-with-playwright\u002F","Protect the few interactive flows on a static site with Playwright: search, theme toggle, mobile menu, copy buttons and forms, run against every preview deploy.",{"t":49,"u":50,"d":51,"y":34},"Synthetic Monitoring With Scheduled Playwright Checks","\u002Fproduction-ready-deployment-cicd-workflows\u002Fmonitoring-static-sites-in-production\u002Fsynthetic-monitoring-with-scheduled-playwright-checks\u002F","Run Playwright checks against a live static site on a schedule: search, forms and navigation, with screenshots on failure, alert routing and run costs.",{"t":53,"u":54,"d":55,"y":34},"Testing Search and Navigation Flows With Playwright","\u002Fproduction-ready-deployment-cicd-workflows\u002Ftesting-static-sites-in-ci\u002Ftesting-search-and-navigation-flows-with-playwright\u002F","Test the interactive parts of a static docs site with Playwright: search results and keyboard use, mobile menus, sidebar state, versions and 404s.",{"t":57,"u":58,"d":59,"y":34},"Visual Regression Testing on Preview Deploys","\u002Fproduction-ready-deployment-cicd-workflows\u002Fpreview-environments-for-pull-requests\u002Fvisual-regression-testing-on-preview-deploys\u002F","Screenshot key templates on every preview deploy with Playwright, compare them with main, and review diffs in the pull request without drowning in noise.",{"t":61,"u":62,"d":63,"y":64},"Fixing Flaky Playwright Tests Against Preview Deploys","\u002Fproduction-ready-deployment-cicd-workflows\u002Ftesting-static-sites-in-ci\u002Ffixing-flaky-playwright-tests-against-preview-deploys\u002F","Stabilise Playwright tests that run against preview URLs: wait for the right deploy, warm caches, drop timing assumptions and isolate third parties.","Fix",{"k":24,"html":66},"\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 210\" role=\"img\" aria-labelledby=\"hub-playwright-topics-title hub-playwright-topics-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-playwright-topics-title\">Topics with the most Playwright guides\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-playwright-topics-desc\">Horizontal bars, largest first: Testing Static Sites in CI 4, Preview Environments for Pull Requests 1, Performance Budgets and Lighthouse CI 1 and Monitoring Static Sites in Production 1.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"210\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"350.0\" y=\"65.0\" width=\"365.6\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"99.0\" width=\"91.4\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"133.0\" width=\"91.4\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"167.0\" width=\"91.4\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Cpath d=\"M350.0 60.0 L350.0 192.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ctext x=\"380.0\" y=\"30.0\" fill=\"#1f2937\" style=\"font-size:16px;text-anchor:middle;font-weight:700\">Where Playwright comes up\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"79.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Testing Static Sites in CI\u003C\u002Ftext>\n    \u003Ctext x=\"723.6\" y=\"79.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">4\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"113.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Preview Environments for Pull Requests\u003C\u002Ftext>\n    \u003Ctext x=\"449.4\" y=\"113.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">1\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"147.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Performance Budgets and Lighthouse CI\u003C\u002Ftext>\n    \u003Ctext x=\"449.4\" y=\"147.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">1\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"181.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Monitoring Static Sites in Production\u003C\u002Ftext>\n    \u003Ctext x=\"449.4\" y=\"181.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">1\u003C\u002Ftext>\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n\u003Cfigcaption>Topic pages give the wider context for each group; the numbers count only guides that use this tool in depth.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":27,"h":68,"items":69},"Often used with Playwright",[70],{"t":71,"u":72,"d":73,"y":74},"Lighthouse","\u002Ftools\u002Flighthouse\u002F","Budgets, Lighthouse CI and lab against field data.","1 shared guides",1790943190468]