Page Agent от Alibaba: когда GUI сам себя кликает

Вчера наткнулся на Page Agent от Alibaba — инструмент, который обещает превратить “нажми там, потом скролль сюда” в работающий JavaScript. Решил проверить, насколько это вообще жизнеспособно в 2024, когда половина фронтенда уже перешла на сложные SPA с кучей микроанимаций.

Что внутри и как запустить

Page Agent — это не просто обёртка над Puppeteer, а полноценный in-page runtime. После инициализации он:

1. Создаёт DOM-карту интерфейса (похоже на то, как это делает Axe для accessibility)
2. Принимает NL-команды типа “click login button”
3. Генерирует и выполняет JS-код для целевого действия

Установка стандартная:

npm install @alibaba/page-agent

Но интереснее смотреть на live-пример:

import { PageAgent } from '@alibaba/page-agent';

const agent = new PageAgent({
  model: 'gpt-4' // можно и другие, но GPT-4 пока лидер
});

await agent.perform('Find products under 100 USD and add first three to cart');

Под капотом происходит магия с RAG — агент сначала анализирует DOM, затем строит план действий и только потом выполняет. В теории.

Где реально полезно

После пары часов экспериментов выделил три сценария, где инструмент не просто работает, а реально экономит время:

1. Тестирование сложных user flows
   Вместо того чтобы писать 50 строк Puppeteer-кода для проверки многошаговой формы, просто кидаешь команду типа “fill all required fields with valid data and submit”. Агент сам разберётся, где required, что считать валидными данными и куда кликать.

2. Демо для продуктовых
   Когда нужно быстро собрать прототип взаимодействия с новым фичей без бэкенда. Команда вроде “simulate successful payment” генерирует правдоподобный флоу с моковыми данными.

3. Автоматизация рутинного админки
   Внутренние CRM часто имеют ужасный UX. Здесь Page Agent работает как голосовой ассистент: “approve last 10 pending orders with priority shipping”.

Подводные камни

Но не всё так радужно. Вот что не понравилось:

• Перформанс на сложных страницах
  На нашем продакшн-дашборде с 1500+ DOM-нодами инициализация занимала до 8 секунд. Виной тому heavy DOM-parsing на старте.

• Проблемы с динамическими селекторами
  Если у вас React-компоненты с рандомными классами типа div[class*="styles__container"], агент часто теряется. Приходится явно добавлять data-атрибуты для важных элементов.

• Цена GPT-4 при активном использовании
  Каждый запрос — это вызов API. Для enterprise-сценариев с тысячами автотестов счёт может оказаться неприятным.

Альтернативы и выводы

Из похожих инструментов стоит посмотреть на:

• Microsoft’s Playwright AI (более низкоуровневый, но лучше с перформансом)
• OpenDevin (для комплексной автоматизации)

Page Agent от Alibaba — это не silver bullet, а скорее специфичный инструмент для:

• Быстрого прототипирования
• Тестирования ключевых сценариев
• Автоматизации рутинных операций в админках

Если ваша кодовая база уже покрыта e2e-тестами, вряд ли он вам нужен. Но для небольших проектов или когда надо быстро “пощупать” новый интерфейс — вполне годный вариант. Главное — не забывать добавлять data-testid там, где это критично.

Источник: https://github.com/alibaba/page-agent