-
Notifications
You must be signed in to change notification settings - Fork 129
Integrate Playwright MCP for UI Testing #3890
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Adds Playwright MCP configuration and repository guidance so contributors can use Playwright (including screenshots and ARIA snapshots) to validate UI and accessibility changes in primer/view_components.
Changes:
- Added Playwright MCP server configuration under
.copilot/mcp.json. - Added a Playwright MCP usage guide at
.github/agents/playwright-testing.md. - Added Copilot contribution/testing guidance in
.github/copilot-instructions.md.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| .github/copilot-instructions.md | Documents repo UI testing context and points contributors to the Playwright MCP guide. |
| .github/agents/playwright-testing.md | Provides step-by-step Playwright MCP testing guidance (demo app, preview URLs, themes, snapshots). |
| .copilot/mcp.json | Configures the Playwright MCP server invocation via npx. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "command": "npx", | ||
| "args": ["@playwright/mcp@latest"], | ||
| "type": "stdio" |
Copilot
AI
Jan 26, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
npx may prompt for confirmation when executing a package that isn’t installed locally (npm 7+), which can cause the MCP server startup to hang. Consider adding the appropriate non-interactive flag (e.g., --yes) or invoking a locally installed binary instead.
| "mcpServers": { | ||
| "playwright": { | ||
| "command": "npx", | ||
| "args": ["@playwright/mcp@latest"], |
Copilot
AI
Jan 26, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Using @playwright/mcp@latest makes the MCP server version non-deterministic and can break unexpectedly (or pull in compromised releases). Consider pinning to a specific version (and updating deliberately), and/or adding it as a devDependency so it’s covered by the lockfile instead of fetching from the network at runtime.
| "args": ["@playwright/mcp@latest"], | |
| "args": ["@playwright/mcp@0.0.6"], |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Overview
This pull request adds the Playwright MCP testing skill and detailed instructions for using it in the primer/view_components repository.
Changes
.copilot/mcp.json.github/agents/playwright-testing.md.github/copilot-instructions.mdBenefits
This integration will help developers verify visual and accessibility aspects of UI components efficiently.