skills.rest
spideynolove
spideynoloveCOMMUNITY
Explore all skills by this author →
Website𝕏@spideynoloveGitHub

playwright

Automates browser navigation, data extraction, and UI interaction via Playwright MCP through mcporter.

2|3|Updated Mar 13, 2026
Search Tags:#screenshots#browser automation#mcp#web scraping#playwright#ui testing#mcporter
One-click install
npx skills add https://github.com/spideynolove/claude-dotfiles --skill playwright-spideynolove
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright
Source: https://github.com/spideynolove/claude-dotfiles/tree/main/.claude-global/skills/playwright
Command: npx skills add https://github.com/spideynolove/claude-dotfiles --skill playwright-spideynolove

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mcporter.

What problem does it solve? Manually browsing pages to scrape data, fill forms, or test UI flows is slow and error-prone. This Skill lets an AI drive a real browser through Playwright MCP tools invoked via mcporter, keeping tool calls out of the main context window. ## Core Features & Use Cases - Page Navigation & Snapshots: Navigate to URLs and capture accessibility-tree snapshots saved to files, avoiding context flooding. - UI Interaction: Click elements, type into fields, fill forms, handle dialogs, upload files, and manage tabs using snapshot refs. - Data Extraction & Inspection: Run JavaScript in the page context, execute arbitrary Playwright code, and inspect network requests and console messages. - Use Case: Log into a web dashboard, wait for dynamic content to load, snapshot the page to a file, and extract table data for reporting. ## Quick Start Ask the AI to use the playwright skill to navigate to a URL and save a snapshot of the page to a file.

Frequently Asked Questions about playwright

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

FAQPage Schema
How do I scrape data from a JavaScript-rendered web page?▼

Navigate to the URL with browser_navigate, wait for dynamic content with browser_wait_for, then capture the accessibility tree with browser_snapshot saved to a file. You can also run browser_evaluate to extract DOM data directly with JavaScript.

How do I click a button or fill a form with Playwright MCP?▼

Take a browser_snapshot first to get element refs, then call browser_click or browser_type with the ref value. For multiple fields at once, use browser_fill_form, and submit by passing submit:true to browser_type.

What is the difference between browser_snapshot and browser_take_screenshot?▼

browser_snapshot returns the accessibility tree as structured text, which is preferred for data extraction and locating element refs. browser_take_screenshot captures a visual PNG image, useful for visual verification or full-page captures.

Why should Playwright MCP be called through mcporter instead of loading it directly?▼

Calling tools via mcporter keeps large tool outputs out of the main context window, avoiding context pollution. Loading the Playwright MCP server directly in the client config alongside this skill is explicitly discouraged.

When should I not use headless mode with this browser automation setup?▼

Avoid headless mode for frontend UI testing, since a visible browser is the default and lets you observe interactions. Adding --headless to the mcporter config defeats the purpose of visible UI testing.

Related Skills

Explore More Software Engineering Skills→
relaticlerelaticle
1.5k

agent-browser-relaticle

Automate browser-based UI testing for Relaticle login flows and panel navigation.

Official
Advanced
niranjannavniranjannav

docx_document_analysis

Extract text, headings, tables, and metadata from Word documents.

Community
Intermediate
appautomatonappautomaton
18

html-to-markdown

Converts HTML or live web pages into structured Markdown with metadata and link inventories.

Official
Intermediate
eddmanneddmann
2

playwright

Render dynamic web pages with Playwright to capture HTML, text, and screenshots.

Community
Intermediate