Summary
Keywords
Full Transcript
In this video I break down two brand-new tools from the Playwright team that let AI agents fully control a browser: ⚡ Playwright CLI — a shell-command interface designed for coding agents (Claude Code, GitHub Copilot, Cursor) with a persistent daemon, ref-based element targeting, and an on-demand skills system that keeps your token cost extremely low. 🟣 Playwright MCP — a Model Context Protocol server that wraps Playwright as a set of structured AI-callable tools. Works with Claude Code, Cursor, Cline, VS Code and any MCP-compatible client. Uses accessibility snapshots so no vision model is needed. You will learn: ✅ What Playwright CLI is and how its daemon + ref system works ✅ What Playwright MCP is and how the snapshot/vision modes work ✅ The key differences — CLI vs MCP comparison table ✅ Step-by-step setup for both tools ✅ Real-world use cases — AI test generation, bug reproduction, visual QA ✅ Full live demo of both tools in action ⏱ TIMESTAMPS 0:00 Intro 1:15 Why AI agents need browser control 2:15 What is Playwright CLI? 3:55 How Playwright CLI works (daemon + ref-snapshots) 5:06 CLI skills & 50+ command categories 6:40 Setup and Demo : Playwright CLI — install & agent config 13:05 What is Playwright MCP? 14:20 How Playwright MCP works (snapshot mode vs vision mode) 15:31 All MCP browser tools available 16:25 Setup and Demo : Playwright MCP — Claude Code, Cursor, Docker 20:27 CLI vs MCP — key differences comparison 34:00 Summary & wrap up 🔗 LINKS Playwright CLI docs → https://playwright.dev/agent-cli/introduction Playwright MCP repo → https://github.com/microsoft/playwright-mcp Claude Code → https://claude.ai/code Playwright → https://playwright.dev 🛠 COMMANDS FROM THIS VIDEO # Install Playwright CLI npm install -g @playwright/cli playwright-cli install --skills # Add Playwright MCP to Claude Code claude mcp add playwright-mcp -- npx @playwright/mcp@latest # Run Playwright CLI playwright-cli open https://your-app.com playwright-cli click "ref=e42" playwright-cli screenshot # Docker (headless environments) docker run -i --rm mcr.microsoft.com/playwright/mcp ──────────────────────────────────────────────────────────────────── If this helped you, smash 👍 and subscribe for more AI + Testing content! Drop questions in the comments — I read every one. #playwright #playwrightmcp #playwrightcli #claudecode #aiagents #browsertesting #testautomation #mcp #modelcontextprotocol #ai
