playwright-mcp

What This Skill Does

The Playwright MCP skill provides powerful browser automation capabilities directly within your OpenClaw environment. Leveraging the Playwright MCP server, this skill allows you to programmatically control web browsers (Chrome, Firefox, or WebKit) to perform a wide range of tasks. You can navigate to any URL, interact with web elements by clicking buttons, filling out forms with text, and selecting options from dropdowns. Beyond interaction, it excels at data extraction, enabling you to retrieve text content from specific elements or execute custom JavaScript on a page to pull structured data. For visual context or debugging, you can capture screenshots and obtain page snapshots. The skill also supports advanced features like uploading files, simulating keyboard presses, and closing browser contexts when done. It's designed for building sophisticated browser automation workflows, from simple data scraping to complex multi-step interactions.

Installation

To install the Playwright MCP skill, use the following command in your OpenClaw environment:

clawhub install openclaw/skills/skills/spiceman161/playwright-mcp

If this is your first time using Playwright, you may need to install the browser binaries. Run the following command:

npx playwright install chromium

(Replace chromium with firefox or webkit if you intend to use those browsers).

Use Cases

This skill is ideal for a variety of automation tasks:

1. Web Scraping: Extracting data from websites, such as product prices, article content, or table data, even from dynamic pages.
2. Form Submission: Automating the process of filling out and submitting web forms, such as login forms, registration pages, or contact forms.
3. Automated Testing: Simulating user interactions to test web application functionality.
4. Data Entry: Populating online forms with data from external sources.
5. Report Generation: Navigating to specific web pages, extracting key information, and compiling it into reports.
6. Workflow Automation: Chaining multiple browser actions to automate complex online processes.

Example Prompts

1. "Navigate to https://example.com/products and extract the text content of all elements with the class product-name."
2. "Fill out the login form on https://example.com/login with username testuser and password securepass, then click the submit button and retrieve the text from the element with selector .welcome-message."
3. "Open https://example.com/upload and upload the file located at /path/to/my/document.pdf using the file input with the ID file-input."

Tips & Limitations

• Headless Operation: For faster and non-interactive execution, consider starting the Playwright MCP server in headless mode using the --headless flag. This is ideal for server environments or automated scripts.
• Browser Choice: While Chromium is default, you can specify firefox or webkit using the --browser option for compatibility testing or specific needs.
• Viewport Size: For consistent layout rendering, especially when taking screenshots or extracting visual data, set a specific viewport size with --viewport-size (e.g., 1280x720).
• Error Handling: Be mindful of potential network errors or element-not-found issues. Implement robust error handling in your prompts, potentially using browser_evaluate to check for conditions before proceeding.
• Security: Be cautious when navigating to untrusted websites or interacting with sensitive forms. Utilize --allowed-hosts and --blocked-origins options for enhanced security if needed. Avoid running the server with --ignore-https-errors unless absolutely necessary and you understand the risks.
• Dynamic Content: Websites that heavily rely on JavaScript for content loading might require using browser_evaluate with custom scripts to ensure data is captured after the page has fully rendered and updated.
• Resource Usage: Running multiple browser instances or complex automation can consume significant system resources (CPU, RAM). Monitor your system's performance.