Playwright Skill

Browser automation and visual testing via MCP SDK, with direct browser control on Display :1.

When to Use This Skill

• Navigate to web pages and capture screenshots
• Click buttons, links, and interactive elements
• Fill forms and submit data
• Execute JavaScript in page context
• Wait for dynamic content and AJAX responses
• Visual verification of web applications
• Web scraping and data extraction
• End-to-end testing of web UIs

Architecture

┌─────────────────────────────┐
│  Claude Code / VisionFlow   │
│  (MCP Client)               │
└──────────────┬──────────────┘
               │ MCP Protocol (stdio)
               ▼
┌─────────────────────────────┐
│  Playwright MCP Server      │
│  (Consolidated from 3 files)│
└──────────────┬──────────────┘
               │ Direct Playwright API
               ▼
┌─────────────────────────────┐
│  Chromium Browser           │
│  Display :1 (VNC 5901)      │
└─────────────────────────────┘

Tools

Examples

// Navigate and screenshot
await navigate({ url: "https://example.com" });
await screenshot({ filename: "homepage.png", fullPage: true });

// Fill and submit a form
await type({ selector: "#email", text: "user@example.com" });
await type({ selector: "#password", text: "secret123" });
await click({ selector: "button[type=submit]" });

// Wait for dynamic content
await wait_for_selector({ selector: ".results-loaded" });

// Execute JavaScript
await evaluate({ script: "document.querySelectorAll('.item').length" });

Environment Variables

Visual Access

Browser is visible via VNC:

# Connect with VNC client
vncviewer localhost:5901

# Password: turboflow

VisionFlow Integration

This skill exposes playwright://capabilities and playwright://status resources for discovery by VisionFlow's MCP TCP client on port 9500.