🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
πŸ¦€ ClawHub

Playwright by Xiaomolong

by @linbo405

Browser automation via Playwright MCP. Navigate websites, click elements, fill forms, take screenshots, extract data, and debug real browser workflows. Use w...

Versionv1.0.0
⚑ When to Use
TriggerAction
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.
πŸ’‘ Examples

MCP browser path

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.

Common MCP actions

Typical Playwright MCP tool actions include:

  • browser_navigate for opening a page
  • browser_click and browser_press for interaction
  • browser_type and browser_select_option for forms
  • browser_snapshot and browser_evaluate for inspection and extraction
  • browser_choose_file for uploads
  • screenshot, PDF, trace, and download capture through the active browser workflow
  • Common browser outcomes

    | 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 |

    Existing test suite

    npx playwright test
    npx playwright test --headed
    npx playwright test --trace on
    

    Bootstrap selectors and flows

    npx playwright codegen https://example.com
    

    Direct script path

    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(); })();

    View on ClawHub
    TERMINAL
    clawhub install xiaomolong-playwright

    πŸ§ͺ Use this skill with your agent

    Most visitors already have an agent. Pick your environment, install or copy the workflow, then run the smoke-test prompt above.

    πŸ” Can't find the right skill?

    Search 60,000+ AI agent skills β€” free, no login needed.

    Search Skills β†’