{ "schemaVersion": "1.0", "item": { "slug": "playwright", "name": "Playwright (Automation + MCP + Scraper)", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/ivangdavila/playwright", "canonicalUrl": "https://clawhub.ai/ivangdavila/playwright", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/playwright", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=playwright", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "SKILL.md", "ci-cd.md", "debugging.md", "scraping.md", "selectors.md", "testing.md" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run." } ] }, "sourceHealth": { "source": "tencent", "slug": "playwright", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-07T04:38:29.137Z", "expiresAt": "2026-05-14T04:38:29.137Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=playwright", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=playwright", "contentDisposition": "attachment; filename=\"playwright-1.0.3.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "playwright" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/playwright" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/playwright", "agentPageUrl": "https://openagent3.xyz/skills/playwright/agent", "manifestUrl": "https://openagent3.xyz/skills/playwright/agent.json", "briefUrl": "https://openagent3.xyz/skills/playwright/agent.md" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "When to Use", "body": "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.\n\nPrefer 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.\n\nIf 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.\n\nUse 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.\n\nPrimary 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." }, { "title": "Architecture", "body": "This skill is instruction-only. It does not create local memory, setup folders, or persistent profiles by default.\n\nLoad 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." }, { "title": "MCP browser path", "body": "npx @playwright/mcp --headless\n\nUse this path when the agent already has browser tools available or the user wants browser automation without writing new Playwright code." }, { "title": "Common MCP actions", "body": "Typical Playwright MCP tool actions include:\n\nbrowser_navigate for opening a page\nbrowser_click and browser_press for interaction\nbrowser_type and browser_select_option for forms\nbrowser_snapshot and browser_evaluate for inspection and extraction\nbrowser_choose_file for uploads\nscreenshot, PDF, trace, and download capture through the active browser workflow" }, { "title": "Common browser outcomes", "body": "GoalTypical MCP-style actionOpen and inspect a sitenavigate, wait, inspect, screenshotComplete a formnavigate, click, fill, select, submitCapture evidencescreenshot, PDF, download, tracePull structured page datanavigate, wait for rendered state, extractReproduce a UI bugheaded run, trace, console or network inspection" }, { "title": "Existing test suite", "body": "npx playwright test\nnpx playwright test --headed\nnpx playwright test --trace on" }, { "title": "Bootstrap selectors and flows", "body": "npx playwright codegen https://example.com" }, { "title": "Direct script path", "body": "const { chromium } = require('playwright');\n\n(async () => {\n const browser = await chromium.launch({ headless: true });\n const page = await browser.newPage();\n await page.goto('https://example.com');\n await page.screenshot({ path: 'page.png', fullPage: true });\n await browser.close();\n})();" }, { "title": "Quick Reference", "body": "TopicFileSelector strategy and frame handlingselectors.mdFailure analysis, traces, logs, and headed runsdebugging.mdTest architecture, mocks, auth, and assertionstesting.mdCI defaults, retries, workers, and failure artifactsci-cd.mdRendered-page extraction, pagination, and respectful throttlingscraping.md" }, { "title": "Approach Selection", "body": "SituationBest pathWhyStatic HTML or a simple HTTP response is enoughUse a cheaper fetch path firstFaster, cheaper, less brittleYou need a reliable first draft of selectors or flowsStart with codegen or a headed exploratory runFaster than guessing selectors from source or stale DOMLocal app, staging app, or repo-owned E2E suiteUse @playwright/testBest fit for repeatable tests and assertionsOne-off browser automation, screenshots, downloads, or rendered extractionUse direct Playwright APISimple, explicit, and easy to debug in codeAgent/browser-tool workflow already depends on browser_* tools or the user wants no-code browser controlUse Playwright MCPFastest path for navigate-click-fill-screenshot workflowsCI failures, flake, or environment driftStart with debugging.md and ci-cd.mdTraces and artifacts matter more than new code" }, { "title": "1. Test user-visible behavior and the real browser boundary", "body": "Do not spend Playwright on implementation details that unit or API tests can cover more cheaply.\nUse Playwright when success depends on rendered UI, actionability, auth, uploads or downloads, navigation, or browser-only behavior." }, { "title": "2. Make runs isolated before making them clever", "body": "Keep tests and scripts independent so retries, parallelism, and reruns do not inherit hidden state.\nExtend the repository's existing Playwright harness, config, and fixtures before inventing a parallel testing shape from scratch.\nDo not share mutable accounts, browser state, or server-side data across parallel runs unless the suite was explicitly designed for it." }, { "title": "3. Reconnaissance before action", "body": "Open, wait, and inspect the rendered state before locking selectors or assertions.\nUse codegen, headed mode, or traces to discover stable locators instead of guessing from source or stale DOM.\nFor flaky or CI-only failures, capture a trace before rewriting selectors or waits." }, { "title": "4. Prefer resilient locators and web-first assertions", "body": "Use role, label, text, alt text, title, or test ID before CSS or XPath.\nAssert the user-visible outcome with Playwright assertions instead of checking only that a click or fill command executed.\nIf a locator is ambiguous, disambiguate it. Do not silence strictness with first(), last(), or nth() unless position is the actual behavior under test." }, { "title": "5. Wait on actionability and app state, not arbitrary time", "body": "Let Playwright's actionability checks work for you before reaching for sleeps or forced actions.\nPrefer expect, URL waits, response waits, and explicit app-ready signals over generic timing guesses." }, { "title": "6. Control what you do not own", "body": "Mock or isolate third-party services, flaky upstream APIs, analytics noise, and cross-origin dependencies whenever the goal is to verify your app.\nFor rendered extraction, prefer documented APIs or plain HTTP paths before driving a full browser.\nDo not make live third-party widgets or upstream integrations the reason your suite flakes unless that exact integration is what the user asked to validate." }, { "title": "7. Keep auth, production access, and persistence explicit", "body": "Do not persist saved browser state by default.\nReuse auth state only when the repository already standardizes it or the user explicitly asks for session reuse.\nFor destructive, financial, medical, production, or otherwise high-stakes flows, prefer staging or local environments and require explicit user confirmation before continuing." }, { "title": "Playwright Traps", "body": "Guessing selectors from source or using first(), last(), or nth() to silence ambiguity -> the automation works once and then flakes.\nStarting a new Playwright structure when the repo already has config, fixtures, auth setup, or conventions -> the new flow fights the existing harness and wastes time.\nTesting internal implementation details instead of visible outcomes -> the suite passes while the user path is still broken.\nSharing one authenticated state across parallel tests that mutate server-side data -> failures become order-dependent and hard to trust.\nReaching for force: true before understanding overlays, disabled state, or actionability -> the test hides a real bug.\nWaiting on networkidle for chatty SPAs -> analytics, polling, or sockets keep the page \"busy\" even when the UI is ready.\nDriving a full browser when HTTP or an API would answer the question -> more cost, more flake, less signal.\nTreating third-party widgets and live upstream services as if they were stable parts of your own product -> failures stop being actionable." }, { "title": "External Endpoints", "body": "EndpointData SentPurposeUser-requested web originsBrowser requests, form input, cookies, uploads, and page interactions required by the taskAutomation, testing, screenshots, PDFs, and rendered extractionhttps://registry.npmjs.orgPackage metadata and tarballs during optional installationInstall Playwright or Playwright MCP\n\nNo other data is sent externally." }, { "title": "Security & Privacy", "body": "Data that leaves your machine:\n\nRequests sent to the websites the user asked to automate.\nOptional package-install traffic to npm when installing Playwright tooling.\n\nData that stays local:\n\nSource code, traces, screenshots, videos, PDFs, and temporary browser state kept in the workspace or system temp directory.\n\nThis skill does NOT:\n\nCreate hidden memory files or local folder systems.\nRecommend browser-fingerprint hacks, challenge-solving services, or rotating exits.\nPersist sessions or credentials by default.\nMake undeclared network requests beyond the target sites involved in the task and optional tool installation.\nTreat high-stakes production flows as safe to automate without explicit user direction." }, { "title": "Trust", "body": "By using this skill, browser requests go to the websites you automate and optional package downloads go through npm.\nOnly install if you trust those services and the sites involved in your workflow." }, { "title": "Related Skills", "body": "Install with clawhub install if user confirms:\n\nweb - HTTP-first investigation before escalating to a real browser.\nscrape - Broader extraction workflows when browser automation is not the main challenge.\nscreenshots - Capture and polish visual artifacts after browser work.\nmulti-engine-web-search - Find and shortlist target pages before automating them." }, { "title": "Feedback", "body": "If useful: clawhub star playwright\nStay updated: clawhub sync" } ], "body": "When to Use\n\nUse 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.\n\nPrefer 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.\n\nIf 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.\n\nUse 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.\n\nPrimary 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.\n\nArchitecture\n\nThis skill is instruction-only. It does not create local memory, setup folders, or persistent profiles by default.\n\nLoad 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.\n\nQuick Start\nMCP browser path\nnpx @playwright/mcp --headless\n\n\nUse this path when the agent already has browser tools available or the user wants browser automation without writing new Playwright code.\n\nCommon MCP actions\n\nTypical Playwright MCP tool actions include:\n\nbrowser_navigate for opening a page\nbrowser_click and browser_press for interaction\nbrowser_type and browser_select_option for forms\nbrowser_snapshot and browser_evaluate for inspection and extraction\nbrowser_choose_file for uploads\nscreenshot, PDF, trace, and download capture through the active browser workflow\nCommon browser outcomes\nGoal\tTypical MCP-style action\nOpen and inspect a site\tnavigate, wait, inspect, screenshot\nComplete a form\tnavigate, click, fill, select, submit\nCapture evidence\tscreenshot, PDF, download, trace\nPull structured page data\tnavigate, wait for rendered state, extract\nReproduce a UI bug\theaded run, trace, console or network inspection\nExisting test suite\nnpx playwright test\nnpx playwright test --headed\nnpx playwright test --trace on\n\nBootstrap selectors and flows\nnpx playwright codegen https://example.com\n\nDirect script path\nconst { chromium } = require('playwright');\n\n(async () => {\n const browser = await chromium.launch({ headless: true });\n const page = await browser.newPage();\n await page.goto('https://example.com');\n await page.screenshot({ path: 'page.png', fullPage: true });\n await browser.close();\n})();\n\nQuick Reference\nTopic\tFile\nSelector strategy and frame handling\tselectors.md\nFailure analysis, traces, logs, and headed runs\tdebugging.md\nTest architecture, mocks, auth, and assertions\ttesting.md\nCI defaults, retries, workers, and failure artifacts\tci-cd.md\nRendered-page extraction, pagination, and respectful throttling\tscraping.md\nApproach Selection\nSituation\tBest path\tWhy\nStatic HTML or a simple HTTP response is enough\tUse a cheaper fetch path first\tFaster, cheaper, less brittle\nYou need a reliable first draft of selectors or flows\tStart with codegen or a headed exploratory run\tFaster than guessing selectors from source or stale DOM\nLocal app, staging app, or repo-owned E2E suite\tUse @playwright/test\tBest fit for repeatable tests and assertions\nOne-off browser automation, screenshots, downloads, or rendered extraction\tUse direct Playwright API\tSimple, explicit, and easy to debug in code\nAgent/browser-tool workflow already depends on browser_* tools or the user wants no-code browser control\tUse Playwright MCP\tFastest path for navigate-click-fill-screenshot workflows\nCI failures, flake, or environment drift\tStart with debugging.md and ci-cd.md\tTraces and artifacts matter more than new code\nCore Rules\n1. Test user-visible behavior and the real browser boundary\nDo not spend Playwright on implementation details that unit or API tests can cover more cheaply.\nUse Playwright when success depends on rendered UI, actionability, auth, uploads or downloads, navigation, or browser-only behavior.\n2. Make runs isolated before making them clever\nKeep tests and scripts independent so retries, parallelism, and reruns do not inherit hidden state.\nExtend the repository's existing Playwright harness, config, and fixtures before inventing a parallel testing shape from scratch.\nDo not share mutable accounts, browser state, or server-side data across parallel runs unless the suite was explicitly designed for it.\n3. Reconnaissance before action\nOpen, wait, and inspect the rendered state before locking selectors or assertions.\nUse codegen, headed mode, or traces to discover stable locators instead of guessing from source or stale DOM.\nFor flaky or CI-only failures, capture a trace before rewriting selectors or waits.\n4. Prefer resilient locators and web-first assertions\nUse role, label, text, alt text, title, or test ID before CSS or XPath.\nAssert the user-visible outcome with Playwright assertions instead of checking only that a click or fill command executed.\nIf a locator is ambiguous, disambiguate it. Do not silence strictness with first(), last(), or nth() unless position is the actual behavior under test.\n5. Wait on actionability and app state, not arbitrary time\nLet Playwright's actionability checks work for you before reaching for sleeps or forced actions.\nPrefer expect, URL waits, response waits, and explicit app-ready signals over generic timing guesses.\n6. Control what you do not own\nMock or isolate third-party services, flaky upstream APIs, analytics noise, and cross-origin dependencies whenever the goal is to verify your app.\nFor rendered extraction, prefer documented APIs or plain HTTP paths before driving a full browser.\nDo not make live third-party widgets or upstream integrations the reason your suite flakes unless that exact integration is what the user asked to validate.\n7. Keep auth, production access, and persistence explicit\nDo not persist saved browser state by default.\nReuse auth state only when the repository already standardizes it or the user explicitly asks for session reuse.\nFor destructive, financial, medical, production, or otherwise high-stakes flows, prefer staging or local environments and require explicit user confirmation before continuing.\nPlaywright Traps\nGuessing selectors from source or using first(), last(), or nth() to silence ambiguity -> the automation works once and then flakes.\nStarting a new Playwright structure when the repo already has config, fixtures, auth setup, or conventions -> the new flow fights the existing harness and wastes time.\nTesting internal implementation details instead of visible outcomes -> the suite passes while the user path is still broken.\nSharing one authenticated state across parallel tests that mutate server-side data -> failures become order-dependent and hard to trust.\nReaching for force: true before understanding overlays, disabled state, or actionability -> the test hides a real bug.\nWaiting on networkidle for chatty SPAs -> analytics, polling, or sockets keep the page \"busy\" even when the UI is ready.\nDriving a full browser when HTTP or an API would answer the question -> more cost, more flake, less signal.\nTreating third-party widgets and live upstream services as if they were stable parts of your own product -> failures stop being actionable.\nExternal Endpoints\nEndpoint\tData Sent\tPurpose\nUser-requested web origins\tBrowser requests, form input, cookies, uploads, and page interactions required by the task\tAutomation, testing, screenshots, PDFs, and rendered extraction\nhttps://registry.npmjs.org\tPackage metadata and tarballs during optional installation\tInstall Playwright or Playwright MCP\n\nNo other data is sent externally.\n\nSecurity & Privacy\n\nData that leaves your machine:\n\nRequests sent to the websites the user asked to automate.\nOptional package-install traffic to npm when installing Playwright tooling.\n\nData that stays local:\n\nSource code, traces, screenshots, videos, PDFs, and temporary browser state kept in the workspace or system temp directory.\n\nThis skill does NOT:\n\nCreate hidden memory files or local folder systems.\nRecommend browser-fingerprint hacks, challenge-solving services, or rotating exits.\nPersist sessions or credentials by default.\nMake undeclared network requests beyond the target sites involved in the task and optional tool installation.\nTreat high-stakes production flows as safe to automate without explicit user direction.\nTrust\n\nBy 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.\n\nRelated Skills\n\nInstall with clawhub install if user confirms:\n\nweb - HTTP-first investigation before escalating to a real browser.\nscrape - Broader extraction workflows when browser automation is not the main challenge.\nscreenshots - Capture and polish visual artifacts after browser work.\nmulti-engine-web-search - Find and shortlist target pages before automating them.\nFeedback\nIf useful: clawhub star playwright\nStay updated: clawhub sync" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/ivangdavila/playwright", "publisherUrl": "https://clawhub.ai/ivangdavila/playwright", "owner": "ivangdavila", "version": "1.0.3", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/playwright", "downloadUrl": "https://openagent3.xyz/downloads/playwright", "agentUrl": "https://openagent3.xyz/skills/playwright/agent", "manifestUrl": "https://openagent3.xyz/skills/playwright/agent.json", "briefUrl": "https://openagent3.xyz/skills/playwright/agent.md" } }