fix(e2e): disable Astro Dev Toolbar during landing e2e tests

The Astro Dev Toolbar (enabled by default in dev mode) injects h1
elements ("No islands detected", "Audit", "Settings") and a
"Community" link inside its shadow DOM. Playwright CSS selectors
pierce shadow DOM, causing 6 test failures:

- 5 heading-hierarchy tests saw extra h1 elements from the toolbar
- footer "Community" column title resolved to 2 elements (footer h4
  plus toolbar's Astro community chat link)

Root-cause fix: set PLAYWRIGHT=1 env var in the Playwright webServer
command; Astro config conditionally disables devToolbar when set.
Normal development retains the toolbar.
This commit is contained in:
SnapOtter
2026-06-21 12:13:48 +08:00
parent f21667db67
commit 2927e0d4be
2 changed files with 4 additions and 1 deletions
+3
View File
@@ -5,6 +5,9 @@ import { defineConfig } from "astro/config";
export default defineConfig({
site: "https://snapotter.com",
output: "static",
devToolbar: {
enabled: !process.env.PLAYWRIGHT,
},
integrations: [
sitemap({
filter: (page) => !page.includes("/404"),
+1 -1
View File
@@ -22,7 +22,7 @@ export default defineConfig({
},
],
webServer: {
command: `cd apps/landing && npx astro dev --port ${LANDING_PORT}`,
command: `cd apps/landing && PLAYWRIGHT=1 npx astro dev --port ${LANDING_PORT}`,
port: LANDING_PORT,
reuseExistingServer: !process.env.CI,
timeout: 60_000,