← 11.211.4 →
1245 words Slides

11.3 Playwright MCP: Browser Automation

Course: Claude Code - Power User Section: Accessing the Web Video Length: 2-5 minutes Presenter: Daniel Treasure

Opening Hook

"WebFetch grabs static content. WebSearch finds answers. But what if you need to click a button, fill a form, wait for JavaScript to load, or interact with a page? That's where Playwright comes in. It's a real browser, automated. You tell it what to do, and it does it—then reports back with screenshots and results."

Key Talking Points

1. What Playwright MCP Does

  • Opens a real browser (Chrome, Firefox, Safari) under Claude's control
  • Can run headless (invisible) or visible for debugging
  • Navigates pages, handles redirects, waits for content to load
  • Clicks buttons, types in forms, submits data
  • Takes screenshots at any point
  • Returns page content, element states, and automation results
  • Not built-in—requires MCP server setup

What to say: "Playwright is your hands. You tell Claude what to do on a website, and it does it like a human would. Click here, type this, wait for that to load, take a screenshot—all automated."

What to show on screen: Show Playwright MCP setup: claude mcp add --transport http playwright https://... or the npx stdio server method. Show the MCP configuration in Claude Code.

2. When to Use Playwright

  • Testing web apps: click flows, form submission, user journeys
  • Automating repetitive tasks: scraping dynamic content, form filling, data extraction
  • Waiting for JavaScript rendering: single-page apps, client-side loaded content
  • Visual validation: checking if buttons render correctly, UI state changes
  • Debugging: see exactly what a page looks like at each step
  • Handling complex interactions: multi-step workflows, modals, dropdowns

What to say: "If a task requires you to interact with a page—not just read it—Playwright is your tool. It's like having a robot that can use the web just like you do."

What to show on screen: Show examples: a login flow, searching a site, filling a multi-step form, scraping a dynamic table, testing a checkout process.

3. How Playwright Works

  • Launches a browser instance (headless or visible)
  • Receives commands from Claude: navigate, click, type, wait, screenshot
  • Executes the command in the browser
  • Reports results, page state, screenshots, errors
  • Handles waits and timing automatically
  • Can handle popups, modals, and dynamic content

What to say: "Playwright isn't magic. It's a real browser controlled via APIs. Claude tells it what to do, it does it, and reports back. If something fails—wrong selector, element not found—you see the error and can adjust."

What to show on screen: Flow diagram: Claude → Playwright API → Browser action → Result/screenshot → Claude reads result and continues.

4. Setup and Configuration

  • Requires Playwright MCP server (Node.js based)
  • Installation: npm install playwright or use npx
  • Configure in Claude Code: add the MCP transport URL
  • Can run in visible or headless mode (headless is default)
  • Can target specific browsers or use default Chromium
  • Supports timeout and waiting configurations

What to say: "Setup is just a few commands. Once configured, you don't think about it—you just ask Claude to interact with a page and it happens."

What to show on screen: Show the actual setup commands and where they go in the config file.

Demo Plan

  1. Demo 1: Simple Navigation and Interaction
  2. Navigate to a real website
  3. Click a link or button
  4. Take a screenshot showing the result

  5. Show how fast and seamless it feels

  6. Demo 2: Form Filling

  7. Ask Claude to fill out a form on a test site
  8. Show the typing happening in the browser
  9. Show submission and result page

  10. Explain how Claude waits for the page to load

  11. Demo 3: Scraping Dynamic Content

  12. Navigate to a page with JavaScript-loaded content
  13. Wait for that content to appear
  14. Extract structured data (table, list, etc.)
  15. Show the results back in Claude Code

Code Examples & Commands

Example 1: Basic Playwright Setup

# Install Playwright
npm install -D @playwright/test playwright

# Or use as a project dependency
npm install playwright

# Configure MCP in Claude Code
[In your .claude/config or MCP settings]
Add Playwright MCP transport: localhost:3000 or specified URL

Example 2: Navigate and Click

User: "Go to example.com and click the 'Get Started' button. Take a screenshot."

Claude commands Playwright to:
1. Navigate to https://example.com
2. Wait for page to load
3. Find and click the "Get Started" button
4. Wait for navigation or content change
5. Take a screenshot
6. Return the screenshot and result

Example 3: Form Filling and Submission

User: "Fill out the contact form at example.com/contact. Use name 'John Doe', email 'john@example.com', message 'Test message'. Submit and tell me the result."

Claude:
1. Navigates to the form
2. Fills each field with provided data
3. Submits the form
4. Waits for success/confirmation page
5. Extracts and reports the result

Example 4: Scraping Dynamic Content

User: "Go to example.com/products and extract all product names and prices from the table."

Claude:
1. Navigates to the page
2. Waits for JavaScript to render the table
3. Evaluates selectors and extracts data
4. Returns structured data (JSON, list, etc.)

Gotchas & Tips

  • Headless vs. Visible: Headless mode is faster but harder to debug. Use visible mode if something isn't working as expected. You can toggle it in the Playwright config.
  • Timing and Waits: JavaScript can be slow. Playwright has built-in waits, but sometimes you need explicit waits for specific elements. Let Claude handle this—it understands when to wait.
  • Selectors: Playwright uses CSS selectors or XPath. If a page changes its class names or IDs, selectors break. Use robust selectors or text-based selectors when possible.
  • Popup and Modal Handling: Pages may open popups or modals. Playwright can handle these, but you need to account for them in your automation.
  • Performance: Headless mode is much faster than visible. Use visible only for debugging, not for regular automation.
  • Screenshots: Playwright screenshots are useful for debugging and validation. Use them liberally.

Pro tip: Start with headless mode (fast). If something fails, switch to visible mode, run the same automation, and watch what happens. This makes debugging much easier.

Lead-out

"Playwright gives Claude hands to interact with the web. In the next video, we'll focus on one of Playwright's superpowers: scraping and extracting structured data from pages."

Reference URLs

  • https://playwright.dev/
  • https://github.com/microsoft/playwright
  • https://docs.anthropic.com/en/docs/model-context-window/vision

Prep Reading

  • Install Playwright and test basic navigation before recording
  • Have a simple website ready for demos (ideally one you control or a public test site)
  • Prepare a form to fill out and submit
  • Test the headless vs. visible mode behavior
  • Have a dynamic content page ready for the scraping demo
  • Know the difference between waiting for navigation and waiting for specific elements

Notes for Daniel: The key here is showing that this is real browser automation, not magic. Show the browser window if visible mode is enabled, let the user see the clicks and typing happen. The magic feeling comes from seeing the robot do things you'd normally do by hand. If any demo takes >10 seconds, have a prerecorded fallback. The setup explanation should be brief—focus on what it does, not installation steps.