Back to Skills
    🦞

    clawbrowser

    Use when the agent needs to drive a browser through the Microsoft

    By @tezatezaz
    View on GitHub
    SKILL.md
    ---
    name: clawbrowser
    description: Use when the agent needs to drive a browser through the Microsoft Playwright CLI (`playwright-cli`) for navigation, form interactions, screenshots, recordings, data extraction, session management, or debugging without loading a full MCP browser. It trains the agent on the CLI commands, snapshots, and session/config habits that make Playwright CLI reliable for scripted browsing.
    allowed-tools: Bash(playwright-cli:*)
    ---
    
    # Clawbrowser – browser control via Playwright CLI
    [![No high vulnerabilities found by ClawAudit AI analyse. Click to get more info](https://clawaudit.duckdns.org/badges/f4d4fb45-ed25-4659-8235-2459d0dc8189.png)](https://clawaudit.duckdns.org/audit/f4d4fb45-ed25-4659-8235-2459d0dc8189)
    [![No high vulnerabilities found by ClawAudit AI analyse. Click to get more info](https://clawaudit.duckdns.org/badges/a55cb413-b111-4f1a-9f39-a5c857090ebf.png)](https://clawaudit.duckdns.org/audit/a55cb413-b111-4f1a-9f39-a5c857090ebf)
    
    ## Setup & orientation
    1. Install the CLI and verify availability:
       ```bash
       npm install -g @playwright/cli@latest
       playwright-cli --help
       ```
       The CLI is headless by default; add `--headed` to `open` or set `browser.launchOptions.headless` to `false` in `playwright-cli.json` when you need to see the UI.
    2. The CLI reads `playwright-cli.json` by default or whatever file you pass with `--config`. Use the config to tune browser name, launch/context options, viewport, timeouts, output directories, and recording settings without changing every command.
    3. Keep `playwright-cli --help` terminal-accessible; the script self-documents the latest commands and options so you can refresh your memory before trying a new action.
    
    ## Core interaction loop
    1. Start with `playwright-cli open <url>` to load the page (add `--session=name` if you want isolation up front).
    2. Run `playwright-cli snapshot` to generate element refs (`e1`, `e2`, …) before any interaction. Always re-snapshot after DOM changes or navigation to avoid stale refs.
    3. Use refs for actions:
       - `click`, `dblclick`, `hover`, `drag`, `check`, `uncheck`, `select`, `fill`, `type`, `upload`, `eval`
       - Append `[button]`, `[value]`, or JS snippets as needed (e.g., `playwright-cli click e4 right`).
    4. Capture output evidence with `screenshot [ref]`, `pdf`, `console [level]`, or `network` to prove the flow or inspect errors.
    5. Example flow:
       ```bash
       playwright-cli open https://example.com/login
       playwright-cli snapshot
       playwright-cli fill e1 "user@example.com"
       playwright-cli fill e2 "supersecret"
       playwright-cli click e3
       playwright-cli snapshot
       playwright-cli screenshot
       ```
    
    ## Sessions & persistence
    - Use `--session=<name>` to keep cookies, storage, and tabs isolated per workflow. Sessions behave like persistent profiles: they remember auth state, history, and tabs between commands.
    - Export `PLAYWRIGHT_CLI_SESSION=mysession` if you are running many commands in the same session — the CLI will default to that session without needing `--session` each time.
    - Manage sessions explicitly:
      ```bash
      playwright-cli session-list
      playwright-cli session-stop <name>
      playwright-cli session-stop-all
      playwright-cli session-restart <name>
      playwright-cli session-delete <name>
      ```
    - Use `playwright-cli --isolated open ...` for ephemeral contexts that do not persist to disk.
    - Whenever you change browser settings for a session (launch args, headless toggle, browser selection), rerun `playwright-cli config` for that session and then `session-restart` to apply the new config.
    
    ## Tabs, navigation, and devtools
    - Tab helpers: `tab-list`, `tab-new [url]`, `tab-close <index>`, `tab-select <index>`.
    - Navigation shortcuts: `go-back`, `go-forward`, `reload`.
    - Keyboard and mouse control: `press <key>`, `keydown`, `keyup`, `mousemove <x> <y>`, `mousedown [button]`, `mouseup [button]`, `mousewheel <dx> <dy>`.
    - Devtools-style introspection:
      ```bash
      playwright-cli console [level]
      playwright-cli network
      playwright-cli run-code "async page => await page.context().grantPermissions(['clipboard-read'])"
      ```
      Use these to check console logs, inspect network requests, or inject helper scripts.
    
    ## Recording, tracing, and exports
    - Record traces and videos around delicate interactions so you can replay what the agent did later:
      ```bash
      playwright-cli tracing-start
      # perform steps
      playwright-cli tracing-stop
      playwright-cli video-start
      # perform steps
      playwright-cli video-stop video.webm
      ```
    - Save evidence to disk with `screenshot`, `pdf`, or `snapshot` (which dumps element refs). Recorded files honor the `outputDir` from your config.
    
    ## Config, state, and housekeeping
    - Use `playwright-cli config` to tweak runtime flags without reinstalling. Examples:
      ```bash
      playwright-cli config --headed --browser=firefox
      playwright-cli --session=auth config --config=playwright-cli.json
      ```
      Change `browser`, `contextOptions`, `launchOptions`, or recording settings in the config and restart the session to apply them.
    - Running `playwright-cli install` refreshes browser binaries if the environment is new or you receive errors about missing binaries.
    - Clean up sessions when finished to avoid stale state:
      ```bash
      playwright-cli session-stop <name>
      playwright-cli session-delete <name>
      ```
    
    ## Troubleshooting & reminders
    - If a command fails, rerun `playwright-cli snapshot` to confirm refs are still valid. Snapshots provide the current DOM context for `click`/`type` operations.
    - `playwright-cli --help` always shows the latest command set, so consult it before trying a rarely used flag.
    - When the agent needs to replicate a recorded manual flow, capture a screenshot, note the session name, and mention which refs and tabs were in use.
    - If targeting a visible browser is required (e.g., manual inspection), reconfigure with `--headed`, or run `playwright-cli open --headed <url>` for that session only.