title: "The Competitive Dimension of Browser Automation Has Changed: Some Use Screenshots for Visual Recognition, Others Let AI Directly Read the Web Page's Skeleton" description: "Alibaba open-sourced Page Agent, 20K+ Stars, one line of code lets AI live in the web page—no screenshots, no Python, no browser extensions, directly reading the DOM to operate the interface. But what is the cost of being lightweight?" tags: ["AI Agent", "Page Agent", "Alibaba", "Browser Automation", "DOM", "Open Source"]
The Competitive Dimension of Browser Automation Has Changed: Some Use Screenshots for Visual Recognition, Others Let AI Directly Read the Web Page's Skeleton
If you've ever spent 200 lines of Playwright code just to click a button, you understand a deep sense of absurdity—while your eyes can find that button in 0.1 seconds, the AI has to first take a screenshot, then OCR, then locate, and finally it might miss the click.
Last week, Alibaba's open-source Page Agent hit 20K+ stars on GitHub. It does something counterintuitive: no screenshots, no multimodal models, directly lets AI read the "skeleton" of the web page—the DOM.
This is not just another browser automation tool. It's a paradigm choice: when AI controls a web page, should it "look at pictures" or "read the code"?
The Magic of One Line of Code
Page Agent's integration is ridiculously simple. Add one line of script to your web page:
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.8.0/dist/iife/page-agent.demo.js"></script>
An AI control panel appears in the top-right corner of the page. You give instructions in natural language—"Change the company name in the form to Alibaba", "Find the March invoice and download the PDF"—and the AI starts clicking, filling, and navigating automatically.
If you're a developer, npm installation is straightforward:
import { PageAgent } from 'page-agent';
const agent = new PageAgent({
model: 'qwen3.5-plus',
baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
apiKey: process.env.YOUR_API_KEY
});
await agent.execute('Find the latest order and export it');
It supports OpenAI, Claude, DeepSeek, Qwen, Gemini, Grok, Ollama, Kimi, GLM—covering almost all mainstream large models. The official demo even provides a free Qwen 3.5 Plus API key for zero-cost trial.
Why No Screenshots? That's the Key
Page Agent's core architectural decision is: no screenshots, no visual models, directly process DOM text.
This choice looks counterintuitive in 2026. In an era filled with multimodal large models, who still uses plain text?
But think carefully: the screenshot-recognition path has fatal flaws from the start—
First, screenshots are lossy compression of information. A button's text, position, and whether it's disabled are precise structured data in the DOM, but become pixels in the screenshot. AI then has to "guess" back using visual models, with a non-negligible error rate.
Second, screenshots are expensive. Before each operation, you take a screenshot, feed it into a multimodal model, consuming dozens of times more tokens than plain text. If you let the AI perform 20 consecutive operations, the token cost just for screenshots will make you wince.
Third, screenshots are fragile. If the web page switches to dark mode, adjusts layout, or changes the background image, the visual model may get confused. But the DOM structure hasn't changed, so Page Agent is completely unaffected.
Page Agent "dehydrates" the DOM structure into an extremely lightweight text mapping—similar to how screen readers work. The model receives not an image, but a clean text tree: here is a button, there is an input box, this dropdown has three options. Lightweight, accurate, and unafraid of style changes.
Official data shows that by intelligently loading tools on demand (rather than loading all tools at once), token consumption is reduced by 99%.
What's the Difference from Playwright and browser-use?
Many people's first reaction is: isn't this just Playwright? Not exactly.
| Dimension | Playwright / Selenium | browser-use | Page Agent |
|---|---|---|---|
| Runtime location | Server/local process | Server/local process | Inside the web page |
| Requires Python | ✅ | ✅ | ❌ |
| Requires browser extension | ❌ | ❌ | ❌ (needed for cross-page tasks) |
| Recognition method | Selectors/XPath | Screenshots + visual model | DOM text |
| Deployment complexity | Medium (needs browser engine) | High (needs GPU for visual model) | Very low (one line of code) |
| Use cases | Automated testing | General browser agent | SaaS AI copilot, accessibility enhancement |
The key difference: Playwright and browser-use control the browser from outside, while Page Agent manipulates the web page from inside.
Metaphorically: Playwright is like driving a car with a remote control from outside, browser-use is like driving with a drone's bird's-eye view, while Page Agent sits directly in the driver's seat—it's inside the car.
Real-World Scenarios: What Can It Actually Do?
Smart form filling. Automatically identify form fields and intelligently fill them based on instructions. Batch entry in HR systems, content publishing in CMS—these repetitive form-filling tasks can be done with one command.
SaaS AI copilot. Add an AI assistant to your SaaS product. The user says "Help me export last month's report", and the AI automatically completes the entire operation flow on the interface.
Accessibility enhancement. Visually impaired users can use natural language to control the web page without relying on precise keyboard and mouse operations.
Multi-page task control. With a Chrome extension, the AI can complete complex workflows across pages—for example, first query data on page A, then submit on page B.
Cost Awareness: The Price of Lightness
At this point, you might already want to open GitHub. But wait—
Plain text DOM has natural blind spots. States conveyed by color (gray disabled button), functions represented by icons, hierarchical relationships implied by layout—these visual details are all lost after DOM dehydration. A pure icon button in the DOM might just be <button></button>, and the AI has no idea what it does.
Single-page boundary is a hard limitation. Without installing the Chrome extension, the agent can only operate on the current page. Want to go cross-page? Sorry, you need the extension. This somewhat discounts the "one line of code" minimalist promise.
Complex pages can be problematic. CSDN's newline traps, Juejin's CodeMirror editor—these highly customized UI components have extremely complex DOM structures that Page Agent doesn't handle well. Community feedback: error rates are not low in complex scenarios.
Safety boundaries require human oversight. Page Agent includes a confirmation panel (Human-in-the-loop), requiring user confirmation before executing high-risk operations. But this precisely shows—it's not yet reliable enough for full autonomy. You still need to watch.
Hidden costs of the free demo. The official demo uses free Qwen 3.5 Plus, but it's only for technical evaluation. In production, you need to bring your own API key, and token costs depend on the model you choose and operation frequency. If every step requires going through a large model, a complex workflow can rack up significant token costs.
Trend Judgment: The Relationship Between AI and Web Pages Is Shifting from "Observing" to "Living In"
The true significance of Page Agent isn't how powerful it is, but the direction it represents—AI is moving from being an "observer" of web pages to a "resident".
In traditional solutions, AI always stays outside the web page: either looking at screenshots or controlling via protocols. Page Agent embeds AI into the web page itself. This means:
- For web developers: You are no longer passive in the age of agents. You can proactively embed AI capabilities into your own products, rather than waiting for external tools to "control" your pages.
- For SaaS entrepreneurs: The barrier to adding an AI Copilot to your product has dropped from "rewriting the backend" to "one line of code."
- For front-end testing: Writing test cases in natural language is no longer a dream—though still unstable, the direction is clear.
Of course, today's Page Agent is far from perfect. DOM dehydration loses visual information, single-page boundaries, complex component failures—these are real shortcomings. But it raises a correct directional question:
Is the optimal solution for AI controlling web pages to make AI better at "seeing pictures", or to make web pages easier to be "read"?
If your answer is the latter, Page Agent is worth an hour of your time.
Project repository: https://github.com/alibaba/page-agent Online demo: https://alibaba.github.io/page-agent/
暂无评论。