Skip to content

chore: adopt Playwright CLI over MCP for browser automation#46

Merged
michellepace merged 6 commits into
mainfrom
chore/adopt-playwright-cli-over-mcp
May 14, 2026
Merged

chore: adopt Playwright CLI over MCP for browser automation#46
michellepace merged 6 commits into
mainfrom
chore/adopt-playwright-cli-over-mcp

Conversation

@michellepace

Copy link
Copy Markdown
Owner

Summary

  • Switch browser automation from Playwright MCP server to the Playwright CLI: remove @playwright/mcp from .mcp.json, drop its permissions, add Bash(playwright-cli *), and version-control browser config in .playwright/cli.config.json (Chromium, mobile 390×844, headless).
  • Add a playwright-cli skill (SKILL.md + 10 reference docs covering element attributes, playwright-tests integration, request mocking, running code, session/storage state, spec-driven testing, test generation, tracing, video recording) and a research note (.xdocs/own/playwright-cli-over-mcp.md) explaining the trade-off.
  • Bundle adjacent cleanup: bump deps (next 16.2.6, react 19.2.6, biome 2.4.15, @playwright/test 1.60.0, tailwindcss 4.3.0, vitest 4.1.6, etc.), drop the now-redundant baseline-browser-mapping pin, allow bare URLs in markdown (MD034), exclude vendor skill content from markdownlint, and tighten CLAUDE.md tech-stack entries.

Test plan

  • npm install succeeds against the regenerated lockfile
  • npm run check passes (Biome lint + tsc typecheck, 26 files, 0 errors)
  • npm run test passes (4 Vitest unit + 2 Playwright e2e, Chromium + Mobile Safari)
  • npm run lint:md passes (after excluding .claude/skills/** as vendor content)
  • .mcp.json no longer lists Playwright MCP (Ref server remains)
  • Spot-check playwright-cli open http://localhost:3000 against a running dev server

🤖 Generated with Claude Code

michellepace and others added 6 commits April 27, 2026 02:49
- Disable markdownlint MD034 so URLs need not be wrapped in angle brackets
- Unwrap the one existing `<...>` URL in agentmd-over-skills.md to comply

Bare URLs render identically on GitHub and remove friction when pasting
links into research notes; the single existing offender is corrected so
the lint baseline stays clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Captures the preliminary research informing the upcoming switch from
Playwright MCP to the Playwright CLI for browser-driven Claude Code
workflows on this project.

Contents:
- Side-by-side comparison of capability surfaces, calling conventions,
  and token economics
- Decision matrix mapping common Next.js iteration tasks to the
  recommended surface
- Migration steps, plus notes on when MCP still wins (chat clients,
  headed-first ergonomics, existing investment)

Filed under .xdocs/own/ as a reference document; no code or config
changes accompany it. Subsequent commits on this branch will action
the migration itself.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…g pin

Dependency updates:
- next 16.2.4 → 16.2.6
- react / react-dom 19.2.5 → 19.2.6
- @biomejs/biome 2.4.13 → 2.4.15 (biome.json schema ref updated)
- @playwright/test 1.59.1 → 1.60.0
- @tailwindcss/postcss 4.2.4 → 4.3.0; tailwindcss 4.2.2 → 4.3.0
- @types/node 25.6.0 → 25.7.0
- jsdom 29.0.2 → 29.1.1
- vitest 4.1.5 → 4.1.6

Removed devDependency:
- baseline-browser-mapping was pinned without documented reason in
  PR #12 (Dec 2025); next@16.2.6 and browserslist already pull it
  in as a transitive dependency, making the explicit pin redundant.

Clean install verified: `npm run check` and `npm run test` both pass
against the regenerated lockfile.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Browser tooling:
- Remove @playwright/mcp server from .mcp.json
- Drop mcp__playwright__browser_* permissions from .claude/settings.json
- Add Bash(playwright-cli *) permission to .claude/settings.json
- Add .playwright/cli.config.json (Chromium/Chrome, mobile viewport
  390×844, headless, TypeScript codegen)
- Track cli.config.json via .gitignore negation whilst ignoring artefacts

Playwright CLI skill:
- Add .claude/skills/playwright-cli/SKILL.md — core skill definition
  with quick-start and full command reference
- Add 10 reference docs covering element attributes, playwright-tests
  integration, request mocking, running code, session management,
  spec-driven testing, storage state, test generation, tracing, and
  video recording

README:
- Expand setup steps to include global @playwright/cli install and
  playwright-cli install --skills bootstrap
- Update .mcp.json table entry to reflect Playwright MCP removal

Playwright CLI avoids a persistent MCP process and the npx cold-start
on first use. Browser config is version-controlled in cli.config.json
rather than passed as MCP server flags.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Bump Tailwind 4.2 → 4.3, Playwright 1.59 → 1.60
- Add centralised theme location (app/globals.css) to Styling entry
- Remove known-tool parentheticals from Quality and Deployment entries
- Add playwright-cli example to Key Commands

Adds signal where it's useful (theme token location) and removes
prose that restates what tool names already imply.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Vendor skill content lives in .claude/skills/ but is not maintained
in this repo, so linting it generates noise without value. Adding it
to the markdownlint-cli2 ignore list keeps lint output focused on
files we actually own.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel

vercel Bot commented May 14, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nextjs-base Ready Ready Preview, Comment May 14, 2026 7:26pm

@coderabbitai

coderabbitai Bot commented May 14, 2026

Copy link
Copy Markdown

Warning

Rate limit exceeded

@michellepace has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 56 minutes and 49 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 5b9131b5-9f8a-4368-8d66-6bc78efc6e29

📥 Commits

Reviewing files that changed from the base of the PR and between cff78ad and 11870dd.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (22)
  • .claude/CLAUDE.md
  • .claude/settings.json
  • .claude/skills/playwright-cli/SKILL.md
  • .claude/skills/playwright-cli/references/element-attributes.md
  • .claude/skills/playwright-cli/references/playwright-tests.md
  • .claude/skills/playwright-cli/references/request-mocking.md
  • .claude/skills/playwright-cli/references/running-code.md
  • .claude/skills/playwright-cli/references/session-management.md
  • .claude/skills/playwright-cli/references/spec-driven-testing.md
  • .claude/skills/playwright-cli/references/storage-state.md
  • .claude/skills/playwright-cli/references/test-generation.md
  • .claude/skills/playwright-cli/references/tracing.md
  • .claude/skills/playwright-cli/references/video-recording.md
  • .gitignore
  • .markdownlint-cli2.yaml
  • .mcp.json
  • .playwright/cli.config.json
  • .xdocs/own/agentmd-over-skills.md
  • .xdocs/own/playwright-cli-over-mcp.md
  • README.md
  • biome.json
  • package.json
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch chore/adopt-playwright-cli-over-mcp

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@michellepace michellepace merged commit 6defe58 into main May 14, 2026
7 checks passed
@michellepace michellepace deleted the chore/adopt-playwright-cli-over-mcp branch May 14, 2026 19:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant