7 мар. 2026 г.

Агенты веб-автоматизации: управление браузером с Claude и Computer Use

Агенты веб-автоматизации: управление браузером с Claude и Computer Use

Вашей компании нужны данные с портала поставщика, у которого нет API. Это веб-приложение с динамическим контентом, многошаговыми формами и макетом, который меняется каждые несколько месяцев. Ваш скрипт на Selenium ломается каждый раз, когда они обновляют CSS. Вы поддерживаете его как устаревший код — хрупкий, дорогой, и никто не хочет к нему прикасаться.

Агенту на основе визуального распознавания не важны CSS-селекторы. Он видит страницу, визуально находит кнопку «Поиск», нажимает на неё, считывает таблицу результатов и извлекает данные. Когда макет меняется, агент адаптируется, потому что он читает страницу как человек — а не парсит DOM.

Эта статья научит вас создавать агентов веб-автоматизации с использованием возможностей Claude по управлению компьютером. Вы узнаете основные механизмы визуальной автоматизации, надёжные паттерны навигации, методы извлечения данных, рабочие процессы заполнения форм и стратегии восстановления после ошибок. К концу статьи у вас будут паттерны, необходимые для создания агентов, взаимодействующих с любым веб-интерфейсом — от простого чтения страниц до сложных многошаговых рабочих процессов.

Визуальная vs. традиционная автоматизация

Прежде чем создавать агента на основе визуального распознавания, нужно понять, когда это имеет смысл, а когда нет. Традиционные инструменты автоматизации, такие как Selenium и Playwright, никуда не денутся. Они быстрые, детерминированные и хорошо изученные. Вопрос в том, где каждый подход превосходит другой и где даёт сбой.

Традиционная автоматизация (Selenium/Playwright)

Традиционная автоматизация браузера работает через взаимодействие с DOM. Вы находите элементы с помощью CSS-селекторов или XPath-выражений, а затем программно выполняете с ними действия:

# Traditional approach — fast but brittle
search_input = driver.find_element(By.CSS_SELECTOR, "#search-box-v3 > input.query")
search_input.send_keys("industrial bearings")
driver.find_element(By.CSS_SELECTOR, "button.search-submit-2024").click()

Это быстро. Это детерминировано. И это ломается в тот момент, когда кто-то переименовывает search-box-v3 в search-box-v4 или перестраивает макет формы. В итоге вы поддерживаете маппинг селекторов, который отражает внутреннюю структуру сайта — структуру, которую вы не контролируете.

Традиционная автоматизация также не может работать с чисто визуальным контентом. Если нужные вам данные отрисованы в элементе <canvas>, встроены в изображение или отображаются как PDF внутри браузера, DOM-селекторы до них не доберутся.

Визуальная автоматизация (Computer Use)

Визуальная автоматизация работает так же, как человек. Агент получает скриншот, визуально определяет нужные элементы и выполняет действия мышью/клавиатурой по определённым координатам:

# Vision-based approach — resilient but slower
# Agent sees the page, finds the search box visually, and types into it
# No selectors needed — it adapts to layout changes automatically

Компромисс: это медленнее (каждое действие требует API-вызова с изображением), дороже (токены за скриншоты) и недетерминировано (агент может по-разному интерпретировать скриншот в разных запусках). Но это устойчиво к изменениям макета, работает с любым визуальным интерфейсом и может семантически понимать содержимое страницы.

Гибридный подход

Наиболее практичная стратегия сочетает оба подхода:

Используйте традиционную автоматизацию для стабильных, хорошо структурированных страниц, где вы контролируете интерфейс или он редко меняется.
Используйте визуальную автоматизацию для динамических страниц, незнакомых интерфейсов, визуального контента или разовых задач, для которых не стоит поддерживать скрипты.
Используйте визуальное распознавание как запасной вариант — сначала попробуйте селектор; если не получится, переключитесь на визуальную идентификацию.

Когда выбирать визуальный подход

Визуальная автоматизация — правильный выбор, когда:

API недоступен, и веб-интерфейс — ваш единственный вариант
Макет страницы часто меняется, и поддержка селекторов обходится слишком дорого
Контент визуальный — графики, изображения, элементы canvas, встроенные PDF
Многошаговые рабочие процессы требуют контекста — понимания того, что на экране, для принятия решения о следующем действии
Разовые автоматизации, которые не оправдывают инженерных затрат на поддерживаемый Selenium-скрипт
Незнакомые интерфейсы, где задачу можно описать на естественном языке, а не маппить селекторы

Основы Claude Computer Use

Возможность Claude по управлению компьютером позволяет модели взаимодействовать с экраном компьютера так же, как это делает человек — рассматривая скриншоты и выполняя действия мышью и клавиатурой. Понимание механики необходимо перед созданием надёжных агентов.

Как это работает

Цикл управления компьютером прост:

Захватить скриншот текущего экрана (или окна браузера)
Отправить скриншот Claude вместе с описанием задачи
Получить вызов инструмента — Claude сообщает, какое действие выполнить (клик, ввод текста, прокрутка)
Выполнить действие в браузере
Захватить новый скриншот
Повторять, пока задача не будет выполнена или агент не сигнализирует о завершении

Claude никогда не управляет браузером напрямую. Ваш код выступает посредником — получает инструкции от модели и выполняет их в реальной среде.

Определения инструментов

Computer Use опирается на специальное определение инструмента — computer_20241022 — которое описывает доступные действия:

computer_tool = {
    "type": "computer_20241022",
    "name": "computer",
    "display_width_px": 1280,
    "display_height_px": 800,
    "display_number": 1,
}

Доступные действия включают:

screenshot — Захватить текущее состояние экрана
mouse_move — Переместить курсор к указанным координатам
left_click / right_click / double_click — Клик в текущей позиции курсора
left_click_drag — Клик и перетаскивание к целевой позиции
type — Ввести строку текста
key — Нажать определённую клавишу или комбинацию клавиш (например, Return, ctrl+a)
scroll — Прокрутить вверх или вниз в текущей позиции курсора

Цикл действий

Вот полная реализация основного цикла Computer Use:

import anthropic
import base64
import subprocess
import time

client = anthropic.Anthropic()

def capture_screenshot() -> str:
    """Capture screen and return base64-encoded PNG."""
    # Using scrot for X11; adapt for your environment
    subprocess.run(["scrot", "/tmp/screenshot.png"], check=True)
    with open("/tmp/screenshot.png", "rb") as f:
        return base64.standard_b64encode(f.read()).decode("utf-8")

def execute_action(action: dict):
    """Execute a computer use action using xdotool."""
    action_type = action.get("action")

    if action_type == "screenshot":
        return  # Screenshot will be taken in the main loop

    elif action_type == "mouse_move":
        x, y = action["coordinate"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])

    elif action_type == "left_click":
        x, y = action["coordinate"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])
        subprocess.run(["xdotool", "click", "1"])

    elif action_type == "type":
        text = action["text"]
        subprocess.run(["xdotool", "type", "--clearmodifiers", text])

    elif action_type == "key":
        key = action["key"]
        subprocess.run(["xdotool", "key", key])

    elif action_type == "scroll":
        x, y = action["coordinate"]
        direction = action["direction"]
        amount = action["amount"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])
        button = "5" if direction == "down" else "4"
        for _ in range(amount):
            subprocess.run(["xdotool", "click", button])

    time.sleep(0.5)  # Brief pause after each action

def run_computer_use_agent(task: str, max_steps: int = 50):
    """Run a computer use agent loop."""
    messages = [{"role": "user", "content": task}]

    for step in range(max_steps):
        # Capture current screen state
        screenshot_b64 = capture_screenshot()

        # Add screenshot to the conversation
        if step > 0:
            messages.append({
                "role": "user",
                "content": [{
                    "type": "image",
                    "source": {
                        "type": "base64",
                        "media_type": "image/png",
                        "data": screenshot_b64,
                    },
                }],
            })

        # Call Claude with computer use tool
        response = client.messages.create(
            model="claude-sonnet-4-20250514",
            max_tokens=4096,
            tools=[computer_tool],
            messages=messages,
        )

        # Process response
        messages.append({"role": "assistant", "content": response.content})

        # Check if the agent is done
        if response.stop_reason == "end_turn":
            # Extract final text response
            for block in response.content:
                if hasattr(block, "text"):
                    return block.text
            return "Task completed."

        # Execute tool calls
        tool_results = []
        for block in response.content:
            if block.type == "tool_use":
                print(f"Step {step}: {block.input.get('action')} "
                      f"{block.input.get('coordinate', '')}")
                execute_action(block.input)
                tool_results.append({
                    "type": "tool_result",
                    "tool_use_id": block.id,
                    "content": "Action executed successfully.",
                })

        messages.append({"role": "user", "content": tool_results})

    return "Max steps reached."

Разрешение и система координат

Claude сопоставляет визуальное содержимое с пиксельными координатами x,y на основе размеров скриншота, указанных в определении инструмента. Несколько критически важных деталей:

Сопоставьте разрешение дисплея с display_width_px и display_height_px в определении инструмента. Несоответствия приведут к тому, что клики будут попадать не туда.
Более низкое разрешение лучше. Скриншот 1280×800 даёт Claude достаточно деталей для чтения текста и идентификации элементов интерфейса, сохраняя при этом приемлемую стоимость токенов. Не отправляйте скриншоты в 4K.
Координаты абсолютные — (0, 0) — это верхний левый угол экрана.

Надёжные паттерны навигации

Реальные веб-сайты — это хаос. Страницы загружаются асинхронно, всплывающие окна появляются непредсказуемо, а динамический контент меняет макет прямо в процессе взаимодействия. Надёжному агенту автоматизации нужны паттерны для обработки всего этого.

Ожидание загрузки

Самая распространённая ошибка в веб-автоматизации — как традиционной, так и визуальной — это действие до того, как страница готова. Не используйте фиксированные вызовы time.sleep(). Вместо этого проверяйте состояние страницы визуально:

def wait_for_page_load(
    client: anthropic.Anthropic,
    expected_content: str,
    max_retries: int = 5,
    delay: float = 2.0,
) -> bool:
    """Wait for a page to load by checking for expected visual content."""
    for attempt in range(max_retries):
        screenshot_b64 = capture_screenshot()

        response = client.messages.create(
            model="claude-sonnet-4-20250514",
            max_tokens=256,
            messages=[{
                "role": "user",
                "content": [
                    {
                        "type": "image",
                        "source": {
                            "type": "base64",
                            "media_type": "image/png",
                            "data": screenshot_b64,
                        },
                    },
                    {
                        "type": "text",
                        "text": (
                            f"Is this page fully loaded and showing: "
                            f"'{expected_content}'? "
                            f"Reply with only 'yes' or 'no'."
                        ),
                    },
                ],
            }],
        )

        answer = response.content[0].text.strip().lower()
        if "yes" in answer:
            return True

        print(f"Page not ready (attempt {attempt + 1}/{max_retries}). Waiting...")
        time.sleep(delay)

    return False

Обработка всплывающих окон

Баннеры cookie, диалоговые окна уведомлений и виджеты чата — бич веб-автоматизации. Агент на основе визуального распознавания обрабатывает их естественным образом:

def dismiss_popups(client: anthropic.Anthropic) -> bool:
    """Check for and dismiss any popup overlays."""
    screenshot_b64 = capture_screenshot()

    response = client.messages.create(
        model="claude-sonnet-4-20250514",
        max_tokens=

Агенты веб-автоматизации: управление браузером с Claude и Computer Use

Агенты веб-автоматизации: управление браузером с Claude и Computer Use

Визуальная vs. традиционная автоматизация

Традиционная автоматизация (Selenium/Playwright)

Визуальная автоматизация (Computer Use)

Гибридный подход

Когда выбирать визуальный подход

Основы Claude Computer Use

Как это работает

Определения инструментов

Цикл действий

Разрешение и система координат

Надёжные паттерны навигации

Ожидание загрузки

Обработка всплывающих окон

Связанные статьи