Playwright - OpenClaw Skill — OpenClaw Tutorials

Install Command

npx clawhub@latest install playwright

Installation Guide

Check Environment

Make sure Node.js 22+ and OpenClaw are installed. Run openclaw --version in your terminal to verify.

Run Installation

Run the install command above in your terminal. ClawHub will automatically download and install Playwright to the ~/.openclaw/skills/ directory.

Verify Installation

Run openclaw skills list to check your installed skills and confirm Playwright appears in the list.

Configure (Optional)

Follow the configuration instructions in the description below to add skill settings to ~/.config/openclaw/openclaw.json5.

Manual Installation: Copy the Skill folder to ~/.openclaw/skills/ or the skills/ directory in your project root. Make sure the folder contains a SKILL.md file.

Accessibility snapshot-based page understanding Cross-browser automated testing Form interaction and navigation operations

Detailed Description

Playwright MCP server is Microsoft's official browser automation solution. Its unique approach uses Accessibility Snapshots rather than screenshots to understand page structure, enabling AI to precisely interact with page elements.

Core Features

Page Navigation (browser_navigate): Navigate to a specified URL, automatically waiting for page load completion
Accessibility Snapshot (browser_snapshot): Get the page's accessibility tree structure, containing all interactive elements with their ref identifiers, allowing AI to understand the page through text rather than visual recognition
Element Interaction: Supports clicking (browser_click), filling forms (browser_type), selecting dropdowns (browser_select_option), hovering (browser_hover), and more
Tab Management: Supports multi-tab management — creating, switching, and closing tabs
JavaScript Execution: Execute custom JavaScript code within the page context

Configuration

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic/playwright-mcp"]
      // Optional: --browser chromium/firefox/webkit
    }
  }
}

Use Cases

End-to-end testing: Automate web application functional testing workflows
Data entry: Automatically log in and fill forms, submit data
Web operation agent: Let AI perform complex web operations on behalf of users
Page content extraction: Navigate to pages and extract structured data

← Back to Skills List