Use official Playwright MCP server in .vscode/mcp.json (#203)#204
Open
nnoce14 wants to merge 17 commits into
Open
Use official Playwright MCP server in .vscode/mcp.json (#203)#204nnoce14 wants to merge 17 commits into
nnoce14 wants to merge 17 commits into
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
Reviewer's GuideIntegrates the official Playwright MCP server for both local development and CI by adding MCP npm scripts and config, wiring it into the Copilot setup workflow, documenting usage, bumping pnpm and Playwright tooling, increasing SonarScanner Node memory, and updating axios via overrides. Sequence diagram for CI workflow starting and validating Playwright MCP serversequenceDiagram
participant CI as GitHub_Actions_workflow
participant Pnpm as pnpm_CLI
participant Installer as install-config_js
participant FS as Filesystem
participant MCP as Playwright_MCP_server
participant Net as Network_checks_curl_ss
CI->>Pnpm: run mcp:install-config -- --force
Pnpm->>Installer: node .github/mcp/install-config.js --force
Installer->>FS: check exists .copilot/mcp-config.json
FS-->>Installer: exists
Installer->>FS: ensure ~/.copilot directory
Installer->>FS: optional backup existing mcp-config.json (skipped with --force)
Installer->>FS: copy repo config to ~/.copilot/mcp-config.json
Installer-->>CI: exit 0
CI->>Pnpm: run mcp:start (background)
Pnpm->>MCP: start @playwright/mcp@0.0.70 --port 8931 --headless
MCP-->>CI: listening on :8931
CI->>Net: poll port 8931 using ss up to 30s
Net-->>CI: port open
CI->>Net: optional curl http://localhost:8931/
Net-->>CI: success or fallback to port check
CI-->>CI: proceed to tests and SonarCloud analysis
Class diagram for install-config.js MCP config installerclassDiagram
class InstallConfigScript {
- boolean force
- string source
+ printUsage()
+ exists(path)
+ main()
}
class FsPromises {
+ access(path)
+ mkdir(path, options)
+ copyFile(src, dest)
}
class PathModule {
+ resolve(cwd, target)
+ join(base, segment)
}
class OsModule {
+ homedir()
}
class ProcessObject {
+ argv
+ exit(code)
}
InstallConfigScript --> FsPromises : uses
InstallConfigScript --> PathModule : uses
InstallConfigScript --> OsModule : uses
InstallConfigScript --> ProcessObject : uses
class McpConfigFiles {
+ string repoConfigPath
+ string userConfigDir
+ string userConfigPath
+ string backupPath
}
InstallConfigScript --> McpConfigFiles : reads_writes
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…tructions over hardcoded scripts\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Member
Author
|
@sourcery-ai review |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- The MCP scripts use
npx @playwright/mcp@latestwhileplaywrightis pinned to1.59.0; consider aligning these versions or documenting the rationale to avoid subtle incompatibilities over time. - The
mcp:playwright:startscript allows all hosts and origins (--allowed-hosts='*' --allowed-origins='*'); if this is intended only for local development, consider tightening these or clearly scoping them to dev-only usage to reduce accidental exposure. - The new MCP-related scripts and config (under
.github/mcpand.copilot) are wired from the rootpackage.json; if MCP usage is only relevant for a subset of packages, consider localizing these scripts/configs to that workspace to keep the root tooling surface minimal.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The MCP scripts use `npx @playwright/mcp@latest` while `playwright` is pinned to `1.59.0`; consider aligning these versions or documenting the rationale to avoid subtle incompatibilities over time.
- The `mcp:playwright:start` script allows all hosts and origins (`--allowed-hosts='*' --allowed-origins='*'`); if this is intended only for local development, consider tightening these or clearly scoping them to dev-only usage to reduce accidental exposure.
- The new MCP-related scripts and config (under `.github/mcp` and `.copilot`) are wired from the root `package.json`; if MCP usage is only relevant for a subset of packages, consider localizing these scripts/configs to that workspace to keep the root tooling surface minimal.
## Individual Comments
### Comment 1
<location path="package.json" line_range="21" />
<code_context>
"proxy:start": "portless proxy start -p 1355 --https",
+ "mcp:playwright:start": "npx @playwright/mcp@latest --port 8931 --headless --ignore-https-errors --allowed-hosts='*' --allowed-origins='*'",
+ "mcp:playwright:stdio": "npx @playwright/mcp@latest",
+ "mcp:install-config": "mkdir -p ~/.copilot && cp ./.copilot/mcp-config.json ~/.copilot/mcp-config.json",
"format": "turbo run format",
"gen": "graphql-codegen --config codegen.yml",
</code_context>
<issue_to_address>
**issue (bug_risk):** The `mcp:install-config` script is not cross-platform and may overwrite existing local config without warning.
This script relies on `mkdir -p`, `cp`, and `~`, so it will fail on Windows and non-POSIX shells. It also overwrites `~/.copilot/mcp-config.json` on every run, clobbering any local changes. If this is intended for general contributor use, consider a portable implementation (e.g., a small Node script) and add logic to preserve or back up an existing config instead of blindly overwriting it.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
…setup steps\n\nUse pnpm dlx and update Playwright cache key to pnpm-lock.yaml\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…ate Node-based installer to safely copy .copilot/mcp-config.json into ~/.copilot (backs up existing file). Update package.json script and CI workflow to call it with --force in runners.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…ure pnpm/action-setup uses 10.30.1 to match package.json packageManager and avoid ERR_PNPM_BAD_PM_VERSION.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…cts (combine .vscode/mcp.json, regenerate pnpm-lock.yaml, patch install-config.js) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Member
Author
|
@sourcery-ai review |
Contributor
There was a problem hiding this comment.
Hey - I've found 3 issues, and left some high level feedback:
- The workflows and package.json scripts use
@playwright/mcp@latest; consider pinning a specific version to avoid unexpected CI or local failures when a breaking release ships. - In
.github/mcp/install-config.jsyou're mixingfs/promiseswith synchronousfscalls; consolidating on the async API (e.g.,fs.accessinstead ofexistsSync) would keep the script consistent and easier to reason about. - The "Wait for MCP readiness" step in
copilot-setup-steps.ymlexits successfully even if the MCP never becomes reachable; consider failing the job explicitly when the loop times out so downstream steps don't run against an unavailable server.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The workflows and package.json scripts use `@playwright/mcp@latest`; consider pinning a specific version to avoid unexpected CI or local failures when a breaking release ships.
- In `.github/mcp/install-config.js` you're mixing `fs/promises` with synchronous `fs` calls; consolidating on the async API (e.g., `fs.access` instead of `existsSync`) would keep the script consistent and easier to reason about.
- The "Wait for MCP readiness" step in `copilot-setup-steps.yml` exits successfully even if the MCP never becomes reachable; consider failing the job explicitly when the loop times out so downstream steps don't run against an unavailable server.
## Individual Comments
### Comment 1
<location path=".github/workflows/copilot-setup-steps.yml" line_range="96-103" />
<code_context>
+ env:
+ PLAYWRIGHT_BROWSERS_PATH: /home/runner/.cache/ms-playwright
+
+ - name: Wait for MCP readiness
+ run: |
+ for i in $(seq 1 30); do
+ if curl -sS http://localhost:8931/ >/dev/null 2>&1 || ss -ltn | grep -q ':8931'; then
+ echo "Playwright MCP seems ready"
+ break
+ fi
+ sleep 1
+ done
+
</code_context>
<issue_to_address>
**issue (bug_risk):** Consider failing the job if MCP never becomes ready instead of silently continuing.
Right now the loop exits successfully even if MCP never starts listening, so later steps may run against an unavailable service. Consider exiting with a non‑zero status after the loop when readiness is not detected so this failure is surfaced immediately.
</issue_to_address>
### Comment 2
<location path=".github/mcp/install-config.js" line_range="21-22" />
<code_context>
+ const a = argv[i];
+ if (a === '--force' || a === '-f') {
+ force = true;
+ } else if (a === '--source' || a === '-s') {
+ source = argv[i + 1];
+ i++;
+ } else if (a === '--help' || a === '-h') {
</code_context>
<issue_to_address>
**issue:** Validate that `--source` is followed by a value to avoid unexpected behavior.
If `--source`/`-s` is last or the next arg is another flag, `argv[i + 1]` will be `undefined` and `path.resolve(process.cwd(), source)` will fall back to the cwd instead of a user-specified path. Please guard against this by ensuring `argv[i + 1]` exists and isn’t another flag (starts with `-`), and exit with an error if the value is missing.
</issue_to_address>
### Comment 3
<location path="package.json" line_range="19" />
<code_context>
"start": "turbo run build && concurrently --kill-others-on-fail \"pnpm run start:api\" \"pnpm run start:ui-community\"",
"proxy:stop": "portless proxy stop || true",
"proxy:start": "portless proxy start -p 1355 --https",
+ "mcp:playwright:start": "npx @playwright/mcp@latest --port 8931 --headless --ignore-https-errors --allowed-hosts='*' --allowed-origins='*'",
+ "mcp:playwright:stdio": "npx @playwright/mcp@latest",
+ "mcp:install-config": "node .github/mcp/install-config.js",
</code_context>
<issue_to_address>
**🚨 question (security):** Revisit `--allowed-hosts='*'` and `--allowed-origins='*'` to ensure the MCP exposure surface is intentional.
Using fully wildcarded hosts and origins is convenient but expands the attack surface if this port is ever exposed beyond a trusted local context (e.g., shared dev machines or forwarded ports). If this is intended for local use only, consider narrowing to localhost/specific origins or add a brief note explaining why `*` is acceptable here.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
…thored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Member
Author
|
@sourcery-ai review |
SourceryAI
reviewed
Apr 9, 2026
SourceryAI
left a comment
SourceryAI
left a comment
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- The GitHub Actions step that starts the Playwright MCP server duplicates the
pnpm dlx @playwright/mcp@0.0.70 ...command already defined in themcp:playwright:startscript; consider calling the npm script from the workflow so the command stays in sync in one place. - In the
Wait for MCP readinessstep, the error branch echoes 'MCP log (last 200 lines):' but still usessed -n '1,200p' mcp.log; update this to tail the file or use the correct sed range so the message matches the behavior.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The GitHub Actions step that starts the Playwright MCP server duplicates the `pnpm dlx @playwright/mcp@0.0.70 ...` command already defined in the `mcp:playwright:start` script; consider calling the npm script from the workflow so the command stays in sync in one place.
- In the `Wait for MCP readiness` step, the error branch echoes 'MCP log (last 200 lines):' but still uses `sed -n '1,200p' mcp.log`; update this to tail the file or use the correct sed range so the message matches the behavior.Hi @nnoce14! 👋
Thanks for trying out Sourcery by commenting with @sourcery-ai review! 🚀
Install the sourcery-ai bot to get automatic code reviews on every pull request ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Contributor
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- The Playwright MCP invocation flags and version (
@playwright/mcp@0.0.70, port 8931, headless, allowed-hosts/origins) are duplicated across the GitHub workflow and thepackage.jsonscripts; consider centralizing this via a single npm script (and possibly a shared config/constant) so future updates don’t drift between CI and local tooling. - The MCP config installer (
.github/mcp/install-config.js) currently exits on any unknown CLI flag, which can make it brittle when invoked from wrappers; consider either ignoring unknown flags or printing a more permissive help message that allows passthrough arguments to avoid accidental failures.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The Playwright MCP invocation flags and version (`@playwright/mcp@0.0.70`, port 8931, headless, allowed-hosts/origins) are duplicated across the GitHub workflow and the `package.json` scripts; consider centralizing this via a single npm script (and possibly a shared config/constant) so future updates don’t drift between CI and local tooling.
- The MCP config installer (`.github/mcp/install-config.js`) currently exits on any unknown CLI flag, which can make it brittle when invoked from wrappers; consider either ignoring unknown flags or printing a more permissive help message that allows passthrough arguments to avoid accidental failures.
## Individual Comments
### Comment 1
<location path=".github/workflows/copilot-setup-steps.yml" line_range="109-92" />
<code_context>
+ done
+ if [ "$ready" -ne 1 ]; then
+ echo "Playwright MCP did not become ready after 30s"
+ echo "MCP log (last 200 lines):"
+ sed -n '1,200p' mcp.log || true
+ exit 1
+ fi
</code_context>
<issue_to_address>
**nitpick (bug_risk):** The log message says "last 200 lines" but the command prints the first 200 lines.
Here you print `"MCP log (last 200 lines):"` but use `sed -n '1,200p' mcp.log`, which prints the first 200 lines. If you want the tail (which is usually more helpful on failure), use `tail -n 200 mcp.log || true` or update the `sed` range/message so they match.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
…aller; tail logs on timeout Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Member
Author
|
@sourcery-ai review |
Contributor
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- The MCP scripts hardcode
@playwright/mcp@0.0.70while the PR description and expected usage reference@playwright/mcp@latest; consider centralizing this version (e.g., via an npm alias or a single env/config value) to avoid drift between scripts, docs, and.vscode/mcp.json.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The MCP scripts hardcode `@playwright/mcp@0.0.70` while the PR description and expected usage reference `@playwright/mcp@latest`; consider centralizing this version (e.g., via an npm alias or a single env/config value) to avoid drift between scripts, docs, and `.vscode/mcp.json`.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
gidich
previously approved these changes
Apr 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Updates .vscode/mcp.json to use the official Playwright MCP server (@playwright/mcp@0.0.70) per https://playwright.dev/docs/getting-started-mcp. This enables local MCP clients to run Playwright MCP for agent-driven browser automation.\n\nNo application code changes.\n\nTesting steps:\n1. Start UI: pnpm --filter @apps/ui-community dev\n2. Start MCP server: npx @playwright/mcp@0.0.70 --port 8931\n3. Configure your MCP client to use http://localhost:8931/mcp or rely on .vscode/mcp.json\n\nCo-authored-by: Copilot 223556219+Copilot@users.noreply.github.com
Summary by Sourcery
Integrate the official Playwright MCP server into the repo and CI, including shared MCP configuration and supporting scripts.
New Features:
Enhancements:
CI:
Documentation: