skills.rest
pacphi
pacphiCOMMUNITY
Explore all skills by this author →
𝕏@fastnsilverGitHub

playwright-mcp

Automate browser navigation, interaction, and screenshots via Playwright MCP.

14|4|Updated Nov 22, 2025
Search Tags:#automation#mcp#playwright#browser
One-click install
npx skills add https://github.com/pacphi/sindri --skill playwright-mcp-pacphi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-mcp
Source: https://github.com/pacphi/sindri/tree/main/docker/lib/extensions/vf-playwright-mcp/resources
Command: npx skills add https://github.com/pacphi/sindri --skill playwright-mcp-pacphi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables Claude to drive a browser instance via MCP using Playwright MCP.

Core Features & Use Cases

  • Navigate & Capture: Open pages, take screenshots.
  • Interact: Click, type, evaluate in-page JS.
  • ** DOM/Network Info**: Query DOM and inspect network activity.

Quick Start

Open a page and capture a screenshot.

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 tasks with Playwright and MCP?▼

Playwright MCP enables browser automation over the MCP protocol via stdio. Navigate pages, interact with UI elements, evaluate JavaScript, capture screenshots, and perform end-to-end testing by configuring environment variables (DISPLAY, CHROMIUM_PATH, PLAYWRIGHT_HEADLESS, SCREENSHOT_DIR, VIEWPORT_WIDTH, VIEWPORT_HEIGHT) to control Chromium behavior and output paths on Display :1.

Can I use Playwright MCP to scrape web pages and extract data?▼

Yes. Query DOM elements, inspect network activity, and capture page content via Playwright MCP. Extract structured data by navigating pages, evaluating in-page JavaScript, and retrieving DOM information through the MCP protocol interface.

How do I take screenshots and verify visual content in browser automation?▼

Configure SCREENSHOT_DIR and VIEWPORT_WIDTH/HEIGHT environment variables to capture screenshots during automated browser sessions. Playwright MCP stores images at the specified directory, enabling visual verification and end-to-end UI testing workflows.

What are the prerequisites for running Playwright MCP automation?▼

Set up a display environment (Display :1), configure CHROMIUM_PATH if using a custom browser binary, and optionally set PLAYWRIGHT_HEADLESS to control headless mode. These environment variables must be configured before initiating browser navigation and interaction tasks.

Can I interact with dynamic content and wait for elements in Playwright MCP?▼

Playwright MCP supports waiting for dynamic content to load, clicking UI elements, typing text into forms, and submitting forms. These capabilities enable handling asynchronous page rendering and interactive workflows like form submission and conditional navigation.

What display server configuration does Playwright MCP require?▼

Playwright MCP operates on Display :1 by default, configurable via the DISPLAY environment variable. This X11 display server must be available for browser rendering and screenshot capture during automated sessions.

Related Skills

Explore More Software Engineering Skills→
pacphipacphi
14

playwright

Automate browser interactions and screenshots via Playwright MCP on a VNC display.

Community
Advanced
aiyinluyaaiyinluya
2

sn-da-image-caption

Generate vision captions from images and parse them into tabular data.

Community
Advanced
koralliskorallis
90

playwright-automation

Automate browser interactions for end-to-end testing across Chrome, Firefox, and Safari.

Community
Intermediate
williamzujkowskiwilliamzujkowski
17

e2e-testing

Automate end-to-end web app testing with Playwright or Cypress in CI/CD pipelines.

Community
Intermediate