{ "schemaVersion": "1.0", "item": { "slug": "playwright-skill", "name": "Playwright Skill", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/vmercel/playwright-skill", "canonicalUrl": "https://clawhub.ai/vmercel/playwright-skill", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/playwright-skill", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=playwright-skill", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "API_REFERENCE.md", "SKILL.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-skill", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-07T04:39:44.878Z", "expiresAt": "2026-05-14T04:39:44.878Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=playwright-skill", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=playwright-skill", "contentDisposition": "attachment; filename=\"playwright-skill-0.1.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "playwright-skill" }, "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-skill" }, "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-skill", "agentPageUrl": "https://openagent3.xyz/skills/playwright-skill/agent", "manifestUrl": "https://openagent3.xyz/skills/playwright-skill/agent.json", "briefUrl": "https://openagent3.xyz/skills/playwright-skill/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": "Playwright Browser Automation", "body": "General-purpose browser automation skill. I'll write custom Playwright code for any automation task you request and execute it via the universal executor.\n\nCRITICAL WORKFLOW - Follow these steps in order:\n\nAuto-detect dev servers - For localhost testing, ALWAYS run server detection FIRST:\ncd $SKILL_DIR && node -e \"require('./lib/helpers').detectDevServers().then(servers => console.log(JSON.stringify(servers)))\"\n\n\nIf 1 server found: Use it automatically, inform user\nIf multiple servers found: Ask user which one to test\nIf no servers found: Ask for URL or offer to help start dev server\n\n\n\nWrite scripts to /tmp - NEVER write test files to skill directory; always use /tmp/playwright-test-*.js\n\n\nUse visible browser by default - Always use headless: false unless user specifically requests headless mode\n\n\nParameterize URLs - Always make URLs configurable via environment variable or constant at top of script" }, { "title": "How It Works", "body": "You describe what you want to test/automate\nI auto-detect running dev servers (or ask for URL if testing external site)\nI write custom Playwright code in /tmp/playwright-test-*.js (won't clutter your project)\nI execute it via: cd $SKILL_DIR && node run.js /tmp/playwright-test-*.js\nResults displayed in real-time, browser window visible for debugging\nTest files auto-cleaned from /tmp by your OS" }, { "title": "Setup (First Time)", "body": "cd $SKILL_DIR\nnpm run setup\n\nThis installs Playwright and Chromium browser. Only needed once." }, { "title": "Execution Pattern", "body": "Step 1: Detect dev servers (for localhost testing)\n\ncd $SKILL_DIR && node -e \"require('./lib/helpers').detectDevServers().then(s => console.log(JSON.stringify(s)))\"\n\nStep 2: Write test script to /tmp with URL parameter\n\n// /tmp/playwright-test-page.js\nconst { chromium } = require('playwright');\n\n// Parameterized URL (detected or user-provided)\nconst TARGET_URL = 'http://localhost:3001'; // <-- Auto-detected or from user\n\n(async () => {\n const browser = await chromium.launch({ headless: false });\n const page = await browser.newPage();\n\n await page.goto(TARGET_URL);\n console.log('Page loaded:', await page.title());\n\n await page.screenshot({ path: '/tmp/screenshot.png', fullPage: true });\n console.log('📸 Screenshot saved to /tmp/screenshot.png');\n\n await browser.close();\n})();\n\nStep 3: Execute from skill directory\n\ncd $SKILL_DIR && node run.js /tmp/playwright-test-page.js" }, { "title": "Test a Page (Multiple Viewports)", "body": "// /tmp/playwright-test-responsive.js\nconst { chromium } = require('playwright');\n\nconst TARGET_URL = 'http://localhost:3001'; // Auto-detected\n\n(async () => {\n const browser = await chromium.launch({ headless: false, slowMo: 100 });\n const page = await browser.newPage();\n\n // Desktop test\n await page.setViewportSize({ width: 1920, height: 1080 });\n await page.goto(TARGET_URL);\n console.log('Desktop - Title:', await page.title());\n await page.screenshot({ path: '/tmp/desktop.png', fullPage: true });\n\n // Mobile test\n await page.setViewportSize({ width: 375, height: 667 });\n await page.screenshot({ path: '/tmp/mobile.png', fullPage: true });\n\n await browser.close();\n})();" }, { "title": "Test Login Flow", "body": "// /tmp/playwright-test-login.js\nconst { chromium } = require('playwright');\n\nconst TARGET_URL = 'http://localhost:3001'; // Auto-detected\n\n(async () => {\n const browser = await chromium.launch({ headless: false });\n const page = await browser.newPage();\n\n await page.goto(`${TARGET_URL}/login`);\n\n await page.fill('input[name=\"email\"]', 'test@example.com');\n await page.fill('input[name=\"password\"]', 'password123');\n await page.click('button[type=\"submit\"]');\n\n // Wait for redirect\n await page.waitForURL('**/dashboard');\n console.log('✅ Login successful, redirected to dashboard');\n\n await browser.close();\n})();" }, { "title": "Fill and Submit Form", "body": "// /tmp/playwright-test-form.js\nconst { chromium } = require('playwright');\n\nconst TARGET_URL = 'http://localhost:3001'; // Auto-detected\n\n(async () => {\n const browser = await chromium.launch({ headless: false, slowMo: 50 });\n const page = await browser.newPage();\n\n await page.goto(`${TARGET_URL}/contact`);\n\n await page.fill('input[name=\"name\"]', 'John Doe');\n await page.fill('input[name=\"email\"]', 'john@example.com');\n await page.fill('textarea[name=\"message\"]', 'Test message');\n await page.click('button[type=\"submit\"]');\n\n // Verify submission\n await page.waitForSelector('.success-message');\n console.log('✅ Form submitted successfully');\n\n await browser.close();\n})();" }, { "title": "Check for Broken Links", "body": "const { chromium } = require('playwright');\n\n(async () => {\n const browser = await chromium.launch({ headless: false });\n const page = await browser.newPage();\n\n await page.goto('http://localhost:3000');\n\n const links = await page.locator('a[href^=\"http\"]').all();\n const results = { working: 0, broken: [] };\n\n for (const link of links) {\n const href = await link.getAttribute('href');\n try {\n const response = await page.request.head(href);\n if (response.ok()) {\n results.working++;\n } else {\n results.broken.push({ url: href, status: response.status() });\n }\n } catch (e) {\n results.broken.push({ url: href, error: e.message });\n }\n }\n\n console.log(`✅ Working links: ${results.working}`);\n console.log(`❌ Broken links:`, results.broken);\n\n await browser.close();\n})();" }, { "title": "Take Screenshot with Error Handling", "body": "const { chromium } = require('playwright');\n\n(async () => {\n const browser = await chromium.launch({ headless: false });\n const page = await browser.newPage();\n\n try {\n await page.goto('http://localhost:3000', {\n waitUntil: 'networkidle',\n timeout: 10000,\n });\n\n await page.screenshot({\n path: '/tmp/screenshot.png',\n fullPage: true,\n });\n\n console.log('📸 Screenshot saved to /tmp/screenshot.png');\n } catch (error) {\n console.error('❌ Error:', error.message);\n } finally {\n await browser.close();\n }\n})();" }, { "title": "Test Responsive Design", "body": "// /tmp/playwright-test-responsive-full.js\nconst { chromium } = require('playwright');\n\nconst TARGET_URL = 'http://localhost:3001'; // Auto-detected\n\n(async () => {\n const browser = await chromium.launch({ headless: false });\n const page = await browser.newPage();\n\n const viewports = [\n { name: 'Desktop', width: 1920, height: 1080 },\n { name: 'Tablet', width: 768, height: 1024 },\n { name: 'Mobile', width: 375, height: 667 },\n ];\n\n for (const viewport of viewports) {\n console.log(\n `Testing ${viewport.name} (${viewport.width}x${viewport.height})`,\n );\n\n await page.setViewportSize({\n width: viewport.width,\n height: viewport.height,\n });\n\n await page.goto(TARGET_URL);\n await page.waitForTimeout(1000);\n\n await page.screenshot({\n path: `/tmp/${viewport.name.toLowerCase()}.png`,\n fullPage: true,\n });\n }\n\n console.log('✅ All viewports tested');\n await browser.close();\n})();" }, { "title": "Inline Execution (Simple Tasks)", "body": "For quick one-off tasks, you can execute code inline without creating files:\n\n# Take a quick screenshot\ncd $SKILL_DIR && node run.js \"\nconst browser = await chromium.launch({ headless: false });\nconst page = await browser.newPage();\nawait page.goto('http://localhost:3001');\nawait page.screenshot({ path: '/tmp/quick-screenshot.png', fullPage: true });\nconsole.log('Screenshot saved');\nawait browser.close();\n\"\n\nWhen to use inline vs files:\n\nInline: Quick one-off tasks (screenshot, check if element exists, get page title)\nFiles: Complex tests, responsive design checks, anything user might want to re-run" }, { "title": "Available Helpers", "body": "Optional utility functions in lib/helpers.js:\n\nconst helpers = require('./lib/helpers');\n\n// Detect running dev servers (CRITICAL - use this first!)\nconst servers = await helpers.detectDevServers();\nconsole.log('Found servers:', servers);\n\n// Safe click with retry\nawait helpers.safeClick(page, 'button.submit', { retries: 3 });\n\n// Safe type with clear\nawait helpers.safeType(page, '#username', 'testuser');\n\n// Take timestamped screenshot\nawait helpers.takeScreenshot(page, 'test-result');\n\n// Handle cookie banners\nawait helpers.handleCookieBanner(page);\n\n// Extract table data\nconst data = await helpers.extractTableData(page, 'table.results');\n\nSee lib/helpers.js for full list." }, { "title": "Custom HTTP Headers", "body": "Configure custom headers for all HTTP requests via environment variables. Useful for:\n\nIdentifying automated traffic to your backend\nGetting LLM-optimized responses (e.g., plain text errors instead of styled HTML)\nAdding authentication tokens globally" }, { "title": "Configuration", "body": "Single header (common case):\n\nPW_HEADER_NAME=X-Automated-By PW_HEADER_VALUE=playwright-skill \\\n cd $SKILL_DIR && node run.js /tmp/my-script.js\n\nMultiple headers (JSON format):\n\nPW_EXTRA_HEADERS='{\"X-Automated-By\":\"playwright-skill\",\"X-Debug\":\"true\"}' \\\n cd $SKILL_DIR && node run.js /tmp/my-script.js" }, { "title": "How It Works", "body": "Headers are automatically applied when using helpers.createContext():\n\nconst context = await helpers.createContext(browser);\nconst page = await context.newPage();\n// All requests from this page include your custom headers\n\nFor scripts using raw Playwright API, use the injected getContextOptionsWithHeaders():\n\nconst context = await browser.newContext(\n getContextOptionsWithHeaders({ viewport: { width: 1920, height: 1080 } }),\n);" }, { "title": "Advanced Usage", "body": "For comprehensive Playwright API documentation, see API_REFERENCE.md:\n\nSelectors & Locators best practices\nNetwork interception & API mocking\nAuthentication & session management\nVisual regression testing\nMobile device emulation\nPerformance testing\nDebugging techniques\nCI/CD integration" }, { "title": "Tips", "body": "CRITICAL: Detect servers FIRST - Always run detectDevServers() before writing test code for localhost testing\nCustom headers - Use PW_HEADER_NAME/PW_HEADER_VALUE env vars to identify automated traffic to your backend\nUse /tmp for test files - Write to /tmp/playwright-test-*.js, never to skill directory or user's project\nParameterize URLs - Put detected/provided URL in a TARGET_URL constant at the top of every script\nDEFAULT: Visible browser - Always use headless: false unless user explicitly asks for headless mode\nHeadless mode - Only use headless: true when user specifically requests \"headless\" or \"background\" execution\nSlow down: Use slowMo: 100 to make actions visible and easier to follow\nWait strategies: Use waitForURL, waitForSelector, waitForLoadState instead of fixed timeouts\nError handling: Always use try-catch for robust automation\nConsole output: Use console.log() to track progress and show what's happening" }, { "title": "Troubleshooting", "body": "Playwright not installed:\n\ncd $SKILL_DIR && npm run setup\n\nModule not found:\nEnsure running from skill directory via run.js wrapper\n\nBrowser doesn't open:\nCheck headless: false and ensure display available\n\nElement not found:\nAdd wait: await page.waitForSelector('.element', { timeout: 10000 })" }, { "title": "Example Usage", "body": "User: \"Test if the marketing page looks good\"\n\nClaude: I'll test the marketing page across multiple viewports. Let me first detect running servers...\n[Runs: detectDevServers()]\n[Output: Found server on port 3001]\nI found your dev server running on http://localhost:3001\n\n[Writes custom automation script to /tmp/playwright-test-marketing.js with URL parameterized]\n[Runs: cd $SKILL_DIR && node run.js /tmp/playwright-test-marketing.js]\n[Shows results with screenshots from /tmp/]\n\nUser: \"Check if login redirects correctly\"\n\nClaude: I'll test the login flow. First, let me check for running servers...\n[Runs: detectDevServers()]\n[Output: Found servers on ports 3000 and 3001]\nI found 2 dev servers. Which one should I test?\n- http://localhost:3000\n- http://localhost:3001\n\nUser: \"Use 3001\"\n\n[Writes login automation to /tmp/playwright-test-login.js]\n[Runs: cd $SKILL_DIR && node run.js /tmp/playwright-test-login.js]\n[Reports: ✅ Login successful, redirected to /dashboard]" }, { "title": "Notes", "body": "Each automation is custom-written for your specific request\nNot limited to pre-built scripts - any browser task possible\nAuto-detects running dev servers to eliminate hardcoded URLs\nTest scripts written to /tmp for automatic cleanup (no clutter)\nCode executes reliably with proper module resolution via run.js\nProgressive disclosure - API_REFERENCE.md loaded only when advanced features needed" } ], "body": "IMPORTANT - Path Resolution: This skill can be installed in different locations (plugin system, manual installation, global, or project-specific). Before executing any commands, determine the skill directory based on where you loaded this SKILL.md file, and use that path in all commands below. Replace $SKILL_DIR with the actual discovered path.\n\nCommon installation paths:\n\nPlugin system: ~/.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill\nManual global: ~/.claude/skills/playwright-skill\nProject-specific: /.claude/skills/playwright-skill\nPlaywright Browser Automation\n\nGeneral-purpose browser automation skill. I'll write custom Playwright code for any automation task you request and execute it via the universal executor.\n\nCRITICAL WORKFLOW - Follow these steps in order:\n\nAuto-detect dev servers - For localhost testing, ALWAYS run server detection FIRST:\n\ncd $SKILL_DIR && node -e \"require('./lib/helpers').detectDevServers().then(servers => console.log(JSON.stringify(servers)))\"\n\nIf 1 server found: Use it automatically, inform user\nIf multiple servers found: Ask user which one to test\nIf no servers found: Ask for URL or offer to help start dev server\n\nWrite scripts to /tmp - NEVER write test files to skill directory; always use /tmp/playwright-test-*.js\n\nUse visible browser by default - Always use headless: false unless user specifically requests headless mode\n\nParameterize URLs - Always make URLs configurable via environment variable or constant at top of script\n\nHow It Works\nYou describe what you want to test/automate\nI auto-detect running dev servers (or ask for URL if testing external site)\nI write custom Playwright code in /tmp/playwright-test-*.js (won't clutter your project)\nI execute it via: cd $SKILL_DIR && node run.js /tmp/playwright-test-*.js\nResults displayed in real-time, browser window visible for debugging\nTest files auto-cleaned from /tmp by your OS\nSetup (First Time)\ncd $SKILL_DIR\nnpm run setup\n\n\nThis installs Playwright and Chromium browser. Only needed once.\n\nExecution Pattern\n\nStep 1: Detect dev servers (for localhost testing)\n\ncd $SKILL_DIR && node -e \"require('./lib/helpers').detectDevServers().then(s => console.log(JSON.stringify(s)))\"\n\n\nStep 2: Write test script to /tmp with URL parameter\n\n// /tmp/playwright-test-page.js\nconst { chromium } = require('playwright');\n\n// Parameterized URL (detected or user-provided)\nconst TARGET_URL = 'http://localhost:3001'; // <-- Auto-detected or from user\n\n(async () => {\n const browser = await chromium.launch({ headless: false });\n const page = await browser.newPage();\n\n await page.goto(TARGET_URL);\n console.log('Page loaded:', await page.title());\n\n await page.screenshot({ path: '/tmp/screenshot.png', fullPage: true });\n console.log('📸 Screenshot saved to /tmp/screenshot.png');\n\n await browser.close();\n})();\n\n\nStep 3: Execute from skill directory\n\ncd $SKILL_DIR && node run.js /tmp/playwright-test-page.js\n\nCommon Patterns\nTest a Page (Multiple Viewports)\n// /tmp/playwright-test-responsive.js\nconst { chromium } = require('playwright');\n\nconst TARGET_URL = 'http://localhost:3001'; // Auto-detected\n\n(async () => {\n const browser = await chromium.launch({ headless: false, slowMo: 100 });\n const page = await browser.newPage();\n\n // Desktop test\n await page.setViewportSize({ width: 1920, height: 1080 });\n await page.goto(TARGET_URL);\n console.log('Desktop - Title:', await page.title());\n await page.screenshot({ path: '/tmp/desktop.png', fullPage: true });\n\n // Mobile test\n await page.setViewportSize({ width: 375, height: 667 });\n await page.screenshot({ path: '/tmp/mobile.png', fullPage: true });\n\n await browser.close();\n})();\n\nTest Login Flow\n// /tmp/playwright-test-login.js\nconst { chromium } = require('playwright');\n\nconst TARGET_URL = 'http://localhost:3001'; // Auto-detected\n\n(async () => {\n const browser = await chromium.launch({ headless: false });\n const page = await browser.newPage();\n\n await page.goto(`${TARGET_URL}/login`);\n\n await page.fill('input[name=\"email\"]', 'test@example.com');\n await page.fill('input[name=\"password\"]', 'password123');\n await page.click('button[type=\"submit\"]');\n\n // Wait for redirect\n await page.waitForURL('**/dashboard');\n console.log('✅ Login successful, redirected to dashboard');\n\n await browser.close();\n})();\n\nFill and Submit Form\n// /tmp/playwright-test-form.js\nconst { chromium } = require('playwright');\n\nconst TARGET_URL = 'http://localhost:3001'; // Auto-detected\n\n(async () => {\n const browser = await chromium.launch({ headless: false, slowMo: 50 });\n const page = await browser.newPage();\n\n await page.goto(`${TARGET_URL}/contact`);\n\n await page.fill('input[name=\"name\"]', 'John Doe');\n await page.fill('input[name=\"email\"]', 'john@example.com');\n await page.fill('textarea[name=\"message\"]', 'Test message');\n await page.click('button[type=\"submit\"]');\n\n // Verify submission\n await page.waitForSelector('.success-message');\n console.log('✅ Form submitted successfully');\n\n await browser.close();\n})();\n\nCheck for Broken Links\nconst { chromium } = require('playwright');\n\n(async () => {\n const browser = await chromium.launch({ headless: false });\n const page = await browser.newPage();\n\n await page.goto('http://localhost:3000');\n\n const links = await page.locator('a[href^=\"http\"]').all();\n const results = { working: 0, broken: [] };\n\n for (const link of links) {\n const href = await link.getAttribute('href');\n try {\n const response = await page.request.head(href);\n if (response.ok()) {\n results.working++;\n } else {\n results.broken.push({ url: href, status: response.status() });\n }\n } catch (e) {\n results.broken.push({ url: href, error: e.message });\n }\n }\n\n console.log(`✅ Working links: ${results.working}`);\n console.log(`❌ Broken links:`, results.broken);\n\n await browser.close();\n})();\n\nTake Screenshot with Error Handling\nconst { chromium } = require('playwright');\n\n(async () => {\n const browser = await chromium.launch({ headless: false });\n const page = await browser.newPage();\n\n try {\n await page.goto('http://localhost:3000', {\n waitUntil: 'networkidle',\n timeout: 10000,\n });\n\n await page.screenshot({\n path: '/tmp/screenshot.png',\n fullPage: true,\n });\n\n console.log('📸 Screenshot saved to /tmp/screenshot.png');\n } catch (error) {\n console.error('❌ Error:', error.message);\n } finally {\n await browser.close();\n }\n})();\n\nTest Responsive Design\n// /tmp/playwright-test-responsive-full.js\nconst { chromium } = require('playwright');\n\nconst TARGET_URL = 'http://localhost:3001'; // Auto-detected\n\n(async () => {\n const browser = await chromium.launch({ headless: false });\n const page = await browser.newPage();\n\n const viewports = [\n { name: 'Desktop', width: 1920, height: 1080 },\n { name: 'Tablet', width: 768, height: 1024 },\n { name: 'Mobile', width: 375, height: 667 },\n ];\n\n for (const viewport of viewports) {\n console.log(\n `Testing ${viewport.name} (${viewport.width}x${viewport.height})`,\n );\n\n await page.setViewportSize({\n width: viewport.width,\n height: viewport.height,\n });\n\n await page.goto(TARGET_URL);\n await page.waitForTimeout(1000);\n\n await page.screenshot({\n path: `/tmp/${viewport.name.toLowerCase()}.png`,\n fullPage: true,\n });\n }\n\n console.log('✅ All viewports tested');\n await browser.close();\n})();\n\nInline Execution (Simple Tasks)\n\nFor quick one-off tasks, you can execute code inline without creating files:\n\n# Take a quick screenshot\ncd $SKILL_DIR && node run.js \"\nconst browser = await chromium.launch({ headless: false });\nconst page = await browser.newPage();\nawait page.goto('http://localhost:3001');\nawait page.screenshot({ path: '/tmp/quick-screenshot.png', fullPage: true });\nconsole.log('Screenshot saved');\nawait browser.close();\n\"\n\n\nWhen to use inline vs files:\n\nInline: Quick one-off tasks (screenshot, check if element exists, get page title)\nFiles: Complex tests, responsive design checks, anything user might want to re-run\nAvailable Helpers\n\nOptional utility functions in lib/helpers.js:\n\nconst helpers = require('./lib/helpers');\n\n// Detect running dev servers (CRITICAL - use this first!)\nconst servers = await helpers.detectDevServers();\nconsole.log('Found servers:', servers);\n\n// Safe click with retry\nawait helpers.safeClick(page, 'button.submit', { retries: 3 });\n\n// Safe type with clear\nawait helpers.safeType(page, '#username', 'testuser');\n\n// Take timestamped screenshot\nawait helpers.takeScreenshot(page, 'test-result');\n\n// Handle cookie banners\nawait helpers.handleCookieBanner(page);\n\n// Extract table data\nconst data = await helpers.extractTableData(page, 'table.results');\n\n\nSee lib/helpers.js for full list.\n\nCustom HTTP Headers\n\nConfigure custom headers for all HTTP requests via environment variables. Useful for:\n\nIdentifying automated traffic to your backend\nGetting LLM-optimized responses (e.g., plain text errors instead of styled HTML)\nAdding authentication tokens globally\nConfiguration\n\nSingle header (common case):\n\nPW_HEADER_NAME=X-Automated-By PW_HEADER_VALUE=playwright-skill \\\n cd $SKILL_DIR && node run.js /tmp/my-script.js\n\n\nMultiple headers (JSON format):\n\nPW_EXTRA_HEADERS='{\"X-Automated-By\":\"playwright-skill\",\"X-Debug\":\"true\"}' \\\n cd $SKILL_DIR && node run.js /tmp/my-script.js\n\nHow It Works\n\nHeaders are automatically applied when using helpers.createContext():\n\nconst context = await helpers.createContext(browser);\nconst page = await context.newPage();\n// All requests from this page include your custom headers\n\n\nFor scripts using raw Playwright API, use the injected getContextOptionsWithHeaders():\n\nconst context = await browser.newContext(\n getContextOptionsWithHeaders({ viewport: { width: 1920, height: 1080 } }),\n);\n\nAdvanced Usage\n\nFor comprehensive Playwright API documentation, see API_REFERENCE.md:\n\nSelectors & Locators best practices\nNetwork interception & API mocking\nAuthentication & session management\nVisual regression testing\nMobile device emulation\nPerformance testing\nDebugging techniques\nCI/CD integration\nTips\nCRITICAL: Detect servers FIRST - Always run detectDevServers() before writing test code for localhost testing\nCustom headers - Use PW_HEADER_NAME/PW_HEADER_VALUE env vars to identify automated traffic to your backend\nUse /tmp for test files - Write to /tmp/playwright-test-*.js, never to skill directory or user's project\nParameterize URLs - Put detected/provided URL in a TARGET_URL constant at the top of every script\nDEFAULT: Visible browser - Always use headless: false unless user explicitly asks for headless mode\nHeadless mode - Only use headless: true when user specifically requests \"headless\" or \"background\" execution\nSlow down: Use slowMo: 100 to make actions visible and easier to follow\nWait strategies: Use waitForURL, waitForSelector, waitForLoadState instead of fixed timeouts\nError handling: Always use try-catch for robust automation\nConsole output: Use console.log() to track progress and show what's happening\nTroubleshooting\n\nPlaywright not installed:\n\ncd $SKILL_DIR && npm run setup\n\n\nModule not found: Ensure running from skill directory via run.js wrapper\n\nBrowser doesn't open: Check headless: false and ensure display available\n\nElement not found: Add wait: await page.waitForSelector('.element', { timeout: 10000 })\n\nExample Usage\nUser: \"Test if the marketing page looks good\"\n\nClaude: I'll test the marketing page across multiple viewports. Let me first detect running servers...\n[Runs: detectDevServers()]\n[Output: Found server on port 3001]\nI found your dev server running on http://localhost:3001\n\n[Writes custom automation script to /tmp/playwright-test-marketing.js with URL parameterized]\n[Runs: cd $SKILL_DIR && node run.js /tmp/playwright-test-marketing.js]\n[Shows results with screenshots from /tmp/]\n\nUser: \"Check if login redirects correctly\"\n\nClaude: I'll test the login flow. First, let me check for running servers...\n[Runs: detectDevServers()]\n[Output: Found servers on ports 3000 and 3001]\nI found 2 dev servers. Which one should I test?\n- http://localhost:3000\n- http://localhost:3001\n\nUser: \"Use 3001\"\n\n[Writes login automation to /tmp/playwright-test-login.js]\n[Runs: cd $SKILL_DIR && node run.js /tmp/playwright-test-login.js]\n[Reports: ✅ Login successful, redirected to /dashboard]\n\nNotes\nEach automation is custom-written for your specific request\nNot limited to pre-built scripts - any browser task possible\nAuto-detects running dev servers to eliminate hardcoded URLs\nTest scripts written to /tmp for automatic cleanup (no clutter)\nCode executes reliably with proper module resolution via run.js\nProgressive disclosure - API_REFERENCE.md loaded only when advanced features needed" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/vmercel/playwright-skill", "publisherUrl": "https://clawhub.ai/vmercel/playwright-skill", "owner": "vmercel", "version": "0.1.0", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/playwright-skill", "downloadUrl": "https://openagent3.xyz/downloads/playwright-skill", "agentUrl": "https://openagent3.xyz/skills/playwright-skill/agent", "manifestUrl": "https://openagent3.xyz/skills/playwright-skill/agent.json", "briefUrl": "https://openagent3.xyz/skills/playwright-skill/agent.md" } }