skills.rest
jeremysball
jeremysballCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

playwright-mcp

Automates browser navigation, form filling, and screenshots through the Playwright MCP server.

Updated Nov 7, 2024
Search Tags:#screenshots#browser automation#web testing#mcp#form filling#playwright#mcporter
One-click install
npx skills add https://github.com/jeremysball/dotfiles --skill playwright-mcp-jeremysball
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-mcp
Source: https://github.com/jeremysball/dotfiles/tree/main/.pi/skills-archive/playwright-mcp
Command: npx skills add https://github.com/jeremysball/dotfiles --skill playwright-mcp-jeremysball

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/mcp.

What problem does it solve? Manually testing web pages and capturing screenshots is repetitive and error-prone. This Skill lets you drive a real browser through the Playwright MCP server via mcporter, so navigation, clicks, form fills, and screenshots become scripted, repeatable commands. ## Core Features & Use Cases - Browser Automation: Navigate pages, click elements, fill forms, and wait for selectors using Playwright MCP tools. - Screenshots & PDFs: Capture full-page or element-level screenshots and export pages as PDFs for visual regression checks. - Use Case: Test a login flow end-to-end by navigating to the login page, filling credentials, submitting the form, waiting for the dashboard, and saving a screenshot as proof of success. ## Quick Start Ask the AI to navigate to a URL with playwright-mcp and take a full-page screenshot saved to your screenshots folder.

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

Call Playwright MCP tools through mcporter using key=value arguments, for example mcporter call playwright-mcp.browser_navigate url=https://example.com. Available tools cover navigation, clicking, form filling, waiting for selectors, and screenshots.

How do I take a full-page screenshot with Playwright MCP?▼

Use the browser_screenshot tool with a path and fullPage=true, such as mcporter call playwright-mcp.browser_screenshot path=/workspace/screenshots/page.png fullPage=true. You can also capture a single element by passing a selector parameter.

Why does mcporter fail when I pass arguments to Playwright MCP?▼

mcporter only accepts key=value pairs, not positional arguments, JSON, or --flag syntax. Passing "https://example.com" or --url=... will fail; use url=https://example.com instead.

What selectors work best for Playwright browser automation?▼

data-testid attributes are the most stable choice, followed by IDs and classes. CSS combinators work for complex queries, while XPath should be used sparingly since it is brittle against DOM changes.

How do I set up the Playwright MCP server with mcporter?▼

Install @playwright/mcp via npm, run npx playwright install chromium, then add a playwright-mcp entry to ~/.config/mcporter/config.json. Verify the setup with mcporter list, which should show playwright-mcp.

Related Skills

Explore More Software Engineering Skills→
FlorinSenonerFlorinSenoner

webapp-testing

Automate web application testing with Playwright scripts and server management.

Community
Intermediate
payloadcmspayloadcms
44.5k

e2e-write-visual-test

Writes and runs Playwright visual regression tests with Docker-generated screenshot baselines.

Official
Intermediate
KevinKE93KevinKE93
42

browser-testing-with-devtools

Inspect DOM, console, network, accessibility, screenshots, and performance traces via Chrome DevTools MCP.

Community
Intermediate
RohithdgrrRohithdgrr

migrate

Converts Cypress or Selenium test suites to Playwright with file-by-file verification.

Community
Intermediate