Alibaba Page Agent: Управление веб-интерфейсами через DOM

Революция внутри браузера

В отличие от традиционных инструментов автоматизации, таких как Playwright, Puppeteer или Selenium, которые работают как внешние процессы, считывая страницу через Chrome DevTools Protocol (CDP) или скриншоты, Alibaba Page Agent живет прямо внутри веб-страницы. Это клиентская библиотека на TypeScript, которая работает как обычный JavaScript-скрипт, получая доступ к живому DOM-дереву в реальном времени.

Ключевое преимущество подхода — отсутствие необходимости в мультимодальных моделях, способных «видеть» пиксели. Агент отправляет в LLM только текстовое представление интерфейса, что значительно снижает стоимость запросов и повышает точность действий за счет работы со структурой, а не с изображениями.

Технология DOM Dehydration

Основной механизм работы — DOM dehydration. Современная веб-страница может содержать тысячи узлов, что делает отправку сырого HTML в модель неэффективной. Page Agent преобразует DOM в компактную структуру FlatDomTree, выделяя только интерактивные элементы (кнопки, поля ввода, ссылки), присваивая им индексы, роли и метки.冗余ный разметка удаляется, оставляя модели только необходимую для принятия решений информацию.

Архитектура проекта модульная:

@page-agent/core: логика агента без головы (headless).
page-agent: основной класс с UI-панелью.
@page-agent/page-controller: извлечение DOM, индексация элементов и визуализация через SimulatorMask.

Сравнение подходов

Важно понимать, что Page Agent не заменяет инструменты для тестирования или скрейпинга внешних сайтов. Его ниша — интеграция в приложения, код которых вы контролируете. Ниже приведено сравнение с популярными альтернативами:

Подход	Где запускается	Как читает страницу	Лучшее применение
Page Agent	Внутри страницы (Client-side JS)	Текстовый DOM (FlatDomTree)	AI-копилоты внутри ваших SaaS-продуктов
Selenium / Playwright	Внешний процесс	DOM через драйвер (WebDriver/CDP)	Автоматизированное end-to-end тестирование
browser-use	Внешний процесс	DOM + опционально Vision	Автономные агенты для работы с множеством сайтов
WebMCP	Серверная часть	Структурированные вызовы функций	Доступ к нативным инструментам агентов

Практическое применение и безопасность

Page Agent идеально подходит для:

SaaS AI-копилотов: Бот не просто дает инструкции, а сам нажимает кнопки и заполняет формы за пользователя.
Умного заполнения форм: Пользователь пишет «Отправить отчет о командировке на 50 долларов», а агент сам находит поля, вводит данные и отправляет форму.
Доступности: Интеграция с Web Speech API для голосового управления.
Модернизации legacy: Добавление голосового управления в старые внутренние системы без переписывания бэкенда.

Проект открыт под лицензией MIT. Для работы требуется любая OpenAI-совместимая модель. Пример инициализации:

import PageAgent from 'page-agent';
const agent = new PageAgent({
  model: 'qwen3.5-plus',
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  apiKey: 'YOUR_API_KEY',
  language: 'en-US'
});
await agent.execute('Click the login button');

Важное предупреждение: Безопасность здесь строится на уровне промптов (например, запрет на авто-отправку платежей). Это «мягкие» ограничения. Для критических действий необходима серверная валидация. Также агент ограничен одной страницей: для работы с несколькими вкладками требуется отдельное Chrome-расширение.

Источник: MarkTechPost ↗

Alibaba Page Agent: Агенты внутри DOM, а не через Selenium

Революция внутри браузера

Технология DOM Dehydration

Сравнение подходов

Практическое применение и безопасность