chore: adopt Playwright CLI skill over Playwright MCP#55
Conversation
Dependencies: - @biomejs/biome 2.4.10 → 2.4.11 - baseline-browser-mapping 2.10.16 → 2.10.17 - lucide-react 1.7.0 → 1.8.0 - vitest 4.1.3 → 4.1.4 Docs: - README.md: TypeScript 5 → 6 (matches installed 6.0.2) Routine patch-level bumps. README version was stale since the TypeScript 6 upgrade. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Coding practices: - Add Tailwind conventions: centralised theming via tokens, mobile-first responsive design, utility-first composition - Add guidance to compose UI from `components/ui/` primitives Breaking changes: - Group items under Tailwind v4, Next.js 16, and `cacheComponents` sub-headings for scannability instead of a flat bullet list Other updates: - Bump styling entry to Tailwind CSS 4.2 and reference `app/globals.css` - Correct ClerkProvider path to `components/providers/clerk-provider.tsx` - Trim sign-in/sign-up descriptions and remove the "Common Additions" section as it no longer reflects this project's direction Keeps the file focused on current conventions a contributor needs day-to-day, removing stale template-era guidance.
…ct dep Dependency updates: - next 16.2.3 → 16.2.6, react/react-dom 19.2.5 → 19.2.6 - @clerk/nextjs 7.0.12 → 7.3.3, @clerk/ui 1.5.0 → 1.9.1, @clerk/testing 2.0.12 → 2.0.27 - tailwindcss 4.2.2 → 4.3.0, @tailwindcss/postcss 4.2.2 → 4.3.0 - @playwright/test 1.59.1 → 1.60.0, vitest 4.1.4 → 4.1.6 - shadcn 4.2.0 → 4.7.0, lucide-react 1.8.0 → 1.16.0 - @biomejs/biome 2.4.11 → 2.4.15, typescript 6.0.2 → 6.0.3 - Remaining patch bumps: @types/node, dotenv, jsdom, lefthook, markdownlint-cli2, tailwind-merge, @rolldown/plugin-babel Removed: - baseline-browser-mapping from devDependencies — already pulled in transitively by next@16.2.6 and shadcn→browserslist; no source files import it and no scripts invoke its CLI biome.json: update \$schema URL from 2.4.10 → 2.4.15 to match CLI version. Verified with a clean install (rm node_modules + npm ci) followed by the full test gauntlet: lint, typecheck, 44 unit tests, production build, and 17 E2E specs — all pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
MCP server removal: - Remove `@playwright/mcp` from `.mcp.json` - Drop all 16 `mcp__playwright__*` allow entries from settings.json Playwright CLI skill setup: - Add `.claude/skills/playwright-cli/` — SKILL.md with full command reference plus 10 topic-specific reference docs (session management, test generation, tracing, video, request mocking, storage state, etc.) - Add `Bash(playwright-cli *)` to settings.json allow list - Add `.playwright/cli.config.json` — Chromium/Chrome, mobile viewport (390×844), 60 s navigation timeout, 5 s action timeout - Update `.gitignore` to track the config while ignoring CLI output dir - Update README with one-time install steps; correct `.mcp.json` table entry to reflect remaining servers (shadcn, Ref) The Playwright MCP required a persistent stdio process and exposed 16 individual tool permissions. The CLI skill replaces this with a single `Bash(playwright-cli *)` allow entry and no background server, keeping browser control within the established skill boundary. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Drop `@latest` from all `npx shadcn` invocations in CLAUDE.md and .mcp.json. shadcn is a declared devDependency pinned by the lockfile; forcing the registry's `latest` tag bypasses that pin and adds an unnecessary network round-trip on every call. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Tech Stack: - Tailwind 4.2 → 4.3, Playwright 1.59 → 1.60 - Trim verbose descriptions from Biome, Lefthook, and Vercel entries Key Commands: - Remove `npm run analyse`; add `playwright-cli open` as the browser automation entry point Keeps tech stack versions in sync with the dependency bumps on this branch and makes the playwright-cli skill discoverable following the removal of the Playwright MCP. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
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 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 configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
WalkthroughThis PR introduces comprehensive Playwright CLI support to the devflow project by adding extensive skill documentation, configuring Claude Code permissions, updating the MCP configuration, and refreshing project dependencies to TypeScript v6 and newer tooling versions. ChangesPlaywright CLI Skill and Configuration Integration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.claude/skills/playwright-cli/references/session-management.md:
- Line 130: Update the supported channels sentence to include "chromium"
alongside the existing entries; locate the line that currently reads "Supported
channels: `chrome`, `chrome-beta`, `chrome-dev`, `chrome-canary`, `msedge`,
`msedge-beta`, `msedge-dev`, `msedge-canary`" in session-management.md and add
`chromium` to that comma-separated list so it reflects Playwright's bundled
Chromium channel.
In @.claude/skills/playwright-cli/references/storage-state.md:
- Around line 212-217: Add a browser compatibility note near the example that
calls indexedDB.databases() (the snippet using playwright-cli run-code and the
page.evaluate callback) stating that indexedDB.databases() is supported only in
modern browsers (e.g., Chrome 72+, Edge 79+, Firefox 126+, Safari 14+) and may
not work in older browser versions, but current Playwright-provided browsers
include this method; place the note adjacency to the example so readers see the
caveat when using indexedDB.databases().
In @.claude/skills/playwright-cli/references/test-generation.md:
- Around line 90-91: Update the two sentences to include the missing definite
articles: change "make sure that generated locator" to "make sure that the
generated locator" and change "Snapshot to be matched" to "The snapshot to be
matched" in the test-generation.md content so the wording reads correctly; look
for the exact phrases "make sure that generated locator" and "Snapshot to be
matched" to locate the places to edit.
In @.claude/skills/playwright-cli/SKILL.md:
- Around line 196-198: Add a blank line separator after the fenced code block
containing "playwright-cli list --json" so the following heading "## Open
parameters" is preceded by a blank line; locate the fenced block with the
command and ensure there is an empty line between the closing ``` and the "##
Open parameters" heading to satisfy the markdown linter.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 0fd46b9d-7078-4b82-ab52-7c157f9b2745
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (19)
.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.mcp.json.playwright/cli.config.jsonREADME.mdbiome.jsonpackage.json
| playwright-cli attach --cdp=msedge-dev | ||
| ``` | ||
|
|
||
| Supported channels: `chrome`, `chrome-beta`, `chrome-dev`, `chrome-canary`, `msedge`, `msedge-beta`, `msedge-dev`, `msedge-canary`. |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
What are the valid browser channel names for Playwright connectOverCDP?
💡 Result:
The valid browser channel names for Playwright's connectOverCDP (as an optional parameter in the options object, added in v1.14 and enhanced in recent updates to resolve channel names to WebSocket endpoints via DevToolsActivePort) are the standard Chromium-based branded browser channels: "chrome", "chrome-beta", "chrome-dev", "chrome-canary", "msedge", "msedge-beta", "msedge-dev", "msedge-canary". "chromium" may also be supported for the open-source build with new headless mode, but primarily branded channels are used for connecting to existing installed browsers.[1][2][3][4][1]
Citations:
- 1: feat(chromium): resolve channel names in connectOverCDP microsoft/playwright#40177
- 2: https://playwright.dev/docs/api/class-browsertype
- 3: https://playwright.dev/agent-cli/commands/attach
- 4: https://playwright.help/docs/next/browsers
🏁 Script executed:
#!/bin/bash
# Search for references to supported channels or connectOverCDP in the documentation and codebase
rg -i "chromium|channel" ".claude/skills/playwright-cli/" -A 2 -B 2 | head -50Repository: michellepace/devflow
Length of output: 2097
🌐 Web query:
Playwright browser channel names chromium connectOverCDP valid channels list
💡 Result:
The valid browser channel names for Playwright's Chromium (used in browserType.launch({ channel: '...' }) and now supported in connectOverCDP) are: "chromium", "chrome", "chrome-beta", "chrome-dev", "chrome-canary", "msedge", "msedge-beta", "msedge-dev", "msedge-canary".[1][2][3][4][5][6][7] "chromium" opts into the new headless mode using Playwright's bundled Chromium.[1][3] The branded channels ("chrome" etc.) connect to installed Google Chrome or Microsoft Edge browsers on the system.[3][4] For connectOverCDP specifically (browserType.connectOverCDP(endpointURL, { channel?: '...' })), recent updates (PR #40177 from April 2026) allow passing channel names directly instead of a full endpointURL. Playwright resolves the channel to the browser's DevToolsActivePort file in the user data directory to find the WebSocket endpoint. This works on Linux, macOS, and Windows for all listed channels.[5] Official docs confirm channel option availability in connectOverCDP options alongside endpointURL (use channel when you want auto-resolution).[6][8][9][7] Playwright CLI also supports --cdp=channel for attachment.[10]
Citations:
- 1: https://playwright.dev/docs/next/api/class-browsertype
- 2: https://playwright.dev/docs/api/class-browsertype
- 3: https://playwright.dev/docs/browsers
- 4: https://playwright.dev/python/docs/browsers
- 5: feat(chromium): resolve channel names in connectOverCDP microsoft/playwright#40177
- 6: https://playwright.dev/docs/api/class-browsertype?_highlight=launch
- 7: https://playwright.dev/dotnet/docs/next/api/class-browsertype
- 8: https://biorate.github.io/core/interfaces/playwright.BrowserType.html
- 9: https://www.cuketest.com/playwright/docs/api/class-browsertype/index
- 10: https://playwright.dev/agent-cli/commands/attach
Add chromium to the list of supported channels.
The supported channels list is incomplete. In addition to chrome, chrome-beta, chrome-dev, chrome-canary, msedge, msedge-beta, msedge-dev, and msedge-canary, Playwright also supports the chromium channel, which connects to Playwright's bundled Chromium build with the new headless mode.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.claude/skills/playwright-cli/references/session-management.md at line 130,
Update the supported channels sentence to include "chromium" alongside the
existing entries; locate the line that currently reads "Supported channels:
`chrome`, `chrome-beta`, `chrome-dev`, `chrome-canary`, `msedge`, `msedge-beta`,
`msedge-dev`, `msedge-canary`" in session-management.md and add `chromium` to
that comma-separated list so it reflects Playwright's bundled Chromium channel.
| playwright-cli run-code "async page => { | ||
| return await page.evaluate(async () => { | ||
| const databases = await indexedDB.databases(); | ||
| return databases; | ||
| }); | ||
| }" |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
🧩 Analysis chain
🌐 Web query:
Is indexedDB.databases() supported in all browsers that Playwright automates?
💡 Result:
No, indexedDB.databases is not supported in all browsers that Playwright automates. Playwright primarily automates Chromium (e.g., Chrome/Edge), Firefox, and WebKit (Safari engine).[1][2][3] The IDBFactory.databases method, which returns a promise listing available IndexedDB databases, has the following support in recent versions (as of 2026): Chrome 72+, Edge 79+, Firefox 126+, Safari 14+.[4][5] Playwright's browsers use recent versions: Chromium ahead of stable Chrome (supports since 72), recent Firefox Stable (supports since 126), and latest WebKit trunk (supports since Safari 14 equivalent).[1][6] Thus, it is supported in all.[5] However, Playwright's WebKit has had historical issues with persistent IndexedDB in some contexts (e.g., Cypress integration), but core API support exists.[7] Recent Playwright updates (2025) added IndexedDB storage state support across browsers, confirming functionality.[8][9]
Citations:
- 1: https://playwright.dev/docs/browsers
- 2: https://playwright.dev/docs/next/browsers
- 3: https://playwright.dev/python/docs/browsers
- 4: http://developer.mozilla.org/en-US/docs/Web/API/IDBFactory/databases
- 5: https://caniuse.com/mdn-api_idbfactory_databases
- 6: https://www.browserstack.com/docs/automate/playwright/browsers-and-os
- 7: IndexedDB not working on playwright-webkit cypress-io/cypress#26106
- 8: feat: recreate IndexedDB in storagestate microsoft/playwright#34591
- 9: fix(IndexedDB): don't crash on empty IDB microsoft/playwright#35779
Add browser compatibility note for indexedDB.databases().
The example uses indexedDB.databases(), which requires modern browser versions: Chrome 72+, Edge 79+, Firefox 126+ and Safari 14+. Add a note clarifying that this method may not work with older browser versions, though current Playwright browsers support it.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.claude/skills/playwright-cli/references/storage-state.md around lines 212 -
217, Add a browser compatibility note near the example that calls
indexedDB.databases() (the snippet using playwright-cli run-code and the
page.evaluate callback) stating that indexedDB.databases() is supported only in
modern browsers (e.g., Chrome 72+, Edge 79+, Firefox 126+, Safari 14+) and may
not work in older browser versions, but current Playwright-provided browsers
include this method; place the note adjacency to the example so readers see the
caveat when using indexedDB.databases().
| When asserting text content, make sure that generated locator does not contain text from the element itself. `getByTestId()` or `getByLabel()` usually work well with asserting text. When locator is text-based, prefer `toBeVisible()` instead. | ||
|
|
There was a problem hiding this comment.
Add missing articles for improved readability.
Two sentences are missing articles:
- Line 90: "make sure that generated locator" should be "make sure that the generated locator"
- Line 91: "Snapshot to be matched" should be "The snapshot to be matched"
📝 Proposed fix
-When asserting text content, make sure that generated locator does not contain text from the element itself. `getByTestId()` or `getByLabel()` usually work well with asserting text. When locator is text-based, prefer `toBeVisible()` instead.
+When asserting text content, make sure that the generated locator does not contain text from the element itself. `getByTestId()` or `getByLabel()` usually work well with asserting text. When locator is text-based, prefer `toBeVisible()` instead.
-Snapshot to be matched does not have to contain all the information - only capture what's necessary for the assertion. You can use regular expressions for unstable values.
+The snapshot to be matched does not have to contain all the information - only capture what's necessary for the assertion. You can use regular expressions for unstable values.🧰 Tools
🪛 LanguageTool
[uncategorized] ~90-~90: Possible missing article found.
Context: ... asserting text content, make sure that generated locator does not contain text from the ...
(AI_HYDRA_LEO_MISSING_THE)
[uncategorized] ~91-~91: Possible missing article found.
Context: ...based, prefer toBeVisible() instead. Snapshot to be matched does not have to contain ...
(AI_HYDRA_LEO_MISSING_THE)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.claude/skills/playwright-cli/references/test-generation.md around lines 90
- 91, Update the two sentences to include the missing definite articles: change
"make sure that generated locator" to "make sure that the generated locator" and
change "Snapshot to be matched" to "The snapshot to be matched" in the
test-generation.md content so the wording reads correctly; look for the exact
phrases "make sure that generated locator" and "Snapshot to be matched" to
locate the places to edit.
| ```bash | ||
| playwright-cli list --json | ||
| ``` |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial | ⚡ Quick win
Add blank line before heading.
The --json option lacks a blank line separator before the following heading. This violates markdown formatting conventions flagged by the linter.
📝 Proposed formatting fix
playwright-cli --raw localstorage-get themeFor structured output wrapping every reply as JSON, pass --json
+
playwright-cli list --jsonOpen parameters
</details>
<!-- suggestion_start -->
<details>
<summary>📝 Committable suggestion</summary>
> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
```suggestion
playwright-cli --raw localstorage-get theme
🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 196-196: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.claude/skills/playwright-cli/SKILL.md around lines 196 - 198, Add a blank
line separator after the fenced code block containing "playwright-cli list
--json" so the following heading "## Open parameters" is preceded by a blank
line; locate the fenced block with the command and ensure there is an empty line
between the closing ``` and the "## Open parameters" heading to satisfy the
markdown linter.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 participant
Summary
playwright-cliskill, collapsing 16mcp__playwright__*allow entries into a singleBash(playwright-cli *)permission and removing the persistent stdio processbaseline-browser-mappingdirect dep@latestfromnpx shadcninvocations — shadcn is a pinned devDependency so the tag forces an unnecessary registry round-tripTest plan
npm run check(lint + typecheck) passesnpm run test:unit— 44 tests passnpm run test:e2e— 17 specs passnpm ciplaywright-cli open http://localhost:3000against the dev server — page loads, snapshot returnsPage Title: DevFlow(Chromium was pulled by the global@playwright/cliinstall; no extranpx playwright installstep needed)🤖 Generated with Claude Code