Playwright CLI vs Playwright MCP: setup and browser tests

Compare shell commands with MCP tool calls, set up both tools, and follow demos of TodoMVC testing and login test script generation with Claude Code.

Player not loading? Watch on YouTube

This tutorial compares Playwright CLI and Playwright MCP for browser automation by an AI agent. Both use Playwright, but the CLI accepts shell commands while MCP exposes structured tools to compatible clients. The presenter recommends the CLI for a coding assistant that works in a terminal and MCP for conversational tool use.

The CLI explanation covers a persistent browser daemon, YAML accessibility snapshots and element references for clicks. Its skills system supplies command documentation on demand. The presenter argues that this reduces token use compared with loading MCP tool schemas into context, though the video provides no measured token comparison. Setup includes installing @playwright/cli and its skills, followed by a Claude Code demonstration in VS Code. The presenter reports 20 passing TodoMVC scenarios with screenshots and explains that this run did not create automated test scripts.

The MCP section covers accessibility snapshots as the default interaction method and optional vision mode for canvas or custom interfaces that need coordinate targeting. Setup examples cover Claude Code, Cursor configuration and Docker for headless environments. In the terminal demo, Claude Code shows version v2.1.138. The presenter asks it to execute a login test and then create a Playwright script, and shows the resulting test file. These examples illustrate the requested workflows rather than establish a universal difference in script generation between the two tools.