Getting Started with Playwright CLI: Installation, Skills, Sessions, and Essential Commands

Based on the latest microsoft/playwright-cli README, this guide walks through Playwright CLI's positioning, installation, skills workflow, session management, monitoring dashboard, and essential commands.

If you have been using Claude Code, GitHub Copilot, or other coding agents for browser automation, microsoft/playwright-cli is a tool worth watching. It is not the traditional kind of browser helper meant mainly for humans typing commands by hand. Instead, it is a Playwright CLI designed for coding agents, with an emphasis on lower token overhead, a lighter command interface, and integration with Skills-based workflows.

From the official README, the core idea behind Playwright CLI is very clear: compared with MCP, which can push large tool schemas and page structure into the model context, the CLI approach is more compact and better suited for agent workflows that constantly switch between large codebases, tests, and browser automation.

01 What Playwright CLI is

playwright-cli is an open-source Playwright command-line tool from Microsoft. The official description is “CLI for common Playwright actions.” It is mainly used for tasks like these:

  • Opening pages and driving the browser
  • Recording and generating Playwright code
  • Capturing page snapshots to get element references
  • Taking screenshots and exporting PDFs
  • Working with coding agents for test automation and web interaction

The current GitHub README is very explicit about its positioning: if you are using coding agents, the CLI is often a better fit than Playwright MCP; if you need persistent state, richer introspection, and longer-running agentic loops, MCP still has its place.

In other words, Playwright CLI feels more like a browser automation interface built for AI coding assistants, not just a tool for engineers to click around manually.

02 Where it stands out

1. It fits agent workflows better

The official README lists Token-efficient as a key feature. It does not force full-page data into the LLM context. Instead, it lets the agent operate the browser through shorter and more focused commands.

That matters a lot for coding agents. In real projects, an agent is not only driving the browser. It also has to read code, edit files, run tests, and inspect logs. If the browser interface itself consumes too much context, the overall workflow becomes less efficient.

2. It works well with Skills

The README specifically highlights playwright-cli install --skills. That shows Microsoft is not treating it as just another shell utility, but as something that can be consumed directly by Claude Code, GitHub Copilot, and similar agents through a Skills-based workflow.

If your setup already relies on Skills, Playwright CLI should slot in naturally.

3. Session management is fairly complete

Playwright CLI supports sessions. By default, the browser profile stays in memory, so cookies and storage state are preserved across multiple CLI calls within the same session. If you add --persistent, the profile can be saved to disk and reused across browser restarts.

That makes it much more practical than tools that simply open a browser for one command and then throw everything away. It is also a better fit for long debugging cycles and longer-running agent flows.

4. It includes a visual monitoring dashboard

The README provides playwright-cli show, which opens a dashboard for observing and controlling all running browser sessions. This is especially useful when an agent is running automation in the background, because you can step in, inspect progress, and help with debugging instead of flying blind.

03 Installation and requirements

According to the current GitHub README, the basic requirements for Playwright CLI are:

  • Node.js 18 or newer
  • Claude Code, GitHub Copilot, or another coding agent

The installation commands are:

1
2
npm install -g @playwright/cli@latest
playwright-cli --help

There is one easy mistake worth calling out:

  • The officially recommended package right now is @playwright/cli
  • Do not confuse it with the old deprecated npm package playwright-cli

So the package you actually want is the scoped package, not the older historical one.

04 How to start using it

1. Install skills

If you want a coding agent to use Playwright CLI directly, the official recommendation is to install the skills first:

1
playwright-cli install --skills

The README explicitly says that Claude Code, GitHub Copilot, and similar tools will use the locally installed skills.

2. Let the agent call the CLI directly

If you do not want to handle Skills first, you can also let the agent read the CLI help output directly:

1
2
Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Check playwright-cli --help for available commands.

The README calls this “Skills-less operation.” The idea is that even without preinstalled skills, the CLI can still describe itself well enough for an agent to use it.

3. Try a minimal flow manually

The README includes a TodoMVC example that works very well as a first hands-on demo:

1
2
3
4
5
6
7
8
playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli type "Water flowers"
playwright-cli press Enter
playwright-cli check e21
playwright-cli check e35
playwright-cli screenshot

This sequence is useful because it quickly shows how Playwright CLI works in practice:

  • open opens the page
  • type and press handle text input
  • check uses an element reference to toggle checkboxes
  • screenshot saves the result

05 --headed, sessions, and the monitoring dashboard

--headed

Playwright CLI is headless by default. If you want to see the browser window directly, you need to pass --headed when using open:

1
playwright-cli open https://playwright.dev --headed

This is especially helpful when debugging selectors, login flows, or any interaction that is easier to inspect visually.

sessions

The official README places a lot of emphasis on sessions. You can use different sessions to isolate different projects or sites:

1
2
3
playwright-cli open https://playwright.dev
playwright-cli -s=example open https://example.com --persistent
playwright-cli list

If you are letting an agent run over a longer period, you can also pass the session through an environment variable:

1
PLAYWRIGHT_CLI_SESSION=todo-app claude .

Useful session management commands include:

1
2
3
playwright-cli list
playwright-cli close-all
playwright-cli kill-all

In practice:

  • list shows all sessions
  • close-all closes all browsers gracefully
  • kill-all forcefully terminates all browser processes

Monitoring dashboard

If you want to see what the agent is actually doing in the browser, you can run:

1
playwright-cli show

According to the README, this dashboard has two main views:

  • Session grid: shows active sessions by workspace, with live preview, URL, and page title
  • Session detail: shows a live view of a selected session and lets you take over mouse and keyboard input

That means Playwright CLI is not only usable from the command line. It also has a fairly mature observability layer.

06 Which commands are worth memorizing first

If this is your first time using Playwright CLI, you do not need to memorize every command up front. These are the core ones worth learning first:

Pages and interaction

1
2
3
4
5
6
7
playwright-cli open [url]
playwright-cli goto <url>
playwright-cli click <ref>
playwright-cli fill <ref> <text>
playwright-cli type <text>
playwright-cli hover <ref>
playwright-cli press <key>

Getting page structure

1
2
3
4
playwright-cli snapshot
playwright-cli snapshot <ref>
playwright-cli snapshot --depth=N
playwright-cli eval <func> [ref]

snapshot is especially important because many later operations depend on element references stored as ref. In practice, you usually capture a snapshot first, then use the returned element identifiers for clicking, filling, checking, or taking screenshots.

Saving output

1
2
playwright-cli screenshot
playwright-cli pdf

Tabs

1
2
3
4
playwright-cli tab-list
playwright-cli tab-new [url]
playwright-cli tab-close [index]
playwright-cli tab-select <index>

07 Who should try it

Playwright CLI is especially worth trying in these kinds of scenarios:

  • You are using Claude Code, Copilot, or another coding agent for E2E testing
  • You want a lighter browser automation interface without pushing large page structures into model context
  • You want one browser session to persist across multiple commands
  • You want to monitor agent-driven web tasks through a dashboard while they run

If your main question is how to make browser automation work efficiently with coding agents, Playwright CLI will likely feel more natural than traditional manual debugging workflows.

References

记录并分享
Built with Hugo
Theme Stack designed by Jimmy