Skip to content
CodeKruPro

Be the agent

34/99

Module · Agents in the browser: Playwright MCP and test agents

intermediate

about 35 min

What this lesson teaches

The idea

An agent driving a browser through Playwright MCP works in small steps: read the page snapshot, pick an element by its reference, act, read again.

Why a tester cares

Doing the agent's job by hand shows how many steps a simple purchase takes and how much text the agent reads, which is what it costs.

Words you will meet

MCP:
Model Context Protocol, a standard way to give an AI model tools such as "click".
Ref:
a short label for an element in the snapshot, such as e16.
Context window:
everything the model has read so far in a task; it costs time and money.

What you will do

  1. 1Open the shop
  2. 2Act by ref
  3. 3Place the order
  4. 4Measure the run
Jump to practice

The Playwright MCP server gives an AI agent browser tools: browser_navigate, browser_snapshot, browser_click, browser_type and more. After each action it returns the page's accessibility snapshot, where every element has a ref such as e16. The agent reads the snapshot, picks a ref and calls the next tool. Everything it reads goes into its context window, and context costs time and money.

The console below simulates those tools on ShopLab. Replies have the shape of the real server's output; the sizes are this simulation's, and a real page's are usually larger.

Your task

  1. Buy two notebooks and one coffee mug with the coupon SAVE10, one tool call at a time. Type calls such as browser_click e16 or browser_type e22 SAVE10.
  2. Copy the order reference from the confirmation page.
  3. Count your tool calls and add up the characters of every reply. Each reply shows its size.

The order reference is unique to you, and only an order that matches the task gets the right one.

Sign in to practise

The lesson is free to read. A free account lets you talk to the practice bots, run your code and save your score. You will come back to this lesson.

Sign inCreate a free account
1

Browser tools (simulated Playwright MCP)

No messages yet. Start with a suggested question below.

2

Write it up

How this is checked: It must be the exact code the bot gave you in your own console. Codes differ for every learner.

3

Your answer

Count every successful call in the log, including navigations and snapshots.

How this is checked: When you submit, the server counts the calls in your own console log and compares that with your number. This is a harder check: it earns the second 50 points once the core checks pass.

4

Your answer

Add up the sizes shown under each reply. Within 5% is fine.

How this is checked: When you submit, the server adds up the character counts in your own console log; within 5% passes. This is a harder check: it earns the second 50 points once the core checks pass.

Core checks earn 50 points and the harder checks the other 50. You can submit as many times as you like.

About this lesson

Playwright MCP tools for AI agents: driving a shop by snapshot refs, one tool call at a time

AI Testing for QA EngineersIntermediateAgents in the browser: Playwright MCP and test agents

How it works

The Playwright MCP server gives an agent browser tools such as navigate, snapshot, click and type. After each action it returns the page's accessibility snapshot, where every element carries a ref such as e16. The agent reads the snapshot, picks a ref, and calls the next tool.

Everything the agent reads goes into its context window, which costs time and money. Doing the agent's job by hand shows where that cost comes from and how many steps a simple purchase really takes.

Refs change when the page changes, so an agent must take refs from the latest snapshot, not from memory.

About the assignment

Use the simulated MCP tools to buy the items the task lists with the coupon it names, one tool call at a time, then measure the run.

What you will do

  1. Open the shop and read the first snapshot.
  2. Act only by refs taken from the most recent snapshot.
  3. Place the order and note the order reference the confirmation shows.
  4. Count your calls and the characters you read.

Common mistakes

  • Reusing an old ref

    After the page changes, a ref from an earlier snapshot may point at nothing or at another element.

  • Ordering the wrong cart

    The order reference shows whether the cart matched the task. Check items, quantities and coupon before placing it.

In a real test suite

Measuring calls and context per task is how teams compare agent setups and catch regressions in agent cost before users feel them as slowness.

Related lessons

Next lessonMCP or CLI: how an agent should drive the browserAll lessons in the courseAI Testing for QA Engineers