with one click
playwright
// Playwright浏览器自动化。通过MCP控制真实浏览器:导航、点击、填表、截图、提取数据。当用户说"Playwright"、"浏览器自动化"、"真实浏览器"时使用。
// Playwright浏览器自动化。通过MCP控制真实浏览器:导航、点击、填表、截图、提取数据。当用户说"Playwright"、"浏览器自动化"、"真实浏览器"时使用。
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | playwright |
| slug | playwright |
| version | 1.0.3 |
| homepage | https://clawic.com/skills/playwright |
| description | Playwright浏览器自动化。通过MCP控制真实浏览器:导航、点击、填表、截图、提取数据。当用户说"Playwright"、"浏览器自动化"、"真实浏览器"时使用。 |
| changelog | Clarified the MCP-first browser automation flow and improved quick-start guidance for forms, screenshots, and extraction. |
| triggers | ["playwright","浏览器测试"] |
Use this skill for real browser tasks: JS-rendered pages, multi-step forms, screenshots or PDFs, UI debugging, Playwright test authoring, MCP-driven browser control, and structured extraction from rendered pages.
Prefer it when static fetch is insufficient or when the task depends on browser events, visible DOM state, authentication context, uploads or downloads, or user-facing rendering.
If the user mainly wants the agent to drive a browser with simple actions like navigate, click, fill, screenshot, download, or extract, treat MCP as a first-class path.
Use direct Playwright for scripts and tests. Use MCP when browser tools are already in the loop, the user explicitly wants MCP, or the fastest path is browser actions rather than writing new automation code.
Primary fit is repo-owned browser work: tests, debugging, repros, screenshots, and deterministic automation. Treat rendered-page extraction as a secondary use case, not the default identity.
This skill is instruction-only. It does not create local memory, setup folders, or persistent profiles by default.
Load only the smallest reference file needed for the task. Keep auth state temporary unless the repository already standardizes it and the user explicitly wants browser-session reuse.
npx @playwright/mcp --headless
Use this path when the agent already has browser tools available or the user wants browser automation without writing new Playwright code.
Typical Playwright MCP tool actions include:
browser_navigate for opening a pagebrowser_click and browser_press for interactionbrowser_type and browser_select_option for formsbrowser_snapshot and browser_evaluate for inspection and extractionbrowser_choose_file for uploads| Goal | Typical MCP-style action |
|---|---|
| Open and inspect a site | navigate, wait, inspect, screenshot |
| Complete a form | navigate, click, fill, select, submit |
| Capture evidence | screenshot, PDF, download, trace |
| Pull structured page data | navigate, wait for rendered state, extract |
| Reproduce a UI bug | headed run, trace, console or network inspection |
npx playwright test
npx playwright test --headed
npx playwright test --trace on
npx playwright codegen https://example.com
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'page.png', fullPage: true });
await browser.close();
})();
| Topic | File |
|---|---|
| Selector strategy and frame handling | selectors.md |
| Failure analysis, traces, logs, and headed runs | debugging.md |
| Test architecture, mocks, auth, and assertions | testing.md |
| CI defaults, retries, workers, and failure artifacts | ci-cd.md |
| Rendered-page extraction, pagination, and respectful throttling | scraping.md |
| Situation | Best path | Why |
|---|---|---|
| Static HTML or a simple HTTP response is enough | Use a cheaper fetch path first | Faster, cheaper, less brittle |
| You need a reliable first draft of selectors or flows | Start with codegen or a headed exploratory run | Faster than guessing selectors from source or stale DOM |
| Local app, staging app, or repo-owned E2E suite | Use @playwright/test | Best fit for repeatable tests and assertions |
| One-off browser automation, screenshots, downloads, or rendered extraction | Use direct Playwright API | Simple, explicit, and easy to debug in code |
Agent/browser-tool workflow already depends on browser_* tools or the user wants no-code browser control | Use Playwright MCP | Fastest path for navigate-click-fill-screenshot workflows |
| CI failures, flake, or environment drift | Start with debugging.md and ci-cd.md | Traces and artifacts matter more than new code |
codegen, headed mode, or traces to discover stable locators instead of guessing from source or stale DOM.first(), last(), or nth() unless position is the actual behavior under test.expect, URL waits, response waits, and explicit app-ready signals over generic timing guesses.first(), last(), or nth() to silence ambiguity -> the automation works once and then flakes.force: true before understanding overlays, disabled state, or actionability -> the test hides a real bug.networkidle for chatty SPAs -> analytics, polling, or sockets keep the page "busy" even when the UI is ready.| Endpoint | Data Sent | Purpose |
|---|---|---|
| User-requested web origins | Browser requests, form input, cookies, uploads, and page interactions required by the task | Automation, testing, screenshots, PDFs, and rendered extraction |
https://registry.npmjs.org | Package metadata and tarballs during optional installation | Install Playwright or Playwright MCP |
No other data is sent externally.
Data that leaves your machine:
Data that stays local:
This skill does NOT:
By using this skill, browser requests go to the websites you automate and optional package downloads go through npm. Only install if you trust those services and the sites involved in your workflow.
Install with clawhub install <slug> if user confirms:
web - HTTP-first investigation before escalating to a real browser.scrape - Broader extraction workflows when browser automation is not the main challenge.screenshots - Capture and polish visual artifacts after browser work.multi-engine-web-search - Find and shortlist target pages before automating them.clawhub star playwrightclawhub sync