Charter an exploratory testing session, then let an LLM drive a real browser through the Playwright MCP server while you direct it toward risk areas. The demo app you will build in two minutes ships with seeded bugs; your session is scored against the known-bug list in the answer key.
Arjun is an SDET who has heard "AI can explore your app" a dozen times and believes none of it. This lab settles it with data: you stand up a small snack-ordering app with five planted defects, write a session charter the way session-based test management prescribes, and then tour the app twice — once directing the AI-driven browser, once hands-on-keyboard for anything the agent can't feel. The agent sees the app through accessibility-tree snapshots, which means it is genuinely good at some bug classes and structurally blind to others. Finding out which is which — with your own bug tally as evidence — is the lab.
~90 minutes hands-on · Core tier (maps to module M3 and playbook PB-16). Cost: $0 with Claude Code free allowance or Copilot; the app is local.
You need Node 18+ and Claude Code (or any MCP-capable client such as VS Code Copilot agent mode).
mkdir -p qa-lab-02 && cd qa-lab-02
npm init -y && npm install express@4
claude mcp add playwright -- npx @playwright/mcp@latest
server.js — the app under test. Type it in as-is; do not fix anything you spot:
const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: true }));
let orders = [];
const MENU = [
{ id: 1, name: "Samosa", price: 20, tag: "veg" },
{ id: 2, name: "Chicken Roll", price: 60, tag: "nonveg" },
{ id: 3, name: "Masala Chai", price: 15, tag: "veg" },
];
const page = (body) => `<!doctype html><html><head><title>SnackCart</title>
</head><body><h1>SnackCart</h1>${body}</body></html>`;
app.get("/", (req, res) => {
const tag = req.query.tag || "all";
const items = MENU; // filter applied below
const rows = items
.map(
(m) =>
`<li>${m.name} — ₹${m.price} [${m.tag}]
<form method="POST" action="/order" style="display:inline">
<input type="hidden" name="id" value="${m.id}">
<input name="qty" value="1" size="2">
<input name="note" placeholder="note (required)">
<button>Add</button></form></li>`
)
.join("");
res.send(
page(`<a href="/?tag=veg">Veg only</a> | <a href="/?tag=all">All</a>
<p>Showing: ${tag}</p><ul>${rows}</ul>
<h2>Orders (${orders.length})</h2>
<ol>${orders
.map((o) => `<li>${o.name} x${o.qty} = ₹${o.total} (${o.note})</li>`)
.join("")}</ol>`)
);
});
app.post("/order", (req, res) => {
const item = MENU.find((m) => m.id == req.body.id);
const qty = parseInt(req.body.qty, 10) || 1;
orders.push({
name: item.name,
qty,
total: item.price * qty,
note: req.body.note || "",
});
res.redirect("/");
});
app.listen(3000, () => console.log("SnackCart on :3000"));
Run it with node server.js and confirm http://localhost:3000 renders. Create session-sheet.md with the SBTM skeleton:
CHARTER:
TIMEBOX: 45 min (25 agent-driven, 20 manual)
RISK AREAS TOURED:
BUGS (candidate -> verified):
NOTES / QUESTIONS:
AGENT VS HUMAN TALLY:
session-sheet.md, write a one-sentence charter in the standard form: "Explore ordering and filtering with form inputs and rapid interactions to discover data-integrity and validation bugs." A charter is a search strategy, not a script — if you could write the steps in advance, it would be a regression test, not exploration.HUMAN.AGENT VS HUMAN TALLY: for each of the five seeded bugs — found by agent unprompted, found after your redirect, found only manually, or missed entirely. Then write a three-sentence debrief: where did the agent genuinely accelerate you, and where would trusting it alone have left bugs in production?The agent reads the accessibility tree, not pixels. Any bug whose only symptom is visual (alignment, truncation, color) or temporal (races, double-click windows) is yours to find — steer the agent at state and data, keep look-and-feel for the manual sweep.
Self-grading rubric (pass = 7/10):
| Dimension | 0 | 1 | 2 |
|---|---|---|---|
| Charter quality | Missing or a script | Present, vague | Target + resource + goal, drove the tour |
| Seeded bugs found | ≤2 of 5 | 3–4 of 5 | All 5 |
| Verification discipline | Agent claims accepted raw | Most verified | Every candidate hand-verified, hallucinations logged |
| Direction skill | Agent left on autopilot | Some redirects | 3+ risk-driven redirects, logged |
| Debrief honesty | None | Generic | Names agent strengths and blind spots with evidence |
An LLM driving Playwright MCP is a tireless exploratory partner with a structural blind spot: it perceives the app as an accessibility tree, so it excels at state, data, and promise-vs-behavior bugs and cannot feel timing, layout, or rapid interaction. Charter it, direct it at risk, verify everything it claims — the session is yours, the agent is the instrument.