Add Playwright test suite for website Sandpack examples with co-located tests

[Copilot]

Description of the change

Added end-to-end testing infrastructure for website's interactive code examples using Playwright. Tests validate that Sandpack iframes (running on *-sandpack.codesandbox.io) work correctly across React and Vue implementations.

Test Infrastructure

• SandpackHelper utility class - abstracts iframe interaction (wait, click, read text, count elements)
• Shared test patterns - reusable functions for common scenarios (counter increment, shared/scoped state, lifecycle toggle, recipe testing)
• 31 test cases across 9 test files covering:
  • Quickstart examples (global, component, form-scoped state)
  • Lifecycle examples (mount/unmount, React Strict Mode)
  • Recipe integrations (jotai, nanostores, valtio, xstate, zag, zustand, vue-refs)

Test Organization

Tests are co-located with source code in src/source-examples/ directories:

src/source-examples/
├── quickstart/quickstart.spec.ts
├── lifecycle/lifecycle.spec.ts
├── jotai/jotai.spec.ts
├── nanostores/nanostores.spec.ts
└── ... (each recipe with its own test file)

tests/helpers/
├── sandpack.ts         # Sandpack utilities
└── common-tests.ts     # Shared test patterns

Benefits:

• Tests live next to the code they test for easier maintenance
• Each recipe has its own granular test file instead of one large file
• Clear ownership and self-contained example directories

CI/CD Integration

• PR workflow: runs tests before merge
• Deployment workflow: gates deployment on test pass
• Artifact upload on failure for debugging

Configuration

• Auto-starts Astro dev server via playwright.config.ts (configured to discover tests in src/source-examples/)
• Supports local development with npm test, npm run test:headed, npm run test:ui
• Cross-browser: Chromium, Firefox, WebKit

Bug Fixes

• Fixed FormApp.tsx and Form.vue importing from wrong molecules file (blocked dev server)
• Added explicit contents: read permissions to workflows (security)

Code Quality

• Proper TypeScript type annotations (Page instead of any)
• Reduced code duplication with shared testRecipeWithFramework() helper

Usage:

cd website
npm install
npx playwright install --with-deps
npm test

Type of change

• [ ] Bug fix (non-breaking change that fixes an issue)
• [x] New feature (non-breaking change that adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [x] Documentation or Development tools (readme, specs, tests, code formatting)

Original prompt

The website directory is an Astro website that includes a number of executable source code examples. Sometimes these examples stop working as intended when the website is updated, so it requires manual tests. To fix this problem, please:

• Add a playwright test suite using the playwright MCP to ensure that the examples work.
• Make sure that the playwright tests are testing inside of the Codesandbox sandpack iframe. These are often on a domain like *-sandpack.codesandbox.io and is the environment we want to test. Focus on the testing of the examples first, instead of testing things like the sidebar of the website, or the ability to edit code in sandpack.
• Make sure these tests can be run locally using the Astro dev server
• Update the github actions workflow or add a new one so that website changes are tested full stack in playwright.
• When an example is implemented across frameworks (e.g. vue and react) make sure to share code

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.