ci: adds Playwright tests - #146
Conversation
#143 moved the scheme into `baseURL` as a hard-coded `https://`, so local builds now point their assets at https://localhost:3000, which `serve` doesn't answer. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AkQ47hh78xyt4wWG9GVL5t
Since the doc-kit 2 migration (#138) the navbar rendered the ui-components ThemeToggle directly. Only islands hydrate, so the button never opened. Use doc-kit's ThemeToggle island instead. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AkQ47hh78xyt4wWG9GVL5t
Ports nodejs.org's playwright.yml and adds tests for asset URLs, the sitemap, navigation, search and the theme toggle. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AkQ47hh78xyt4wWG9GVL5t
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
👋 Codeowner Review RequestThe following codeowners have been identified for the changed files: Team reviewers: @nodejs/web-infra @nodejs/nodejs-website Please review the changes when you have a chance. Thank you! 🙏 |
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Unresolved CI permissions and telemetry handling issues, plus a sitemap origin validation gap, block approval.
Get a fresh assessment by requesting another Copilot review.
Review effort: Lite
Findings: 3
Open (3)
What changed in this PR
Adds Playwright end-to-end coverage for the Learn site, including local serving and Vercel preview CI.
Changes:
- Adds sitemap, asset, navigation, theme, search, and 404 tests.
- Configures Playwright, dependencies, CI, documentation, and artifact handling.
- Updates deployment-aware URLs and the hydrated theme toggle.
| File | Reviewed change | Findings |
|---|---|---|
tests/e2e/sitemap.spec.mjs |
Sitemap and search-index checks | Moderate (1 vote): validate URLs against the expected base origin. |
tests/e2e/interactions.spec.mjs |
Navigation and interaction tests | — |
tests/e2e/helpers.mjs |
Shared E2E utilities | Critical (2 votes): exclude or separately allowlist /learn/_vercel/ telemetry URLs. |
tests/e2e/assets.spec.mjs |
Asset validation | Critical (2 votes): account for intentional /learn/_vercel/ telemetry scripts. |
playwright.config.mjs |
Playwright and server configuration | — |
package.json |
Test scripts and dependencies | — |
package-lock.json |
Dependency lock updates | — |
eslint.config.mjs |
E2E lint configuration | — |
doc-kit.config.mjs |
Environment-specific origins | — |
CONTRIBUTING.md |
E2E testing documentation | — |
components/Navigation/index.jsx |
Hydrated theme toggle | — |
.gitignore |
Playwright artifact exclusions | — |
.github/workflows/playwright.yml |
Vercel preview CI workflow | Critical (1 vote): grant pull-requests: read and deployments: read permissions. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
On small screens the sidebar collapses into a dropdown, which needs JavaScript to open. Since the doc-kit 2 migration (#138) only islands hydrate, so the dropdown rendered but did nothing. Register the sidebar as an island, like Authors, and cover small screens in the e2e tests. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AkQ47hh78xyt4wWG9GVL5t
Signed-off-by: Matt Cowley <me@mattcowley.co.uk>
MattIPv4
left a comment
There was a problem hiding this comment.
CI side of this looks good, added patrickedqvist/wait-for-vercel-preview@* to the allow list

After the incident today (thanks @jonasgeiler by the way!) , I wanted to shore up this repo (along with the other PRs #144 #145). Playwright would have likely caught these errors (in addition to use simply looking at the preview)
You'll notice in the log below too that the coding agent noticed two other bugs. One still in production!
Edit: manual review also found the same islands problem on small viewports that led to no nav. Fixed here too.
The Playwright workflow and 13 starter tests are done and pass against a local build. I put back the
https://httpsbug from #133, rebuilt, and 8 of the 13 tests failed, so they catch it. The patch holds 3 commits on top ofmain(6976605); apply it withgit am learn-playwright.patch. The workflow itself hasn't run in GitHub Actions yet.Writing the tests turned up two more bugs on
main, so two of the commits are fixes. You can split those out if you'd rather send them separately.https://prefix fromoriginto fix production build #143, a local build points its CSS and JS athttps://localhost:3000, which the local server doesn't answer. The fix keepshttp/httpsas part oforigin, so production, preview and local each get the right one.playwright.yml): ported from nodejs.org. It waits for the Vercel preview and runs Chromium against it. One change: it doesn't skip Dependabot PRs, since Migrate to new doc-kit packages #138 was a Dependabot bump. zizmor reports no problems with it./learn/assets/, the site font must be applied, and nothing under/learn/may fail to load.npm run serveandnpm run test:e2escripts, a Playwright config that starts the local server itself, linting set up for the test files, and a "Running the end-to-end tests" section in CONTRIBUTING.md.Made with help from a frontier model. The core repo suggests we remove the commit data - but I am retaining it for now as it was truly helpful.