playwright-mcp

Automates browser navigation, interaction, and testing through Playwright MCP tools.

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill playwright-mcp-lgj-jonathan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-mcp
Source: https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills/tree/main/playwright-mcp
Command: npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill playwright-mcp-lgj-jonathan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manual browser testing and repetitive web interactions consume significant time, and simpler browser tools lack support for file uploads, dialog handling, network monitoring, and custom automation code. ## Core Features & Use Cases - Full Browser Automation: Navigate pages, click elements, fill forms, upload files, and handle dialogs using accessibility-tree element references. - Custom Playwright Code Execution: Run arbitrary Playwright snippets via browser_run_code for complex multi-step flows beyond individual tool calls. - Observation & Debugging: Capture screenshots, console messages, and network request data for visual regression testing and debugging. - Use Case: Automate an end-to-end checkout flow by navigating to the store, filling the shipping form with browser_fill_form, uploading a receipt file, and capturing a confirmation screenshot. ## Quick Start Use Playwright to navigate to https://example.com, fill in the login form, and take a screenshot of the dashboard.

Frequently Asked Questions about playwright-mcp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate browser interactions with Playwright MCP?

Call browser_navigate to open a URL, then browser_snapshot to get element refs from the accessibility tree. Use those refs with browser_click, browser_type, or browser_fill_form to interact with page elements.

How to fill an entire web form automatically?

Use browser_fill_form with an array of field refs and values to populate all form fields in one call. First run browser_snapshot to obtain the current element refs, then click the submit button ref.

Playwright MCP vs workspace browser: which should I use?

Playwright MCP supports custom code execution, bulk form filling, file uploads, network monitoring, and dialog handling. The workspace browser uses CSS selectors and suits quick checks and simple interactions only.

Can I run custom Playwright code in the browser?

Yes, browser_run_code accepts an async function receiving a Playwright page object, giving full access to the Playwright Page API for complex automation like role-based locators and custom waits.

Why do Playwright MCP clicks fail with element not found?

Element refs come from the accessibility snapshot and become stale after page changes. Always call browser_snapshot again after navigation or DOM updates to get fresh refs before interacting.

Does Playwright MCP support file uploads and dialogs?

Yes, browser_file_upload attaches files to file input elements, and browser_handle_dialog accepts or dismisses alert, confirm, and prompt dialogs. Both are unavailable in the simpler workspace browser.