Complementary Browser Testing
Route by test type, with agent-browser as the default agent driver. Playwright owns committed determinism; agent-browser owns interactive browser work and visual/perf evidence; specialist inspection tools explain edge cases. Source: User, 2026-05-19; User request, 2026-07-04
The Split
Most browser testing frameworks try to be everything. The better pattern is a complementary pair where each tool does exactly what it's best at:
| Concern | Tool | Why it wins here |
|---|---|---|
| Deterministic, repeatable tests | Browser Testing Skills | Same assertions, same result, every CI run. Write once, gate every PR. |
| Agent-driven browser work | Browser Testing Skills | Compact snapshots, screenshots, diffs, sessions, Chrome profiles, React/perf checks, and batch commands. |
| Specialist visual/debug escalation | browser-harness or Chrome DevTools MCP | Use when screenshot-first self-healing real Chrome, computed styles, or box model details are specifically needed. |
Playwright is terrible at "does this look right?" - but unbeatable at "does this still work exactly as specified?"
The visual agent loop is terrible at deterministic gating - but unbeatable at catching visual issues no one wrote a test for.
The Agent Loop
The visual regression half only compounds when wrapped in an agent loop. Without it, you have manual QA with extra steps. With it:
- Agent navigates to a page or component with agent-browser
open - Resizes viewport across breakpoints
- Takes screenshots at each size (
capture_screenshot()/agent-browser screenshot) - Compares against baselines (browser-harness: screenshot → visual judgment; agent-browser:
diff screenshot --baseline) - Diffs accessibility tree for structural changes (
agent-browser diff snapshot) - Falls back to Chrome MCP + DOM inspection when the bug needs computed styles, box model, or DOM tree traversal
- Flags regressions with evidence (screenshot + diff + DOM state)
agent-browser is the default driver for this loop. Use a Chrome profile or auto-connect path when auth, cookies, extensions, or exact user state matter. browser-harness is now the fallback for screenshot-first self-healing real-Chrome flows.
The agent provides the judgment layer that deterministic tests structurally cannot. It can see "that card grid collapses wrong at 768px" without anyone having written a specific assertion for it. agent-browser gives the what (screenshot diff, snapshot diff). Chrome MCP + DOM inspection gives the why when needed (which CSS rule fired, computed width, box model, DOM tree state).
The Feedback Loop
Findings from the agent loop feed back into Playwright. Once the agent identifies a real visual regression, you codify it as a deterministic test so it never regresses again. The agent loop is discovery; Playwright is the ratchet.
This means the Playwright test suite grows organically from real issues rather than from speculative coverage.
Where Each Tool Sits
Updated from Computer Use and Browser Automation Patterns:
| Task | 1st choice | 2nd choice |
|---|---|---|
| CI gate (E2E, functional) | Playwright | - |
| Visual regression | agent-browser diff screenshot / diff snapshot |
browser-harness / Chrome MCP + DOM inspection |
| Responsiveness checks | agent-browser viewport/session flow | Chrome MCP device emulation |
| Ad-hoc browsing / scraping | agent-browser | browser-harness only for specialist real-Chrome flows |
| React introspection | agent-browser | Chrome MCP |
Anti-Patterns
- Playwright for visual testing - assertions can check pixel diffs, but they can't judge whether a layout "looks wrong." You end up with brittle snapshot tests that break on every font rendering difference.
- Agent loop without Playwright - findings that don't get codified into deterministic tests will regress. The loop discovers; Playwright locks in.
- Puppeteer/Playwright for ordinary agent browsing - use agent-browser for the interactive loop unless the repo already owns a test suite or substrate that requires the other tool.
- Chrome MCP + DOM inspection when agent-browser suffices - agent-browser already has
diff screenshot,diff snapshot, and batch viewport sweeps. Only reach for Chrome MCP + DOM inspection when you need computed styles, box model, DOM tree traversal, or the user's real browser session (extensions, cookies, exact rendering). - One tool for everything - monolithic ranking forces tradeoffs. The split by test type avoids them.
Concept Position
| Field | Value |
|---|---|
| Concept family | Agent harness and runtime primitives |
| Concept owned | Route by test type, not tool hierarchy. Playwright owns determinism; Chrome MCP + DOM inspection + screenshots own visual judgment. An agen... |
| Category map | Concept System Map |
Timeline
- 2026-07-01 | Concepts category refresh added this page to the Agent harness and runtime primitives family, linked it to Concept System Map, and kept it standalone because it owns this reusable mental model: Route by test type, not tool hierarchy. Playwright owns determinism; Chrome MCP + DOM inspection + screenshots own visual judgment. An agen... Source: User request, 2026-07-01
- 2026-04-09 | @leftcurvedev_: TLS fingerprinting beats raw browser speed for scraping; Lightpanda hype ignores anti-bot reality. 3,323 bookmarks. Source: X/@leftcurvedev_ thread, 2026-04-09
- 2026-05-19 | Framework articulated. Kevin observed best results from pairing Playwright (deterministic) with Chrome MCP + DOM + screenshots (visual judgment) in an agent loop. Source: User, 2026-05-19
- 2026-05-19 | Added browser-harness (13.2K stars) as primary driver for the visual agent loop. Self-healing CDP harness connecting to user's real Chrome, screenshot + compositor-level coordinate clicks. agent-browser retained for React introspection, Web Vitals, token-efficient diffs. Source: User + GitHub, 2026-05-19