Igor's Techno Club

Closing the Loop: How Coding Agents Are Reinventing UI Testing

There is a moment in software development — familiar to anyone who has shipped a UI — where the gap between "the code does what I think it does" and "the UI does what users experience" turns out to be enormous. End-to-end testing exists precisely to bridge that gap. But for most teams, it has remained stubbornly manual, brittle, and always on the to-do list. Something is quietly changing that.

In the past several months, a wave of developers have started handing their browsers directly to coding agents — not a clean headless instance spun up for testing, but the actual Chrome tab sitting on their screen, with real cookies, real sessions, and real running code. The conversation around Chrome's DevTools MCP server, and the dozens of alternatives that have sprouted around it, reveals a loose but energetic community figuring out what it means to close the agent loop all the way to the rendered pixel.


The Setup

The core idea, at its simplest, is: give an agent a protocol-level connection to a running browser, and let it observe and interact with the UI the same way a human QA engineer would — but faster, more persistently, and without coffee breaks.

Chrome's DevTools Protocol (CDP) has existed for years. What's new is wiring it directly into the agentic tools that developers are already living inside. The Chrome DevTools MCP server does exactly this: it connects via WebSocket to a Chrome instance that's already running — your tabs, your login state, your everything — and exposes that as a set of callable tools an agent can invoke.

"I use codex to manage a local music library, and it was able to use the skill to open a YT Music tab in my browser, search for each album, and get the URL to pass to yt-dlp." — aadishv, HN

That example might sound trivial — searching for music — but notice what's happening structurally. The agent is navigating a real authenticated session, parsing the DOM, extracting structured data (URLs), and passing it downstream to another tool. That is a complete, working agentic loop with the UI as both input and output. Replace "album URL" with "API endpoint response" or "component render state" and you have a UI testing pipeline.


Two Philosophies Emerge

As practitioners have experimented, two distinct philosophies have emerged — and the debate between them turns out to be a pretty good proxy for broader disagreements in how agents should interact with systems.

The Live Session Approach

Tools like Chrome DevTools MCP, and its spiritual cousins, lean into connecting to your existing browser. You don't spin up a fresh instance. The agent walks into a session that's already warm — logged in, with local storage intact, cookies loaded, history present. This matters more than it sounds.

Consider what it takes to test a feature that's behind an OAuth flow, a CSRF token, and three layers of session middleware. A headless testing framework either has to replicate all of that setup (fragile, slow) or use stored credentials (security surface). A live session has already done all of it. The agent inherits your authentication as a primitive.

"Traditional crawlers spend so much effort on login flows, CSRF tokens, CAPTCHAs, anti-bot detection... all of that just disappears when you fetch from inside the browser itself." — yan5xu, HN

One developer, yan5xu, pushed this philosophy to an interesting extreme with bb-browser. Rather than giving agents browser primitives like "find element, click, snapshot DOM," he wrapped entire websites into CLI commands that call the site's own internal APIs through the browser session. The agent doesn't navigate — it calls bb-browser site twitter/feed and gets structured JSON back. The expensive, SOTA-model reasoning only has to run once, when writing the adapter. After that, smaller models can drive the workflow cheaply.

The Isolated Playwright Approach

The other camp, arguably larger among developers who've been doing this longer, reaches for Playwright — typically in headless or headed Chromium, isolated from personal credentials. User esperent described their setup succinctly: an agent skill tuned to about 1–2k context tokens per interaction, where the agent takes screenshots initially and queries DevTools for logs as needed. "The key," they noted, "was that Claude only needs screenshots initially and then can query the dev tools for logs as needed."

The isolation isn't just about security. It's about determinism. A fresh browser instance produces a clean state you can reason about. Your live session has seventeen tabs open and a React devtools extension that subtly affects the accessibility tree. For actual regression testing, that ambient noise matters.

Live Session Isolated Playwright
Tools Chrome DevTools MCP, bb-browser Playwright CLI, agent-browser
Auth Inherited from your session — zero setup Must replicate login flows
State Warm, real, noisy Clean, deterministic
Token cost High — live DOM trees can hit 50k+ tokens Tunable — ~1–2k per interaction with good skill prompts
Best for Authenticated workflows, personal automation Regression testing, CI, reproducible runs

The Token Problem Is Real

Everyone running these setups in anger eventually collides with the same wall: token costs.

The DOM of a modern web app is vast. Developer tonhschu put it plainly after building a Playwright wrapper: the approach "used to be a real token hog... so much so that I built a wrapper to dump results to disk first then let the agent query instead." User glerk added a stark warning: "Note that this is a mega token guzzler in case you're paying for your own tokens!"

The accessibility tree — the typical snapshot mechanism — can return tens of thousands of tokens for a complex SPA. And unlike a database query, you often can't just select the columns you need. You take the whole tree and hope the agent finds what it's looking for.

"Instead of snapshot the DOM (easily 50K+ tokens), find element, click, snapshot again, parse... you just run bb-browser site twitter/feed and get structured JSON back." — yan5xu

Developer mambodog took a different angle: wrapping Playwright's MCP server with a second Claude call — Haiku, cheap and fast — to summarize each page snapshot before it hits the primary agent's context. It's a kind of perceptual compression layer. Crude, but it works.

The more principled solution is probably what playwright-cli and agent-browser are doing: designing the agent-browser interaction surface to be minimal by default, with richer data available on demand. Screenshots first, then DevTools queries as needed, rather than the firehose of a full DOM dump.

