A high-performance web browsing and data extraction skill that enables AI agents to capture screenshots and text via Playwright.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install playwright-controller
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install playwright-controller using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Playwright Controller?
The Playwright Controller is a professional-grade browser automation tool designed for the Openclaw Skills ecosystem. It allows developers and AI agents to programmatically navigate the web using Chromium, providing features like full-page rendering, mobile device emulation, and intelligent waiting for dynamic content. Unlike simple scrapers, this skill handles JavaScript-heavy sites by simulating real-user environments, including iPhone viewports and specific User-Agent strings.
By integrating this skill, agents gain the ability to visually verify web layouts and extract clean, structured text for further processing. It supports both headless operation for speed and headful mode for scenarios requiring manual intervention, such as complex logins or CAPTCHA resolution, making it a versatile addition to any automation workflow.
Playwright Controller Use Cases
- Generating full-page or element-specific screenshots for visual documentation.
- Extracting clean text content from modern web applications by stripping scripts and ads.
- Testing website responsiveness through mobile viewport and User-Agent simulation.
- Automating data collection from sites that require a full browser environment to render JS content.
- Debugging web interactions using headful browser modes within an AI-driven environment.
How Playwright Controller Works
- The agent triggers the skill using specific commands like fetch or fetch-element.
- A Chromium browser instance is launched with pre-configured mobile context settings (iPhone simulation).
- The controller navigates to the target URL and implements smart waiting using the networkidle state.
- An additional rendering delay is applied to ensure all asynchronous assets and fonts are fully loaded.
- The skill captures a high-resolution PNG screenshot and extracts the page's inner text.
- Non-essential elements like scripts and advertisements are filtered out during the text extraction phase.
- Files are saved to a designated directory with unique timestamps and URL-based hashes for organized storage.
Playwright Controller Setup
The Playwright Controller is part of the Openclaw Skills library and comes with all necessary dependencies pre-configured. Ensure you have Node.js (v16+) installed.
# To fetch a webpage and generate a screenshot immediately
playwright:fetch https://example.com
# To capture a specific element on a page
playwright:fetch-element --selector=".main-content" https://example.com
Playwright Controller Data Schema & Taxonomy
The skill organizes output in a structured directory format, typically under a ./screenshots folder. Files are named using a combination of timestamps and sanitized URL hashes.
| File Type | Naming Convention | Description |
|---|---|---|
| Full Screenshot | <timestamp>_<url_hash>.png |
High-fidelity full-page PNG capture. |
| Extracted Text | <timestamp>_<url_hash>_content.txt |
Cleaned text content of the entire page. |
| Element Visual | <timestamp>_<url_hash>_element.png |
Targeted screenshot of a specific CSS selector. |
| Error Capture | <timestamp>_<url_hash>_error.png |
Visual state captured during a execution failure. |
Playwright Controller Advanced Features
- Mobile Emulation: Built-in support for iPhone 17.0 User-Agent and 375x800 resolution simulation.
- Intelligent Waiting: Automatic detection of network idle states and custom rendering buffers.
- Headful Mode: Optional visible browser window for debugging and manual user interactions.
- Resource Interception: Ability to optimize performance by skipping non-essential assets while maintaining visual accuracy.
- Flexible API: Direct access to fetchWithPlaywright and fetchElementAndScreenshot functions for custom script integration.
- Robust Error Handling: Automatic screenshot generation even when page loads fail to facilitate debugging.
SKILL.md
Loading
Related Openclaw Skills
Paper Engineering Assistant
A structured academic writing assistant that utilizes a three-layer architecture to automate thesis development and research paper organization.
Stock Market Intelligence Skill
A professional financial data tool for querying real-time market quotes across A-shares, Hong Kong, and US stock markets.
Stock Board Skill
An automated screening tool for identifying limit-up and high-momentum stocks in the Chinese A-share market.
Agent-to-Owner File Bridge
A secure bridge for AI agents to export files, share outputs, and provide download links directly to their owners.
River Autotrader
A real-time cryptocurrency information tracker and analysis tool for the River ($RIVER) token ecosystem.
Smart Money Tracker
A comprehensive on-chain intelligence system for tracking large transactions, whale movements, and institutional fund flows across multiple blockchains.
Featured*
