playwright-mcp

Automates browser interactions through Playwright MCP tools using accessibility-tree snapshots and element refs.

3|Updated Apr 2, 2026
One-click install
npx skills add https://github.com/OktayCopurlu/ai-shared --skill playwright-mcp-oktaycopurlu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-mcp
Source: https://github.com/OktayCopurlu/ai-shared/tree/main/.github/workflows/skills/playwright-mcp
Command: npx skills add https://github.com/OktayCopurlu/ai-shared --skill playwright-mcp-oktaycopurlu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Automating web UIs—filling forms, clicking through wizards, dismissing modals, and verifying page state—requires a reliable way to identify elements and handle sessions, auth, and dynamic DOM changes without brittle selectors. ## Core Features & Use Cases - Snapshot-driven interaction: Always capture an accessibility snapshot to discover element refs before clicking, typing, or filling forms, avoiding stale or guessed selectors. - Session and auth handling: Choose between the VS Code integrated browser, Playwright MCP with --extension for reusing a logged-in Chrome session, or persistent profiles via --user-data-dir. - Opt-in capability groups: Enable network mocking, storage manipulation, coordinate-based mouse control, PDF export, and tracing/video via --caps flags. - Use Case: Automate a multi-step checkout wizard on a staging site behind HTTP basic auth: navigate with embedded credentials, snapshot each step, fill form fields by ref, and verify the confirmation page. ## Quick Start Ask the agent to open the target website, fill in the login form, and click through the checkout flow using Playwright browser automation.

Frequently Asked Questions about playwright-mcp

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

FAQPage Schema
How do I automate form filling with Playwright MCP?▼

Navigate to the page, run browser_snapshot to discover element refs, then use browser_fill_form with those refs for standard inputs. Verify values with a fresh snapshot before clicking the submit button ref.

When should I use Playwright MCP instead of the VS Code integrated browser?▼

Use the integrated browser for most automation since it supports arbitrary Playwright code and adds no MCP tools. Use Playwright MCP with --extension only when you must reuse an existing logged-in Chrome or Edge session, such as SSO-gated sites.

How do I handle login-required or SSO pages in browser automation?▼

Attach Playwright MCP to an already logged-in browser via --extension, since the integrated browser runs a separate Electron context without your Chrome cookies. For re-injectable auth, set headers or cookies with run_playwright_code instead.

Why does my Playwright click fail after page navigation?▼

Element refs become stale after navigation, tab switches, modal opens, or major DOM updates. Take a fresh browser_snapshot after any page change and re-identify the target ref before interacting again.

What extra tools do Playwright MCP capability flags enable?▼

The --caps flag unlocks opt-in groups: network for request mocking, storage for cookies and localStorage, vision for coordinate-based mouse control, pdf for saving pages as PDF, and devtools for tracing and video recording.