Learn a skill

Browser Automation & QA

Teach your agent to see and test web apps in a real browser: debug, run E2E checks, and catch visual regressions.

What we found works best

Use Chrome DevTools MCP for debugging (console, network, performance) and Playwright MCP for scripted E2E flows. Use page-agent only if you're adding an in-page assistant to your own app.

DevTools MCP gives the agent the same view a developer has. Playwright produces repeatable tests you can commit. Both run in a clean browser profile, away from your logged-in sessions.

Options we compared

OptionCost / accountCan act?Source
✅ Chrome DevTools MCP
Console, network, performance traces and screenshots
free
none
can click and submit in pages: use a test profilechromedevtools/chrome-devtools-mcp
Apache-2.0 · ★ 53k · pushed 2026-10-13
✅ Playwright MCP
Scripted flows; turns into committed tests
free
none
can submit formsmicrosoft/playwright-mcp
Apache-2.0 · ★ 38k · pushed 2026-10-08
page-agent
An in-page natural-language GUI agent for your own web app
free (plus LLM costs)
LLM key
acts inside your pagealibaba/page-agent
MIT · ★ 29k · pushed 2026-10-14

Steps

  1. Install Chrome DevTools MCP using a clean, separate browser profile.
  2. Debug one real page: console errors, failed requests, performance.
  3. Install Playwright MCP and record one critical flow (signup or checkout on staging).
  4. Convert it to a committed test and run it in CI.
  5. Add screenshot comparison for key pages.

Traps to avoid

Safety

🔒 Pro plan: guided install

Exact commands for Claude Code, Codex, Grok Bot and Gemini CLI, pinned commits, one step at a time with next_lesson and check_lesson, plus updates.

Stars and last push were checked against the GitHub API. Install commands come from vendor and README docs and have not been executed by us. Marked "unverified" where we couldn't confirm.

Ask the teacher for a plan for your agent →