Playwright Browser Skill - Browser Automation Skill

⚡ AI Invocation Guide (Required Reading for OpenClaw)

How to Invoke MCP Tools

Basic Invocation Process

1. Launch Browser → Call

   browser_launch

2. Access Web Page → Call

   browser_goto

3. Perform Operations → Call corresponding tools (click, fill, extract, etc.)
4. Close Browser → Call

   browser_close

Common Tools Quick Reference

browser_goto

{ "url": "https://example.com" }

browser_click

{ "selector": "button.submit" }

browser_fill

{ "selector": "#username", "value": "admin" }

browser_get_title

{}

browser_screenshot

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

browser_get_text

{ "selector": "h1" }

browser_wait_for_selector

{ "selector": ".content" }

Complete Example: Access a web page and get its title

User: "Access example.com and get the page title"

You should call:
1. browser_launch({ "headless": false })
2. browser_goto({ "url": "https://example.com" })
3. browser_get_title({})
4. browser_close({})

Complete Example: Search operation

User: "Search for OpenClaw on Baidu"

You should call:
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 - Always launch the browser before any operations
• ✅ Call browser_close after use - Release resources
• ✅ Wait for elements to load - Use browser_wait_for_selector to ensure elements exist
• ✅ Selector syntax - Use CSS selectors (#id, .class, button[type="submit"])

🚀 User Guide

How to use this skill

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

Main Functions

1. Web page access - Access any website and get page content
2. Content extraction - Extract text, links, images and other information
3. Page interaction - Click buttons, fill forms, scroll pages
4. Screenshot saving - Take screenshots of the entire page or specific elements
5. Data scraping - Batch extract web page data
6. Automated testing - Simulate user operations to test website functions

Common Usage Scenarios

You: Help me see what content is on example.com
Me: Will automatically launch the browser, access the web page, extract and summarize the content

You: Extract today's popular article titles from news.ycombinator.com
Me: Will access the web page, extract all article titles and organize them for you

You: Help me take a screenshot of the github.com homepage
Me: Will access the web page and save the screenshot

You: Help me enter "OpenClaw" in the search box of this website and search
Me: Will find the search box, enter the content, click the search button

💡 Usage Tips

• No need to specify tool names - Just state your requirements, I will automatically select the appropriate tools
• Supports Chinese and English - You can describe your requirements in Chinese or English
• Supports complex tasks - Multiple operations can be combined to complete complex tasks
• Automatic error handling - If problems are encountered, I will automatically retry or adjust the strategy

🔧 Tool Invocation Guide (For OpenClaw)

Basic Invocation Process

Tool name: browser_launch
Parameters: {
  "browserType": "chromium",
  "headless": false
}

Tool name: browser_goto
Parameters: {
  "url": "https://example.com",
  "waitUntil": "networkidle"
}

Tool name: browser_get_title
Parameters: {}

Tool name: browser_close
Parameters: {}

Common Tools Quick Reference

1. Launch Browser

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

2. Access Web Page

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

3. Get Page Title

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

4. Get Page Text

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

5. Click Element

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

6. Fill Form

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

7. Take Screenshot

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

8. Get All Links

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

9. Wait for Element

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

10. Close Browser

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

Complete Task Examples

Example 1: Access web page and extract title

Step 1: browser_launch
  Parameters: { "headless": false }

Step 2: browser_goto
  Parameters: { "url": "https://example.com" }

Step 3: browser_get_title
  Parameters: {}

Step 4: browser_close
  Parameters: {}

Example 2: Search and extract results

Step 1: browser_launch
  Parameters: { "headless": false }

Step 2: browser_goto
  Parameters: { "url": "https://www.baidu.com" }

Step 3: browser_fill
  Parameters: { "selector": "#kw", "value": "OpenClaw" }

Step 4: browser_click
  Parameters: { "selector": "#su" }

Step 5: browser_wait_for_selector
  Parameters: { "selector": ".result", "timeout": 5000 }

Step 6: browser_get_text
  Parameters: { "selector": ".result" }

Step 7: browser_close
  Parameters: {}

Example 3: Extract web page data

Step 1: browser_launch
  Parameters: {}

Step 2: browser_goto
  Parameters: { "url": "https://news.ycombinator.com" }

Step 3: browser_wait_for_selector
  Parameters: { "selector": ".itemlist" }

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

Step 5: browser_close
  Parameters: {}

Important Notes

1. Must launch the browser first - Before using any other tools, you must call

   browser_launch

   first
2. Close after use - After the task is completed, call

   browser_close

   to release resources
3. Wait for page loading - After accessing a web page, use

   browser_wait_for_selector

   to wait for content to load
4. Selectors should be accurate - Use correct CSS selectors to locate elements
5. Handle errors - If tool invocation fails, check if parameters are correct

📚 Technical Documentation

Table of Contents

1. Browser Management (8 tools)
2. Page Navigation (4 tools)
3. Element Interaction (12 tools)
4. Keyboard and Mouse Operations (8 tools)
5. Content Extraction (11 tools)
6. Advanced Selectors (7 tools)
7. Wait Operations (7 tools)
8. Screenshots and PDF (3 tools)
9. JavaScript Execution (3 tools)
10. Cookie and Storage (8 tools)
11. Network Control (7 tools)
12. File Operations (2 tools)
13. Viewport and Device (6 tools)
14. Scroll Operations (2 tools)
15. Performance Metrics (3 tools)
16. Accessibility Features (1 tool)
17. Time Control (5 tools)
18. Permission Management (2 tools)
19. Dialog Handling (1 tool)
20. Frame Operations (1 tool)

Browser Management

browser_launch

• 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, e.g. 'iPhone 13', 'Pixel 5'

• recordVideo

  : boolean - Whether to record video

• recordTrace

  : boolean - Whether to record tracing

• slowMo

  : number - Slow motion delay (milliseconds)

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

browser_close

{}

browser_new_page

{}

browser_switch_page

• index

  : number - Page index (starts from 0)

{ "index": 1 }

browser_close_page

• index

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

{ "index": 0 }

browser_get_all_pages

{}

browser_get_version

{}

browser_is_connected

{}

Page Navigation

browser_goto

• url

  : string - Target URL (required)

• waitUntil

  : 'load' | 'domcontentloaded' | 'networkidle' - Wait condition

• timeout

  : number - Timeout period (milliseconds)

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

browser_go_back

{}

browser_go_forward

{}

browser_reload

{}

Element Interaction

browser_click

• selector

  : string - CSS selector (required)

• timeout

  : number - Timeout period (milliseconds)

• button

  : 'left' | 'right' | 'middle' - Mouse button

• clickCount

  : number - Number of clicks

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

browser_dblclick

• selector

  : string - CSS selector (required)

{ "selector": ".item" }

browser_hover

• selector

  : string - CSS selector (required)

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

browser_fill

• selector

  : string - CSS selector (required)

• value

  : string - Value to fill in (required)

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

browser_type

• selector

  : string - CSS selector (required)

• text

  : string - Text to enter (required)

• delay

  : number - Delay between each character (milliseconds)

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

browser_press

• selector

  : string - CSS selector (required)

• key

  : string - Key name (e.g. 'Enter', 'Tab', 'Escape')

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

browser_select

• selector

  : string - CSS selector (required)

• value

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

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

browser_check

• selector

  : string - CSS selector (required)

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

browser_uncheck

• selector

  : string - CSS selector (required)

{ "selector": "#newsletter" }

browser_focus

• selector

  : string - CSS selector (required)

{ "selector": "#email" }

browser_drag

• sourceSelector

  : string - Source element selector (required)

• targetSelector

  : string - Target element selector (required)

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

browser_tap

• selector

  : string - CSS selector (required)

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

Keyboard and Mouse Operations

browser_keyboard_down

• key

  : string - Key name (required)

{ "key": "Shift" }

browser_keyboard_up

• key

  : string - Key name (required)

{ "key": "Shift" }

browser_mouse_move

• x

  : number - X coordinate (required)

• y

  : number - Y coordinate (required)

• steps

  : number - Number of movement steps (for smooth movement)

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

browser_mouse_click

• x

  : number - X coordinate (required)

• y

  : number - Y coordinate (required)

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

browser_mouse_wheel

• deltaX

  : number - Horizontal scroll amount (required)

• deltaY

  : number - Vertical scroll amount (required)

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

browser_mouse_down

• button

  : 'left' | 'right' | 'middle' - Mouse button

• clickCount

  : number - Number of clicks

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

browser_mouse_up

• button

  : 'left' | 'right' | 'middle' - Mouse button

• clickCount

  : number - Number of clicks

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

browser_keyboard_insert_text

• text

  : string - Text to insert (required)

{
  "text": "Hello World"
}

Content Extraction

browser_get_text

• selector

  : string - CSS selector (required)

{ "selector": "h1.title" }

browser_get_title

{}

browser_get_html

{}

browser_get_links

{}

browser_get_attribute

• selector

  : string - CSS selector (required)

• attribute

  : string - Attribute name (required)

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

browser_get_input_value

• selector

  : string - CSS selector (required)

{ "selector": "#email" }

browser_is_visible

• selector

  : string - CSS selector (required)

{ "selector": ".modal" }

browser_is_enabled

• selector

  : string - CSS selector (required)

{ "selector": "button.submit" }

browser_is_checked

• selector

  : string - CSS selector (required)

{ "selector": "#agree" }

browser_count

• selector

  : string - CSS selector (required)

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

browser_get_current_url

{}

Advanced Selectors

browser_get_by_role

• role

  : string - ARIA role (required)

• name

  : string - Accessible name

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

browser_get_by_text

• text

  : string - Text content (required)

• exact

  : boolean - Whether to match exactly

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

browser_get_by_label

• text

  : string - Label text (required)

• exact

  : boolean - Whether to match exactly

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

browser_get_by_placeholder

• text

  : string - Placeholder text (required)

• exact

  : boolean - Whether to match exactly

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

browser_get_by_test_id

• testId

  : string - Test ID (required)

{ "testId": "submit-button" }

browser_get_by_alt_text

• text

  : string - Alt text (required)

• exact

  : boolean - Whether to match exactly

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

browser_get_by_title

• text

  : string - Title text (required)

• exact

  : boolean - Whether to match exactly

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

Wait Operations

browser_wait_for_selector

• selector

  : string - CSS selector (required)

• timeout

  : number - Timeout period (milliseconds)

• state

  : 'attached' | 'visible' | 'hidden' - Wait state

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

browser_wait_for_timeout

• timeout

  : number - Wait time (milliseconds, required)

{ "timeout": 3000 }

browser_wait_for_url

• url

  : string - URL pattern (required)

• timeout

  : number - Timeout period (milliseconds)

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

browser_wait_for_request

• urlPattern

  : string - URL pattern (required)

• timeout

  : number - Timeout period (milliseconds)

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

browser_wait_for_response

• urlPattern

  : string - URL pattern (required)

• timeout

  : number - Timeout period (milliseconds)

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

browser_wait_for_function

• fn

  : string - JavaScript function code (required)

• arg

  : any - Parameters passed to the function

• timeout

  : number - Timeout period (milliseconds)

• polling

  : number - Polling interval (milliseconds)

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

browser_wait_for_load_state

• state

  : 'load' | 'domcontentloaded' | 'networkidle' - Load state (required)

• timeout

  : number - Timeout period (milliseconds)

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

Screenshots and PDF

browser_screenshot

• path

  : string - Save path

• fullPage

  : boolean - Whether to capture the full page

• type

  : 'png' | 'jpeg' - Image format

• quality

  : number - Image quality (0-100, only for JPEG)

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

browser_screenshot_element

• selector

  : string - CSS selector (required)

• path

  : string - Save path

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

browser_pdf

• path

  : string - Save path

• format

  : string - Paper format (e.g. 'A4', 'Letter')

• printBackground

  : boolean - Whether to print background

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

JavaScript Execution

browser_evaluate

• script

  : string - JavaScript code (required)

• arg

  : any - Parameters passed to the script

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

browser_add_script_tag

• url

  : string - Script URL

• content

  : string - Script content

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

browser_add_style_tag

• url

  : string - Style URL

• content

  : string - Style content

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

Cookie and Storage

browser_set_cookies

• cookies

  : array - Cookie array (required)

  • name

    : string - Cookie name

  • value

    : string - Cookie value

  • domain

    : string - Domain name

  • path

    : string - Path

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

browser_get_cookies

{}

browser_clear_cookies

{}

browser_set_local_storage

• key

  : string - Key name (required)

• value

  : string - Value (required)

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

browser_get_local_storage

• key

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

{ "key": "theme" }

browser_clear_local_storage

{}

browser_storage_state

• path

  : string - Save path

{ "path": "storage.json" }

browser_restore_storage_state

• state

  : object - Storage state object (required)

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

Network Control

browser_set_offline

• offline

  : boolean - Whether to be offline (required)

{ "offline": true }

browser_block_requests

• patterns

  : array - URL pattern array (required)

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

browser_mock_response

• urlPattern

  : string - URL pattern (required)

• response

  : object - Response object (required)

  • status

    : number - Status code

  • body

    : string - Response body

  • contentType

    : string - Content type

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

browser_get_request_logs

• limit

  : number - Limit number

{ "limit": 50 }

browser_get_response_logs

• limit

  : number - Limit number

{ "limit": 50 }

browser_get_console_logs

• limit

  : number - Limit number

{ "limit": 100 }

browser_clear_logs

{}

File Operations

browser_upload_file

• selector

  : string - File input box selector (required)

• filePath

  : string | array - File path(s) (required)

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

browser_download_file

• triggerSelector

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

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

Viewport and Device

browser_set_viewport_size

• width

  : number - Width (required)

• height

  : number - Height (required)

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

browser_get_viewport_size

{}

browser_emulate_media

• colorScheme

  : 'light' | 'dark' | 'no-preference' - Color scheme

• media

  : 'screen' | 'print' - Media type

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

browser_set_geolocation

• latitude

  : number - Latitude (required)

• longitude

  : number - Longitude (required)

• accuracy

  : number - Accuracy

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

browser_clear_geolocation

{}

browser_touchscreen_tap

• x

  : number - X coordinate (required)

• y

  : number - Y coordinate (required)

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

Scroll Operations

browser_scroll_to

• x

  : number - X coordinate (required)

• y

  : number - Y coordinate (required)

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

browser_scroll_into_view

• selector

  : string - CSS selector (required)

{ "selector": "#footer" }

Performance Metrics

browser_get_metrics

{}

• domContentLoaded: DOM content loading time
• loadComplete: Page complete loading time
• firstPaint: First paint time
• firstContentfulPaint: First contentful paint time

browser_get_coverage

{}

browser_stop_coverage

{}

Accessibility Features

browser_get_accessibility_snapshot

• selector

  : string - Selector to limit the scope (optional)

{ "selector": "main" }

Time Control

browser_install_clock

• time

  : number | string - Initial time

{ "time": 1609459200000 }

browser_set_system_time

• time

  : number | string - Timestamp or date string (required)

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

browser_fast_forward

• time

  : number - Milliseconds to fast forward (required)

{ "time": 60000 }

browser_pause_clock

{}

browser_resume_clock

{}

Permission Management

browser_grant_permissions

• permissions

  : array - Permission list (required)
  • Optional values: 'geolocation', 'notifications', 'camera', 'microphone', 'clipboard-read', 'clipboard-write'

• origin

  : string - Limited domain name

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

browser_clear_permissions

{}

Dialog Handling

browser_handle_dialog

• action

  : 'accept' | 'dismiss' - Operation type (required)

• promptText

  : string - Input text for prompt dialogs

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

Frame Operations

browser_get_frames

{}

🎯 Practical Usage Scenario Examples

Scenario 1: View web page content

1. Launch the browser
2. Access example.com
3. Extract the page title and main content
4. Summarize and tell you

Scenario 2: Search for information

1. Launch the browser
2. Access Baidu
3. Enter keywords in the search box
4. Click the search button
5. Extract search results

Scenario 3: Extract data

1. Access Hacker News
2. Locate the news list
3. Extract titles and links
4. Organize into a list and return to you

Scenario 4: Web page screenshot

1. Access GitHub
2. Wait for the page to load completely
3. Take a full-page screenshot
4. Save and tell you the file location

Scenario 5: Form operation

1. Find the username input box
2. Fill in the username
3. Find the password input box
4. Fill in the password
5. Ask if you need to click the login button

Scenario 6: Monitor web page changes

1. Access the web page regularly
2. Extract price information
3. Compare with the last time
4. Notify you immediately if there is a change

📖 Technical Documentation: Tool List

Usage Examples

Example 1: Basic web page 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 simulation

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 selector */
#element-id

/* Class selector */
.class-name

/* Attribute selector */
[data-testid="submit"]
[name="username"]
[type="text"]

/* Combined selector */
div.container > button.primary
form input[type="text"]
ul li:first-child

/* Pseudo-class selector */
button:hover
input:focus
div:nth-child(2)

Advanced Selectors

// By text content
browser_get_by_text({ "text": "Sign In" })

// By ARIA role
browser_get_by_role({ "role": "button", "name": "Submit" })

// By label
browser_get_by_label({ "text": "Email Address" })

// By placeholder
browser_get_by_placeholder({ "text": "Enter your email" })

// By test 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 keys

• PageUp

  ,

  PageDown

  - Page up/down 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
• You should call

  browser_close

  to release resources after use
• Calling other methods when the browser is not launched will throw an error

2. Wait Strategy

• Use

  browser_wait_for_selector

  to ensure elements are loaded
• Set a reasonable timeout period (default 30 seconds)
• Use

  waitUntil: 'networkidle'

  to wait for network requests to complete

3. Selector Best Practices

• Prioritize using stable selectors (ID, data-testid)
• Avoid using 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 block unnecessary resources (images, ads)
• Set a reasonable viewport size to avoid overly large screenshots

5. Debugging Tips

• Use

  headless: false

  to view the browser operation process
• Use the

  slowMo

  parameter to slow down the operation speed
• Use

  browser_get_console_logs

  to view page errors
• Use

  recordVideo

  and

  recordTrace

  to record the operation process

6. Error Handling

// All tool calls will return error information when they fail
// Recommended when using:
1. First check if the browser has been launched
2. Use wait_for_selector to ensure elements are loaded
3. Set a reasonable timeout period
4. Use try-catch to handle exceptions

Notes

1. Path format: Use double backslashes

   \\

   or forward slashes

   /

   for Windows systems
   • Correct:

     C:\\Users\\Admin\\file.pdf

     or

     C:/Users/Admin/file.pdf

   • Incorrect:

     C:\Users\Admin\file.pdf

2. Timeout setting: The default timeout is 30 seconds, which can be adjusted as needed
   • Increase the timeout when the network is slow
   • Reduce the timeout for fast operations
3. Screenshot return: Screenshots return base64 encoded image data
   • Can be saved to a file or used directly
4. Cookie domain: The correct domain must be specified when setting cookies
   • The domain must match the current page
5. JavaScript execution: The code in evaluate is executed in the page context
   • Can access the page's DOM and global variables
   • The return value must be serializable
6. Device simulation: Refer to the Playwright device list for supported device names
   • Common: 'iPhone 13', 'Pixel 5', 'iPad Pro'
7. Permission granting: Some functions require granting permissions first
   • Geolocation requires 'geolocation' permission
   • Notifications require '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

Version Information

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

Technical Support

1. Whether Playwright is installed correctly
2. Whether the browser driver has been downloaded
3. Whether the selector is correct
4. Whether the timeout period is sufficient
5. Whether the network connection is normal

• Playwright official documentation: https://playwright.dev
• Project README documentation
• Windows compatibility guide