Playwright MCP + AI Agents.

The 30-minute pitch

Four things you walk away able to do today.

App under test

We explore TTACart

Every example on this page points the agent at the same live demo store, so you can copy a prompt and watch the browser move. It has a login, an inventory grid, item details, a cart, and a multi-step checkout - enough surface for an agent to perceive and act on.

The protocol

What is the Model Context Protocol?

MCP is an open standard for connecting AI applications to external tools and data. Instead of every model inventing its own plugin format, MCP defines one contract: an AI app (the host, with an MCP client) connects to an MCP server that advertises a list of tools. The model picks a tool, the client sends the call, the server runs it and returns the result.

The server

The Playwright MCP server

Playwright MCP is an official Microsoft server that exposes a real, automated browser as MCP tools. One command starts it - no spec file, no boilerplate:

# start the Playwright MCP server (latest)
npx @playwright/mcp@latest

# headless for CI or background runs
npx @playwright/mcp@latest --headless

# fresh, throwaway profile each run
npx @playwright/mcp@latest --isolated

# expose over HTTP instead of stdio
npx @playwright/mcp@latest --port 8931

Setup

Add Playwright MCP to your client

MCP clients read a JSON config that lists each server by a name, a command to launch, and its args. The block below is the standard Playwright MCP entry - it works in Claude Code, Cursor, and VS Code (the file location differs per client, the entry does not).

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

The toolbox

The key browser tools

These are the tools the agent calls. You rarely name them by hand - you describe the goal and the model chooses - but knowing them helps you read and trust what the agent does.

Hands-on

Drive TTACart with natural language

With the server connected, you talk to the agent in plain English. It translates each instruction into browser_* calls and reports back the snapshot it acted on. Here is a full login-to-checkout exploration.

You:  Open https://app.thetestingacademy.com/playwright/ttacart/
      and snapshot the page.

Agent: browser_navigate -> https://app.thetestingacademy.com/playwright/ttacart/
       browser_snapshot
       -> heading "Login", textbox "Username",
          textbox "Password", button "Login",
          plus the on-screen credentials hint.

You:  Log in using the username and password shown
      on the login screen, then snapshot the result.

Agent: browser_type  -> textbox "Username"  (from the hint)
       browser_type  -> textbox "Password"  (from the hint)
       browser_click -> button "Login"
       browser_snapshot
       -> heading "Products", a grid of items,
          each with an "Add to cart" button.

You:  Add the first product to the cart, go to the cart,
      and complete checkout with sample details.

Agent: browser_click  -> "Add to cart" (first item)
       browser_click  -> cart link
       browser_click  -> "Checkout"
       browser_fill_form -> first name, last name, postal code
       browser_click  -> "Continue" then "Finish"
       browser_snapshot
       -> heading "Thank you for your order!"

How agents work

The agent loop: perceive, decide, act

An AI agent does not run a script. It runs a loop: read the current state, decide the next step, call one tool, then look again. MCP is what makes each "act" possible and each "perceive" trustworthy.

From exploration to a test

Turn the run into a Playwright spec

An MCP exploration is repeatable but not durable - it lives in a chat. The payoff is asking the agent to emit a real @playwright/test file from what it just did, so the journey becomes a committed test you run in CI.

You:  Generate a Playwright Test (TypeScript) spec for the
      login-to-checkout flow you just ran on TTACart.
      Use role and label locators, read the credentials
      on the login screen, and assert the success heading.

Agent: -> writes tests/ttacart-checkout.spec.ts
       using getByRole / getByLabel locators and
       expect(...).toHaveText("Thank you for your order!")

# run the agent-generated spec headed to watch it
npx playwright test tests/ttacart-checkout.spec.ts --headed

# open the trace if anything fails
npx playwright show-trace test-results/.../trace.zip

Reference

The Playwright MCP cheat sheet

Hands-on

Six MCP drills on TTACart

Sources

Official references