Pattern worth stealing: Several developers independently landed on the same token-reduction technique: write the adapter once with a SOTA model, then run the actual workflow with a cheap, fast model. The expensive reasoning is amortized over all future runs of the same interaction pattern.


Where It Gets Genuinely Interesting

What makes these experiments more than clever tricks is what happens when the agent can observe consequences. Classic unit tests assert that a function returns a value. But the agent can navigate to a page, trigger an interaction, and observe what changes in the rendered DOM, the network waterfall, and the browser console — simultaneously. That's the closed loop.

User boomskats described using the DevTools MCP as an SVG editing REPL: the agent would generate SVG code, the extension would render it in the browser, the agent would take a screenshot, evaluate the result, and refine. Three to four iterations of generate/render/screenshot/adjust. The output — custom icons — was something that would have taken considerably longer through a traditional design workflow.

Substitute "SVG icon" for "UI component render" and you have automated visual regression testing. Substitute it for "API response in the network panel" and you have integration testing. The pattern is the same: the agent acts, observes, and acts again. The browser becomes a feedback surface.

Developer danielraffel went further, combining the DevTools MCP with a scheduled tasks loop to update an Oscar picks page every five minutes during the awards show — the agent visited the Oscars' real-time feed, extracted current results, updated a static site, and pushed to GitHub Pages automatically, handling edge cases like ties without intervention. The loop ran for hours.


The Security Conversation Nobody Wants to Have

If the browser is the feedback surface, it's also the attack surface.

User Etheryte said it plainly: "You're literally one prompt injection away from someone having unlimited access to all of your everything." This isn't paranoia. When an agent can read arbitrary page content and execute JavaScript against your live session, a single malicious page — or a single compromised ad — can instruct the agent to exfiltrate credentials, submit forms, or call APIs on your behalf.

"evaluate_script is the escape hatch. If an agent runs document.body.textContent instead of using the AX tree, hidden injections in display:none divs show up in the output." — guard402

Guard402 outlined the specific mechanism: the accessibility tree — the default snapshot path — filters out display:none elements, providing some natural immunity to hidden injections. But evaluate_script calls using textContent (as opposed to innerText) bypass this protection. And elements hidden via opacity:0 or font-size:0 bypass even the safe default. The agent decides which extraction method to use — and that decision is one the user typically isn't watching.

Developer mh- found a practical middle path: a dedicated Chrome profile, logged into nothing except the current project. Not perfect — prompt injection via the page itself is still possible — but it eliminates the most catastrophic blast radius of commingled personal credentials.

The honest answer is that this is an unsolved problem. The tools work well enough to be useful and poorly enough to be genuinely dangerous if you're not paying attention. User aadishv's response — "I still watch it and have my finger on the escape key at all times" — is probably the state of the art for most practitioners right now.


The MCP vs. CLI Debate (Or: Who Pays the Context Tax)

Threading through the browser-automation discussion is a deeper argument about tooling architecture: MCP versus CLI.

The case against MCP: once configured, the tool definitions consume context tokens whether or not the tools are being used. In a typical multi-server setup, that overhead can run to tens of thousands of tokens before the agent does any actual work. User cheema33 called this the decisive reason MCP would fade: "MCPs, once configured, bloat up context even when they are not being used. Why would anybody want that?"

The counter-argument, made by several developers, is that this is a client implementation problem rather than a protocol problem. Anthropic's tool search feature provides lazy loading — tools are only fully defined in context when the agent actually needs them. The overhead goes from constant to on-demand.

The CLI case is more pragmatic than philosophical: shell commands are self-documenting via --help, the agent already knows how to use them, and the output is trivially pipeable to jq or grep for filtering before it hits the context window. User Torn identified MCP's remaining actual advantages as no-install product integrations, multi-tenant OAuth flows, and security sandboxing — genuinely important in enterprise environments, less so for solo developer workflows.

What seems to be emerging is a pragmatic division: CLI for local developer tooling where the agent already has training data on common tools; remote MCP for centralized services where auth, RBAC, and auditability matter. Browser automation sits awkwardly between these worlds — local but stateful, personal but potentially enterprise-critical.


The Direction of Travel

If you squint at all of this as a trend rather than a collection of individual hacks, a few things seem clear.

The closed loop is genuinely more powerful than one-shot code generation. The feedback surface of a real browser catching real rendering behavior is catching errors that static analysis simply cannot see.

The token cost problem is being solved, but not elegantly. Wrappers on wrappers, summarization layers, adapter patterns that amortize expensive reasoning — these are workarounds. The underlying problem is that the DOM is a dense data structure and agents consume it inefficiently. This seems likely to improve as both models and tooling mature.

The security questions are lagging behind the capability questions. That's historically normal, and historically dangerous. The developers building the most interesting things here are doing so with an "escape key ready" posture that won't scale to teams or production deployments.

What the community is building, haltingly and in a dozen competing directions, is something like automated UI understanding — agents that can look at a rendered interface the way a human does, navigate it purposefully, and report back on what they found. Testing is one application. Reverse engineering APIs is another. End-to-end automation of authenticated workflows is a third. The browser has always been where software meets users. It's now becoming where agents meet software too.


There's something fitting about the fact that the most vivid demonstration of how far this has come is a developer watching an agent center a div, failing to do so, and the whole thread finding it both delightful and perfectly emblematic. The loop is closing. It's just not always centering things correctly yet.


All quotes drawn from the Hacker News discussion thread on Chrome DevTools MCP, March 2026. Projects mentioned: chrome-devtools-mcp · playwright-cli · agent-browser · bb-browser · playwright-slim-mcp