vscode-sidebar-terminal: Skill for Claude Code

Playwright MCP

Overview

This skill enables browser automation using Playwright through MCP. Playwright provides powerful browser control capabilities including navigation, element interaction, screenshots, and form handling.

When to Use This Skill

• Navigating and interacting with web pages
• Taking screenshots of web content
• Filling out forms and submitting data
• Testing web applications
• Extracting information from web pages
• Automating repetitive browser tasks

Quick Start Workflow

1. Navigate to a page: browser_navigate
2. Take a snapshot to get element refs: browser_snapshot
3. Interact with elements using refs from snapshot: browser_click, browser_type

Core Tools

Navigation

browser_navigate - Navigate to a URL

mcp__playwright__browser_navigate({ url: "https://example.com" })

browser_navigate_back - Go back to previous page

mcp__playwright__browser_navigate_back({})

Page Analysis

browser_snapshot - Get accessibility tree (preferred for interaction)

mcp__playwright__browser_snapshot({})

browser_take_screenshot - Capture visual screenshot

mcp__playwright__browser_take_screenshot({
  type: "png",
  fullPage: true,
  filename: "screenshot.png"
})

Element Interaction

browser_click - Click an element (requires ref from snapshot)

mcp__playwright__browser_click({
  element: "Submit button",
  ref: "button[ref='submit']"
})

browser_type - Type text into an element

mcp__playwright__browser_type({
  element: "Search input",
  ref: "input[ref='search']",
  text: "search query",
  submit: true
})

browser_hover - Hover over an element

mcp__playwright__browser_hover({
  element: "Menu item",
  ref: "li[ref='menu']"
})

Form Handling

browser_fill_form - Fill multiple form fields

mcp__playwright__browser_fill_form({
  fields: [
    { name: "Username", type: "textbox", ref: "input[name='user']", value: "john" },
    { name: "Remember", type: "checkbox", ref: "input[name='remember']", value: "true" }
  ]
})