playwright-browser

Playwright Browser Skill - Browser automation skill

⚡ AI Calling Guide (Required Reading for OpenClaw)

How to Call MCP Tools

When a user requests a browser operation, you need to call the corresponding tool via the MCP protocol. The calling methods are as follows:

Basic Calling Flow

Launch the browser → Call browser_launch
Visit the webpage → Call browser_goto
Perform operations → Call the corresponding tools (click, fill, extract, etc.)
Close the browser → Call browser_close

Quick Reference for Common Tools

User request	Tool to call	Parameter example
"Visit a website"	`browser_goto`	`{ "url": "https://example.com" }`
"Click a button"	`browser_click`	`{ "selector": "button.submit" }`
"Fill out a form"	`browser_fill`	`{ "selector": "#username", "value": "admin" }`
"Get the title"	`browser_get_title`	`{}`
"Screenshot"	`browser_screenshot`	`{ "path": "screenshot.png", "fullPage": true }`
"Get text"	`browser_get_text`	`{ "selector": "h1" }`
"Wait for element"	`browser_wait_for_selector`	`{ "selector": ".content" }`

Complete example: Visit a webpage and get the title

用户："访问 example.com 并获取页面标题"

你应该调用：
1. browser_launch({ "headless": false })
2. browser_goto({ "url": "https://example.com" })
3. browser_get_title({})
4. browser_close({})

Complete example: Search operation

用户："在百度搜索 OpenClaw"

你应该调用：
1. browser_launch({})
2. browser_goto({ "url": "https://www.baidu.com" })
3. browser_fill({ "selector": "#kw", "value": "OpenClaw" })
4. browser_click({ "selector": "#su" })
5. browser_wait_for_selector({ "selector": ".result" })
6. browser_close({})

Important Notes

