shakespeare

Headless browser automation

Node.js Web & Content GitHub

Browser automation via Playwright for navigating pages, taking screenshots, executing JavaScript, inspecting CSS, and testing responsive layouts. Persistent browser instance across tool calls.

Features

Navigate to URLs and interact with pages
Take screenshots of pages or elements
Execute arbitrary JavaScript in page context
Inspect computed CSS styles
Query elements with CSS selectors
Persistent browser instance - no startup cost per call

Install

npm install && npx playwright install chromium

The Problem: Verifying UI without opening a browser

# You built a feature but need to verify it looks right.
# Options:
#   1. Open browser manually, navigate, inspect  - slow
#   2. Ask the user to screenshot  - breaks flow
#   3. Trust the code blindly  - risky

# AI agents can't see browsers. They need automation.

Solution

$ # Navigate, screenshot, inspect  - all via MCP calls
shakespeare navigate "http://localhost:3000"
shakespeare screenshot
shakespeare query_elements "button.submit"

Output

{
  "url": "http://localhost:3000",
  "title": "My App",
  "status": 200
}

// Screenshot saved to /tmp/screenshot-1709234567.png

{
  "elements": [
    {
      "tag": "button",
      "text": "Submit",
      "classes": ["submit", "btn-primary"],
      "visible": true,
      "bounds": {"x": 120, "y": 450, "width": 80, "height": 36}
    }
  ]
}

Comparison

Metric	Value
Browser startup	Once per session (persistent)
Screenshot latency	< 500ms
Automation scope	Navigate, click, type, screenshot, JS eval