build(web): replace Playwright MCP with project-scoped Playwright CLI
- feat: add `.agents/skills/playwright-cli/` with complete Skill markdown, agent interface, and 9 reference files covering session management, spec-driven testing, video recording, tracing, storage, request mocking, element attributes, test debugging, and running custom code - feat: add `.playwright/cli.config.json` to configure the Playwright CLI - feat: add `web/package.json` `playwright:cli` script that resolves `playwright cli` from the repo root - build: remove `@playwright/mcp` dependency from `web/package.json` - build: set `XDG_CACHE_HOME` in `mise.toml` - build: delete `.codex/config.toml` (MCP server config) - docs: update `README.md`, `docs/web/roadmap.md`, `docs/web/decisions.md`, and `web/README.md` to reflect the new Playwright CLI approach
This commit is contained in:
+24
-22
@@ -4,8 +4,7 @@ MyGO's browser client is a pure client-side rendered application built with Reac
|
||||
|
||||
## Development
|
||||
|
||||
Install the repository-pinned Go and Node.js versions from the repository
|
||||
root:
|
||||
Install the repository-pinned Go and Node.js versions from the repository root:
|
||||
|
||||
```bash
|
||||
mise install
|
||||
@@ -32,16 +31,11 @@ mise exec -- npm ci
|
||||
mise exec -- npm run dev
|
||||
```
|
||||
|
||||
Vite proxies `/api` to `http://127.0.0.1:10086`. Production deployments must
|
||||
serve the static build and `/api/v1` from the same origin, normally through a
|
||||
reverse proxy.
|
||||
Vite proxies `/api` to `http://127.0.0.1:10086`. Production deployments must serve the static build and `/api/v1` from the same origin, normally through a reverse proxy.
|
||||
|
||||
## Browser Testing and Debugging
|
||||
|
||||
The repository uses Playwright Test for repeatable browser tests and the
|
||||
official Playwright MCP server for interactive browser debugging. Mise keeps
|
||||
the npm cache and Playwright browser binaries under the repository-level
|
||||
`.cache/` directory.
|
||||
The Web project uses the Playwright `@playwright/test` for both repeatable E2E tests and interactive browser debugging. The npm cache, browser binaries, CLI daemon state, screenshots, traces, and videos stay under the repository-level ignored `.cache/` and `.artifacts/` directories.
|
||||
|
||||
Install the Debian browser dependencies once per development container:
|
||||
|
||||
@@ -49,16 +43,15 @@ Install the Debian browser dependencies once per development container:
|
||||
mise exec -- npm run playwright:install:deps
|
||||
```
|
||||
|
||||
Install the Chromium revisions used by Playwright Test and Playwright MCP:
|
||||
Install the matching bundled Chromium revision:
|
||||
|
||||
```bash
|
||||
mise exec -- npm run playwright:install
|
||||
mise exec -- npm run playwright:install:mcp
|
||||
```
|
||||
|
||||
The two commands are intentionally separate because the locked stable test
|
||||
runner and MCP package currently depend on different Playwright revisions.
|
||||
Both revisions are stored in `.cache/ms-playwright/` and are ignored by Git.
|
||||
E2E tests and interactive debugging intentionally share the same stable Playwright core and browser revision.
|
||||
|
||||
Currently Playwright's version is locked by the only `@playwright/test` dependency. Standalone `@playwright/cli` or `@playwright/mcp` won't be added unless additional requirement.
|
||||
|
||||
Run the headless browser tests with Chromium sandboxing enabled:
|
||||
|
||||
@@ -66,10 +59,22 @@ Run the headless browser tests with Chromium sandboxing enabled:
|
||||
mise exec -- npm run test:e2e
|
||||
```
|
||||
|
||||
Codex loads the project-scoped Playwright MCP server from
|
||||
`.codex/config.toml` after the repository is trusted and Codex is restarted.
|
||||
The MCP browser uses bundled Chromium in headless, isolated, sandboxed mode;
|
||||
its generated files are kept under `.artifacts/playwright-mcp/`.
|
||||
Run interactive commands through the repository wrapper:
|
||||
|
||||
```bash
|
||||
mise exec -- npm run playwright:cli -- open http://127.0.0.1:5173/login
|
||||
mise exec -- npm run playwright:cli -- snapshot
|
||||
mise exec -- npm run playwright:cli -- console
|
||||
mise exec -- npm run playwright:cli -- requests
|
||||
mise exec -- npm run playwright:cli -- screenshot --filename=.artifacts/playwright-cli/login.png
|
||||
mise exec -- npm run playwright:cli -- close
|
||||
```
|
||||
|
||||
The wrapper changes to the repository root before invoking the stable `playwright cli` bundled with the locked test runner. This loads `.playwright/cli.config.json`, which selects bundled Chromium in headless, isolated, sandboxed mode and limits generated output under `.artifacts/playwright-cli/` to 100 MB.
|
||||
|
||||
Do not invoke `playwright-cli`, a global Playwright installation, or a floating `npx` package.
|
||||
|
||||
If the upstream CLI entry point changes, update only the `playwright:cli` npm script. Agents should follow the repository-scoped `$playwright-cli` Skill in `.agents/skills/playwright-cli/` for snapshots, sessions, network diagnosis, test debugging, and artifact handling.
|
||||
|
||||
## Checks
|
||||
|
||||
@@ -77,7 +82,4 @@ its generated files are kept under `.artifacts/playwright-mcp/`.
|
||||
mise exec -- npm run check
|
||||
```
|
||||
|
||||
The production build is emitted to `dist/` as static assets. Browser E2E tests
|
||||
are run separately because they require the browser setup above. See
|
||||
`docs/web/roadmap.md` at the repository root for architecture boundaries and
|
||||
planned dependencies.
|
||||
The production build is emitted to `dist/` as static assets. Browser E2E tests are run separately because they require the browser setup above. See `docs/web/roadmap.md` at the repository root for architecture boundaries and planned dependencies.
|
||||
|
||||
Generated
-65
@@ -16,7 +16,6 @@
|
||||
"react-router": "^8.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/mcp": "0.0.78",
|
||||
"@playwright/test": "1.61.1",
|
||||
"@tailwindcss/vite": "^4.3.2",
|
||||
"@types/node": "^24.13.2",
|
||||
@@ -583,23 +582,6 @@
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@playwright/mcp": {
|
||||
"version": "0.0.78",
|
||||
"resolved": "https://registry.npmmirror.com/@playwright/mcp/-/mcp-0.0.78.tgz",
|
||||
"integrity": "sha512-XLTUeA6mEN9sQ+hJ4dfG8EIkDbxS0K3Trc2RBkUJuf02TgE2FQRNTMtq/aJfhyRMINsRl/Ybc4sxcWLtFn4/TQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright": "1.62.0-alpha-1783623505000",
|
||||
"playwright-core": "1.62.0-alpha-1783623505000"
|
||||
},
|
||||
"bin": {
|
||||
"playwright-mcp": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@playwright/test": {
|
||||
"version": "1.61.1",
|
||||
"resolved": "https://registry.npmmirror.com/@playwright/test/-/test-1.61.1.tgz",
|
||||
@@ -2759,53 +2741,6 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright": {
|
||||
"version": "1.62.0-alpha-1783623505000",
|
||||
"resolved": "https://registry.npmmirror.com/playwright/-/playwright-1.62.0-alpha-1783623505000.tgz",
|
||||
"integrity": "sha512-6KV9h4PP3hqu4NaGdxxcijWfYh9LJcFI/R2sP4TTC4I5cFo3oRawN0ETlW5MkE3cQEgKhhoj0KUNz4sfpCT0Tg==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright-core": "1.62.0-alpha-1783623505000"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright-core": {
|
||||
"version": "1.62.0-alpha-1783623505000",
|
||||
"resolved": "https://registry.npmmirror.com/playwright-core/-/playwright-core-1.62.0-alpha-1783623505000.tgz",
|
||||
"integrity": "sha512-CPJZdsA/KGT2QQlekiV6Wt+QlQrZHVSZ6oiNtOI/bYYOIVLM8jfKGWTM4zQiyd4UN+40Cq4cA6lxmZHZbtPvJQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"playwright-core": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright/node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.5.19",
|
||||
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.19.tgz",
|
||||
|
||||
+1
-2
@@ -13,7 +13,7 @@
|
||||
"lint": "oxlint",
|
||||
"playwright:install": "playwright install chromium",
|
||||
"playwright:install:deps": "playwright install-deps chromium",
|
||||
"playwright:install:mcp": "node node_modules/playwright/cli.js install chromium",
|
||||
"playwright:cli": "cd .. && playwright cli",
|
||||
"test": "vitest run",
|
||||
"test:e2e": "playwright test",
|
||||
"typecheck": "tsc -b",
|
||||
@@ -29,7 +29,6 @@
|
||||
"react-router": "^8.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/mcp": "0.0.78",
|
||||
"@playwright/test": "1.61.1",
|
||||
"@tailwindcss/vite": "^4.3.2",
|
||||
"@types/node": "^24.13.2",
|
||||
|
||||
Reference in New Issue
Block a user