✅ Must call browser_launch first - The browser must be launched before any operation
✅ Call browser_close when finished - Release resources
✅ Wait for elements to load - Use browser_wait_for_selector to ensure the element exists
✅ Selector syntax - Use CSS selectors (#id, .class, button[type="submit"])

🚀 User Guide

This is a powerful browser automation skill that can help you control the browser, visit webpages, extract content, take screenshots, etc. It provides 101 complete browser operation tools via the MCP protocol.

How to Use This Skill

Basic usage: When you need to visit a webpage, extract information, or control the browser, just tell me your needs directly. I will automatically choose the appropriate tool to complete the task.

Example conversations:

"Help me visit example.com and get the page title"
"Open Baidu and search for 'OpenClaw'"
"Visit github.com and take a screenshot"
"Help me extract all links from this webpage"
"Launch the browser and visit https://www.google.com"

Main Features

Webpage access - Visit any website and get page content
Content extraction - Extract text, links, images, and other information
Page interaction - Click buttons, fill out forms, scroll pages
Screenshot saving - Take screenshots of the entire page or specific elements
Data scraping - Extract webpage data in batches
Automated testing - Simulate user operations and test website functionality

Common Use Cases

Scenario 1: Quickly view a webpage

你：帮我看看 example.com 上有什么内容
我：会自动启动浏览器，访问网页，提取并总结内容

Scenario 2: Extract information

你：从 news.ycombinator.com 提取今天的热门文章标题
我：会访问网页，提取所有文章标题并整理给你

Scenario 3: Webpage screenshot

你：帮我截取 github.com 首页的截图
我：会访问网页并保存截图

Scenario 4: Form filling

你：帮我在这个网站的搜索框输入 "OpenClaw" 并搜索
我：会找到搜索框，输入内容，点击搜索按钮

💡 Usage Tips

No need to specify the tool name - Just state your needs directly, and I will automatically choose the appropriate tools
Supports Chinese and English - You can describe your needs in Chinese or English
Supports complex tasks - Multiple operations can be combined to complete complex tasks
Automatically handles errors - If problems are encountered, I will automatically retry or adjust the strategy

🔧 Tool Calling Guide (for OpenClaw)

Basic Calling Process

Step 1: Launch the browser

工具名称: browser_launch
参数: {
  "browserType": "chromium",
  "headless": false
}

Step 2: Visit a webpage

工具名称: browser_goto
参数: {
  "url": "https://example.com",
  "waitUntil": "networkidle"
}

Step 3: Extract content

工具名称: browser_get_title
参数: {}

Step 4: Close the browser

工具名称: browser_close
参数: {}

Quick Reference for Common Tools

1. Launch the browser

{
  "tool": "browser_launch",
  "arguments": {
    "browserType": "chromium",
    "headless": false
  }
}

2. Visit a webpage

{
  "tool": "browser_goto",
  "arguments": {
    "url": "https://example.com"
  }
}

3. Get the page title

{
  "tool": "browser_get_title",
  "arguments": {}
}

4. Get the page text

{
  "tool": "browser_get_text",
  "arguments": {
    "selector": "body"
  }
}

5. Click an element

{
  "tool": "browser_click",
  "arguments": {
    "selector": "button.submit"
  }
}

6. Fill out a form

{
  "tool": "browser_fill",
  "arguments": {
    "selector": "#username",
    "value": "user@example.com"
  }
}

7. Take a screenshot

{
  "tool": "browser_screenshot",
  "arguments": {
    "path": "screenshot.png",
    "fullPage": true
  }
}

8. Get all links

{
  "tool": "browser_get_links",
  "arguments": {}
}

9. Wait for an element

{
  "tool": "browser_wait_for_selector",
  "arguments": {
    "selector": ".content",
    "timeout": 10000
  }
}

10. Close the browser

{
  "tool": "browser_close",
  "arguments": {}
}

Complete Task Examples

Example 1: Visit a webpage and extract the title

步骤 1: browser_launch
  参数: { "headless": false }

步骤 2: browser_goto
  参数: { "url": "https://example.com" }

步骤 3: browser_get_title
  参数: {}

步骤 4: browser_close
  参数: {}

Example 2: Search and extract results

步骤 1: browser_launch
  参数: { "headless": false }

步骤 2: browser_goto
  参数: { "url": "https://www.baidu.com" }

步骤 3: browser_fill
  参数: { "selector": "#kw", "value": "OpenClaw" }

步骤 4: browser_click
  参数: { "selector": "#su" }

步骤 5: browser_wait_for_selector
  参数: { "selector": ".result", "timeout": 5000 }

步骤 6: browser_get_text
  参数: { "selector": ".result" }

步骤 7: browser_close
  参数: {}

Example 3: Extract webpage data

步骤 1: browser_launch
  参数: {}

步骤 2: browser_goto
  参数: { "url": "https://news.ycombinator.com" }

步骤 3: browser_wait_for_selector
  参数: { "selector": ".itemlist" }

步骤 4: browser_evaluate
  参数: { 
    "script": "Array.from(document.querySelectorAll('.titleline > a')).map(a => ({ title: a.textContent, url: a.href }))"
  }

步骤 5: browser_close
  参数: {}

Important Notes

You must launch the browser first - Before using any other tool, you must first call browser_launch
Close it after use - After the task is completed, call browser_close to release resources
Wait for the page to load - After visiting a webpage, use browser_wait_for_selector to wait for content to load
Selectors must be accurate - Use the correct CSS selectors to locate elements
Handle errors - If a tool call fails, check whether the parameters are correct

📚 Technical Documentation

The following is the complete tool list and technical documentation for advanced users' reference.

Browser Management (8 tools)
Page Navigation (4 tools)
Element Interaction (12 tools)
Keyboard and Mouse Operations (8 tools)
Content Extraction (11 tools)
Advanced Selectors (7 tools)
Wait Operations (7 tools)
Screenshots and PDF (3 tools)
JavaScript Execution (3 tools)
Cookies and Storage (8 tools)
Network Control (7 tools)
File Operations (2 tools)
Viewport and Device (6 tools)
Scroll Operations (2 tools)
Performance Metrics (3 tools)
Accessibility Features (1 tool)
Time Control (5 tools)
Permission Management (2 tools)
Dialog Handling (1 tool)
Frame Operations (1 tool)

Browser Management

browser_launch

Launch a browser instance (supports advanced features such as device emulation, video recording, tracing, etc.)

Parameters:

browserType: 'chromium' | 'firefox' | 'webkit' (default: 'chromium')
headless: boolean - Whether to run in headless mode (default: true)
viewport: { width: number, height: number } - Viewport size
deviceName: string - Device name, such as 'iPhone 13', 'Pixel 5'
recordVideo: boolean - Whether to record video
recordTrace: boolean - Whether to record tracing
slowMo: number - Slow motion delay (milliseconds)

Example call:

{
  "browserType": "chromium",
  "headless": false,
  "viewport": { "width": 1920, "height": 1080 },
  "deviceName": "iPhone 13"
}

browser_close

Close the browser and release all resources

Parameters: None

Example call:

{}

browser_new_page

Create a new browser page (tab)

Parameters: None

Example call:

{}

browser_switch_page

Switch to the page at the specified index

Parameters:

index: number - Page index (starting from 0)

Example call:

{ "index": 1 }

browser_close_page

Close the page at the specified index

Parameters:

index: number - Page index (optional, closes the current page by default)

Example call:

{ "index": 0 }

browser_get_all_pages

Get a list of all open pages

Parameters: None

Example call:

{}

browser_get_version

Get browser version information

Parameters: None

Example call:

{}

browser_is_connected

Check browser connection status

Parameters: None

Example call:

{}

Page Navigation

browser_goto

Navigate to the specified URL

Parameters:

url: string - Target URL (required)
waitUntil: 'load' | 'domcontentloaded' | 'networkidle' - Wait condition
timeout: number - Timeout (milliseconds)

Example call:

{
  "url": "https://www.example.com",
  "waitUntil": "networkidle",
  "timeout": 30000
}

browser_go_back

Go back to the previous page

Parameters: None

Example call:

{}

browser_go_forward

Go forward to the next page

Parameters: None

Example call:

{}

browser_reload

Refresh the current page

Parameters: None

Example call:

{}

Element Interaction

browser_click

Click a page element

Parameters:

selector: string - CSS selector (required)
timeout: number - Timeout (milliseconds)
button: 'left' | 'right' | 'middle' - Mouse button
clickCount: number - Click count

Example call:

{
  "selector": "button.submit",
  "button": "left",
  "clickCount": 1
}

browser_dblclick

Double-click an element

Parameters:

selector: string - CSS selector (required)

Example call:

{ "selector": ".item" }

browser_hover

Hover the mouse over an element

Parameters:

selector: string - CSS selector (required)

Example call:

{ "selector": ".menu-item" }

browser_fill

Fill a form field (clear before filling)

Parameters:

selector: string - CSS selector (required)
value: string - Value to fill (required)

Example call:

{
  "selector": "#username",
  "value": "user@example.com"
}

browser_type

Type text character by character (simulates real keyboard input)

Parameters:

selector: string - CSS selector (required)
text: string - The text to input (required)
delay: number - The delay between each character (in milliseconds)

Usage example:

{
  "selector": "#search",
  "text": "playwright",
  "delay": 100
}

browser_press

Press a keyboard key

Parameters:

selector: string - CSS selector (required)
key: string - Key name (such as 'Enter', 'Tab', 'Escape')

Usage example:

{
  "selector": "#search",
  "key": "Enter"
}

browser_select

Select a dropdown option

Parameters:

selector: string - CSS selector (required)
value: string | string[] - Option value(s) (required)

Usage example:

{
  "selector": "select#country",
  "value": "US"
}

browser_check

Check a checkbox

Parameters:

selector: string - CSS selector (required)

Usage example:

{ "selector": "#agree-terms" }

browser_uncheck

Uncheck a checkbox

Parameters:

selector: string - CSS selector (required)

Usage example:

{ "selector": "#newsletter" }

browser_focus

Focus on an element

Parameters:

selector: string - CSS selector (required)

Usage example:

{ "selector": "#email" }

browser_drag

Drag an element to a target position

Parameters:

sourceSelector: string - Source element selector (required)
targetSelector: string - Target element selector (required)

Usage example:

{
  "sourceSelector": ".draggable",
  "targetSelector": ".drop-zone"
}

browser_tap

Touch tap (mobile)

Parameters:

selector: string - CSS selector (required)

Usage example:

{ "selector": ".mobile-button" }

Keyboard and mouse operations

browser_keyboard_down

Press a keyboard key (without releasing)

Parameters:

key: string - Key name (required)

Usage example:

{ "key": "Shift" }

browser_keyboard_up

Release a keyboard key

Parameters:

key: string - Key name (required)

Usage example:

{ "key": "Shift" }

browser_mouse_move

Move the mouse to specified coordinates

Parameters:

x: number - X coordinate (required)
y: number - Y coordinate (required)
steps: number - Number of movement steps (smooth movement)

Usage example:

{
  "x": 100,
  "y": 200,
  "steps": 10
}

browser_mouse_click

Click the mouse at specified coordinates

Parameters:

x: number - X coordinate (required)
y: number - Y coordinate (required)

Usage example:

{
  "x": 150,
  "y": 250
}

browser_mouse_wheel

Scroll the mouse wheel

Parameters:

deltaX: number - Horizontal scroll amount (required)
deltaY: number - Vertical scroll amount (required)

Usage example:

{
  "deltaX": 0,
  "deltaY": 100
}

browser_mouse_down

Press a mouse button (without releasing)

Parameters:

button: 'left' | 'right' | 'middle' - Mouse button
clickCount: number - Number of clicks

Usage example:

{
  "button": "left",
  "clickCount": 1
}

browser_mouse_up

Release a mouse button

Parameters:

button: 'left' | 'right' | 'middle' - Mouse button
clickCount: number - Number of clicks

Usage example:

{
  "button": "left",
  "clickCount": 1
}

browser_keyboard_insert_text

Insert text (without triggering keyboard events, directly setting the value)

Parameters:

text: string - The text to insert (required)

Usage example:

{
  "text": "Hello World"
}

Content extraction

browser_get_text

Get the text content of an element

Parameters:

selector: string - CSS selector (required)

Usage example:

{ "selector": "h1.title" }

browser_get_title

Get the page title

Parameters: None

Example call:

{}

browser_get_html

Get the HTML content of the entire page

Parameters: None

Example call:

{}

browser_get_links

Get all links on the page

Parameters: None

Example call:

{}

browser_get_attribute

Get the attribute value of an element

Parameters:

selector: string - CSS selector (required)
attribute: string - attribute name (required)

Example call:

{
  "selector": "img.logo",
  "attribute": "src"
}

browser_get_input_value

Get the value of an input field

Parameters:

selector: string - CSS selector (required)

Example call:

{ "selector": "#email" }

browser_is_visible

Check whether an element is visible

Parameters:

selector: string - CSS selector (required)

Example call:

{ "selector": ".modal" }

browser_is_enabled

Check whether an element is enabled

Parameters:

selector: string - CSS selector (required)

Example call:

{ "selector": "button.submit" }

browser_is_checked

Check whether a checkbox/radio button is selected

Parameters:

selector: string - CSS selector (required)

Example call:

{ "selector": "#agree" }

browser_count

Count the number of elements matching the selector

Parameters:

selector: string - CSS selector (required)

Example call:

{ "selector": ".product-item" }

browser_get_current_url

Get the current page URL

Parameters: None

Example call:

{}

Advanced selectors

browser_get_by_role

Find elements by ARIA role

Parameters:

role: string - ARIA role (required)
name: string - accessible name

Example call:

{
  "role": "button",
  "name": "Submit"
}

browser_get_by_text

Find elements by text content

Parameters:

text: string - text content (required)
exact: boolean - whether to match exactly

Example call:

{
  "text": "Sign In",
  "exact": true
}

browser_get_by_label

Find form elements by label text

Parameters:

text: string - label text (required)
exact: boolean - whether to match exactly

Example call:

{
  "text": "Email Address",
  "exact": false
}

browser_get_by_placeholder

Find input fields by placeholder text

Parameters:

text: string - placeholder text (required)
exact: boolean - whether to match exactly

Example call:

{
  "text": "Enter your email",
  "exact": false
}

browser_get_by_test_id

Find elements by test ID

Parameters:

testId: string - test ID (required)

Example call:

{ "testId": "submit-button" }

browser_get_by_alt_text

Find image elements by alt attribute text

Parameters:

text: string - alt text (required)
exact: boolean - whether to match exactly

Example call:

{
  "text": "Company Logo",
  "exact": false
}

browser_get_by_title

Find elements by title attribute

Parameters:

text: string - title text (required)
exact: boolean - whether to match exactly

Example call:

{
  "text": "Click to expand",
  "exact": false
}

Wait operations

browser_wait_for_selector

Wait for an element to appear in the DOM

Parameters:

selector: string - CSS selector (required)
timeout: number - timeout (milliseconds)
state: 'attached' | 'visible' | 'hidden' - wait state

Example call:

{
  "selector": ".loading-complete",
  "timeout": 10000,
  "state": "visible"
}

browser_wait_for_timeout

Wait for a specified time

Parameters:

timeout: number - wait time (milliseconds, required)

Example call:

{ "timeout": 3000 }

browser_wait_for_url

Wait for URL to match the specified pattern

Parameters:

url: string - URL pattern (required)
timeout: number - timeout (milliseconds)

Example call:

{
  "url": "https://example.com/dashboard",
  "timeout": 5000
}

browser_wait_for_request

Wait for network request

Parameters:

urlPattern: string - URL pattern (required)
timeout: number - timeout (milliseconds)

Example call:

{
  "urlPattern": "**/api/users",
  "timeout": 10000
}

browser_wait_for_response

Wait for network response

Parameters:

urlPattern: string - URL pattern (required)
timeout: number - timeout (milliseconds)

Example call:

{
  "urlPattern": "**/api/data",
  "timeout": 10000
}

browser_wait_for_function

Wait for a JavaScript function to return true

Parameters:

fn: string - JavaScript function code (required)
arg: any - arguments passed to the function
timeout: number - timeout (milliseconds)
polling: number - polling interval (milliseconds)

Example call:

{
  "fn": "() => document.readyState === 'complete'",
  "timeout": 5000,
  "polling": 100
}

browser_wait_for_load_state

Wait for the page to load to the specified state

Parameters:

state: 'load' | 'domcontentloaded' | 'networkidle' - load state (required)
timeout: number - timeout (milliseconds)

Example call:

{
  "state": "networkidle",
  "timeout": 30000
}

Screenshots and PDF

browser_screenshot

Capture a page screenshot

Parameters:

path: string - save path
fullPage: boolean - whether to capture the full page
type: 'png' | 'jpeg' - image format
quality: number - image quality (0-100, JPEG only)

Example call:

{
  "path": "screenshot.png",
  "fullPage": true,
  "type": "png"
}

browser_screenshot_element

Capture a screenshot of the specified element

Parameters:

selector: string - CSS selector (required)
path: string - save path

Example call:

{
  "selector": ".chart",
  "path": "chart.png"
}

browser_pdf

Generate a page PDF

Parameters:

path: string - save path
format: string - paper format (e.g. 'A4', 'Letter')
printBackground: boolean - whether to print the background

Example call:

{
  "path": "page.pdf",
  "format": "A4",
  "printBackground": true
}

JavaScript execution

browser_evaluate

Execute JavaScript code in the page context

Parameters:

script: string - JavaScript code (required)
arg: any - arguments passed to the script

Example call:

{
  "script": "document.querySelectorAll('h2').length"
}

browser_add_script_tag

Add a script tag to the page

Parameters:

url: string - script URL
content: string - script content

Example call:

{
  "url": "https://cdn.example.com/library.js"
}

browser_add_style_tag

Add a style tag to the page

Parameters:

url: string - style URL
content: string - style content

Example call:

{
  "content": "body { background: red; }"
}

Cookie and storage

browser_set_cookies

Set one or more cookies

Parameters:

cookies: array - array of cookies (required)
- name: string - cookie name
- value: string - cookie value
- domain: string - domain
- path: string - path

Example call:

{
  "cookies": [
    {
      "name": "session",
      "value": "abc123",
      "domain": "example.com",
      "path": "/"
    }
  ]
}

browser_get_cookies

Get all cookies of the current page

Parameters: None

Example call:

{}

browser_clear_cookies

Clear all cookies

Parameters: None

Example call:

{}

browser_set_local_storage

Set LocalStorage Item

Parameters:

key: string - Key name (required)
value: string - Value (required)

Example call:

{
  "key": "theme",
  "value": "dark"
}

browser_get_local_storage

Get LocalStorage Item

Parameters:

key: string - Key name (optional, returns all if not provided)

Example call:

{ "key": "theme" }

browser_clear_local_storage

Clear LocalStorage

Parameters: None

Example call:

{}

browser_storage_state

Save storage state (Cookie and LocalStorage)

Parameters:

path: string - Save path

Example call:

{ "path": "storage.json" }

browser_restore_storage_state

Restore storage state

Parameters:

state: object - Storage state object (required)

Example call:

{
  "state": { "cookies": [], "origins": [] }
}

Network Control

browser_set_offline

Set offline mode

Parameters:

offline: boolean - Whether offline (required)

Example call:

{ "offline": true }

browser_block_requests

Intercept requests matching pattern

Parameters:

patterns: array - URL pattern array (required)

Example call:

{
  "patterns": ["*.jpg", "*.png", "*/ads/*"]
}

browser_mock_response

Mock network response

Parameters:

urlPattern: string - URL pattern (required)
response: object - Response object (required)
- status: number - Status code
- body: string - Response body
- contentType: string - Content type

Example call:

{
  "urlPattern": "**/api/users",
  "response": {
    "status": 200,
    "body": "{\"users\": []}",
    "contentType": "application/json"
  }
}

browser_get_request_logs

Get request logs

Parameters:

limit: number - Limit count

Example call:

{ "limit": 50 }

browser_get_response_logs

Get response logs

Parameters:

limit: number - Limit count

Example call:

{ "limit": 50 }

browser_get_console_logs

Get console logs

Parameters:

limit: number - Limit count

Example call:

{ "limit": 100 }

browser_clear_logs

Clear all logs (request, response, console)

Parameters: None

Example call:

{}

File Operations

browser_upload_file

Upload file to file input

Parameters:

selector: string - File input selector (required)
filePath: string | array - File path (required)

Example call:

{
  "selector": "input[type='file']",
  "filePath": "C:\\Users\\Admin\\document.pdf"
}

browser_download_file

Trigger file download

Parameters:

triggerSelector: string - Selector of element that triggers download (required)

Example call:

{ "triggerSelector": "a.download-link" }

Viewport and Device

browser_set_viewport_size

Set viewport size

Parameters:

width: number - Width (required)
height: number - Height (required)

Example call:

{
  "width": 1920,
  "height": 1080
}

browser_get_viewport_size

Get current viewport size

Parameters: None

Example call:

{}

browser_emulate_media

Emulate media type and color scheme

Parameters:

colorScheme: 'light' | 'dark' | 'no-preference' - Color scheme
media: 'screen' | 'print' - Media type

Example call:

{
  "colorScheme": "dark",
  "media": "screen"
}

browser_set_geolocation

Set geolocation

Parameters:

latitude: number - Latitude (required)
longitude: number - Longitude (required)
accuracy: number - Accuracy

Example:

{
  "latitude": 37.7749,
  "longitude": -122.4194,
  "accuracy": 100
}

browser_clear_geolocation

Clear geolocation settings

Parameters: None

Example:

{}

browser_touchscreen_tap

Tap specified coordinates on touchscreen (mobile)

Parameters:

x: number - X coordinate (required)
y: number - Y coordinate (required)

Example:

{
  "x": 100,
  "y": 200
}

Scroll operations

browser_scroll_to

Scroll to specified coordinates

Parameters:

x: number - X coordinate (required)
y: number - Y coordinate (required)

Example:

{
  "x": 0,
  "y": 1000
}

browser_scroll_into_view

Scroll element into view

Parameters:

selector: string - CSS selector (required)

Example:

{ "selector": "#footer" }

Performance metrics

browser_get_metrics

Get page performance metrics

Parameters: None

Example:

{}

Returned data includes:

domContentLoaded: DOM content loaded time
loadComplete: page fully loaded time
firstPaint: first paint time
firstContentfulPaint: first contentful paint time

browser_get_coverage

Start collecting JavaScript and CSS code coverage

Parameters: None

Example:

{}

browser_stop_coverage

Stop collecting code coverage and return results

Parameters: None

Example:

{}

Accessibility features

browser_get_accessibility_snapshot

Get page accessibility tree snapshot

Parameters:

selector: string - scope-limiting selector (optional)

Example:

{ "selector": "main" }

Time control

browser_install_clock

Install clock control (for testing time-related functionality)

Parameters:

time: number | string - initial time

Example:

{ "time": 1609459200000 }

browser_set_system_time

Set system time

Parameters:

time: number | string - timestamp or date string (required)

Example:

{ "time": "2024-01-01T00:00:00Z" }

browser_fast_forward

Fast-forward time

Parameters:

time: number - milliseconds to fast-forward (required)

Example:

{ "time": 60000 }

browser_pause_clock

Pause clock (freeze time)

Parameters: None

Example:

{}

browser_resume_clock

Resume clock

Parameters: None

Example:

{}

Permission management

browser_grant_permissions

Grant browser permissions

Parameters:

permissions: array - permission list (required)
- Possible values: 'geolocation', 'notifications', 'camera', 'microphone', 'clipboard-read', 'clipboard-write'
origin: string - domain restriction

Example:

{
  "permissions": ["geolocation", "notifications"],
  "origin": "https://example.com"
}

browser_clear_permissions

Clear all permissions

Parameters: None

Example:

{}

Dialog handling

browser_handle_dialog

Handle JavaScript dialogs (alert, confirm, prompt)

Parameters:

action: 'accept' | 'dismiss' - action type (required)
promptText: string - input text for prompt dialog

Example:

{
  "action": "accept",
  "promptText": "My Input"
}

Frame operations

browser_get_frames

Get all frames in the page

Parameters: None

Example call:

{}

🎯 Practical Usage Scenario Examples

Below are some practical usage scenarios showing how to interact with me in natural language to complete tasks.

Scenario 1: View webpage content

You say: "Help me see what's on example.com"

I will:

Launch the browser
Visit example.com
Extract the page title and main content
Summarize and tell you

Scenario 2: Search for information

You say: "Search Baidu for 'OpenClaw tutorial'"

I will:

Launch the browser
Visit Baidu
Enter the keyword in the search box
Click the search button
Extract the search results

Scenario 3: Extract data

You say: "Extract the top 10 news headlines from news.ycombinator.com"

I will:

Visit Hacker News
Locate the news list
Extract titles and links
Organize them into a list and return it to you

Scenario 4: Webpage screenshot

You say: "Help me take a screenshot of the github.com homepage"

I will:

Visit GitHub
Wait for the page to finish loading
Capture a full-page screenshot
Save it and tell you the file location

Scenario 5: Form operations

You say: "Help me enter the username and password on this login page"

I will:

Find the username input box
Fill in the username
Find the password input box
Fill in the password
Ask whether the login button needs to be clicked

Scenario 6: Monitor webpage changes

You say: "Check this webpage's price every 5 minutes"

I will:

Visit the webpage periodically
Extract the price information
Compare with the last time
Notify you immediately if there is a change

📖 Technical Documentation: Tool List

Below is the complete detailed documentation of the 101 tools, for advanced users and developers to reference.

Note: As a regular user, you don't need to understand these technical details. Just tell me your needs in natural language.

Usage Examples

Example 1: Basic webpage access and screenshot

1. browser_launch({ "headless": false })
2. browser_goto({ "url": "https://www.example.com" })
3. browser_get_title()
4. browser_screenshot({ "path": "screenshot.png", "fullPage": true })
5. browser_close()

Example 2: Form filling and submission

1. browser_launch()
2. browser_goto({ "url": "https://example.com/login" })
3. browser_fill({ "selector": "#username", "value": "user@example.com" })
4. browser_fill({ "selector": "#password", "value": "password123" })
5. browser_click({ "selector": "button[type='submit']" })
6. browser_wait_for_selector({ "selector": ".dashboard", "timeout": 10000 })
7. browser_close()

Example 3: Data scraping

1. browser_launch()
2. browser_goto({ "url": "https://example.com/products" })
3. browser_wait_for_selector({ "selector": ".product-list" })
4. browser_count({ "selector": ".product-item" })
5. browser_get_links()
6. browser_evaluate({ "script": "Array.from(document.querySelectorAll('.price')).map(e => e.textContent)" })
7. browser_close()

Example 4: Network interception and mocking

1. browser_launch()
2. browser_block_requests({ "patterns": ["*.jpg", "*.png", "*/ads/*"] })
3. browser_mock_response({ 
     "urlPattern": "**/api/users", 
     "response": { "status": 200, "body": "{\"users\": []}" }
   })
4. browser_goto({ "url": "https://example.com" })
5. browser_get_request_logs({ "limit": 50 })
6. browser_close()

Example 5: Mobile device emulation

1. browser_launch({ 
     "deviceName": "iPhone 13", 
     "headless": false 
   })
2. browser_goto({ "url": "https://example.com" })
3. browser_tap({ "selector": ".mobile-menu" })
4. browser_screenshot({ "path": "mobile.png" })
5. browser_close()

Example 6: Performance monitoring

1. browser_launch()
2. browser_goto({ "url": "https://example.com" })
3. browser_get_metrics()
4. browser_get_console_logs({ "limit": 100 })
5. browser_get_response_logs({ "limit": 50 })
6. browser_close()

Selector Syntax Reference

CSS Selectors

/* ID选择器 */
#element-id

/* 类选择器 */
.class-name

/* 属性选择器 */
[data-testid="submit"]
[name="username"]
[type="text"]

/* 组合选择器 */
div.container > button.primary
form input[type="text"]
ul li:first-child

/* 伪类选择器 */
button:hover
input:focus
div:nth-child(2)

Advanced Selectors

// 通过文本内容
browser_get_by_text({ "text": "Sign In" })

// 通过ARIA角色
browser_get_by_role({ "role": "button", "name": "Submit" })

// 通过标签
browser_get_by_label({ "text": "Email Address" })

// 通过占位符
browser_get_by_placeholder({ "text": "Enter your email" })

// 通过测试ID
browser_get_by_test_id({ "testId": "submit-button" })

Common Keyboard Keys

Enter - Enter key
Tab - Tab key
Escape - Esc key
Backspace - Backspace key
Delete - Delete key
ArrowUp, ArrowDown, ArrowLeft, ArrowRight - Arrow keys
Home, End - Home/End key
PageUp, PageDown - Page navigation keys
Control, Shift, Alt, Meta - Modifier keys
F1-F12 - Function keys

Error Handling and Best Practices

1. Browser Lifecycle Management

You must call browser_launch to launch the browser before use
After use, you should call browser_close to release resources
Calling other methods when the browser is not launched will throw an error

2. Waiting Strategy

Use browser_wait_for_selector to ensure elements are fully loaded
Set a reasonable timeout (default 30 seconds)
Use waitUntil: 'networkidle' to wait for network requests to complete

3. Selector Best Practices

Prefer stable selectors (ID, data-testid)
Avoid volatile selectors (nth-child, complex CSS paths)
Use semantic selectors (getByRole, getByLabel) to improve maintainability

4. Performance Optimization

Use headless: true to improve execution speed
Use browser_block_requests to intercept unnecessary resources (images, ads)
Set the viewport size appropriately to avoid oversized screenshots

5. Debugging Tips

Use headless: false to observe browser operations
Use the slowMo parameter to slow down operations
Use browser_get_console_logs to view page errors
Use recordVideo and recordTrace to record the operation process

6. Error Handling

// 所有工具调用失败时会返回错误信息
// 建议在使用时：
1. 先检查浏览器是否已启动
2. 使用 wait_for_selector 确保元素加载完成
3. 设置合理的超时时间
4. 使用 try-catch 处理异常情况

Notes

Path Format: On Windows, use double backslashes \\ or forward slashes /
- Correct:C:\\Users\\Admin\\file.pdf or C:/Users/Admin/file.pdf
- Incorrect:C:\Users\Admin\file.pdf
Timeout Settings: The default timeout is 30 seconds and can be adjusted as needed
- Increase the timeout when the network is slow
- Reduce the timeout for fast operations
Screenshot Return: Screenshots return image data encoded in base64
- Can be saved to a file or used directly
Cookie Domain: You must specify the correct domain when setting cookies
- The domain must match the current page
JavaScript Execution: Code in evaluate executes in the page context
- It can access the page's DOM and global variables
- The return value must be serializable
Device Emulation: For supported device names, refer to the Playwright device list
- Common: 'iPhone 13', 'Pixel 5', 'iPad Pro'
Permission Granting: Some features require permissions to be granted first
- Geolocation requires the 'geolocation' permission
- Notifications require the 'notifications' permission

Total Tool Count Statistics

Browser Management: 8 tools
Page Navigation: 4 tools
Element Interaction: 12 tools
Keyboard and Mouse Operations: 5 tools
Content Extraction: 11 tools
Advanced Selectors: 5 tools
Wait Operations: 5 tools
Screenshots and PDF: 3 tools
JavaScript Execution: 3 tools
Cookie and Storage: 8 tools
Network Control: 7 tools
File Operations: 2 tools
Viewport and Device: 4 tools
Scroll Operations: 2 tools
Performance Metrics: 1 tool
Accessibility Features: 1 tool
Time Control: 3 tools
Permission Management: 2 tools
Dialog Handling: 1 tool
Frame Operations: 1 tool

Total: 101 core tools

Version Information

Version: 2.0.0
Update Date: 2024
Playwright Version: Latest stable version
Supported Platforms: Windows, macOS, Linux

Technical Support

If you encounter problems, please check:

Whether Playwright is correctly installed
Whether browser drivers have been downloaded
Whether the selectors are correct
Whether the timeout is sufficient
Whether the network connection is normal

For more information, please refer to:

Playwright official documentation:https://playwright.dev
Project README documentation
Windows Compatibility Guide

About this skill

⚡ AI Calling Guide (Required Reading for OpenClaw)

How to Call MCP Tools

Basic Calling Flow

Quick Reference for Common Tools

Complete example: Visit a webpage and get the title

Complete example: Search operation

Important Notes

🚀 User Guide

How to Use This Skill

Main Features

Common Use Cases

💡 Usage Tips

🔧 Tool Calling Guide (for OpenClaw)

Basic Calling Process

Quick Reference for Common Tools

1. Launch the browser

2. Visit a webpage

3. Get the page title

4. Get the page text

5. Click an element

6. Fill out a form

7. Take a screenshot

8. Get all links

9. Wait for an element

10. Close the browser

Complete Task Examples

Example 1: Visit a webpage and extract the title

Example 2: Search and extract results

Example 3: Extract webpage data

Important Notes

📚 Technical Documentation

Table of Contents

Browser Management

browser_launch

browser_close

browser_new_page

browser_switch_page

browser_close_page

browser_get_all_pages

browser_get_version

browser_is_connected

Page Navigation

browser_goto

browser_go_back

browser_go_forward

browser_reload

Element Interaction

browser_click

browser_dblclick

browser_hover

browser_fill

browser_type

browser_press

browser_select

browser_check

browser_uncheck

browser_focus

browser_drag

browser_tap

Keyboard and mouse operations

browser_keyboard_down

browser_keyboard_up

browser_mouse_move

browser_mouse_click

browser_mouse_wheel

browser_mouse_down

browser_mouse_up

browser_keyboard_insert_text

Content extraction

browser_get_text

browser_get_title

browser_get_html

browser_get_links

browser_get_attribute

browser_get_input_value

browser_is_visible

browser_is_enabled

browser_is_checked