Агент за доской: Playwright и /goal

1. Чего агент ещё не умел: трогать живую страницу

Игра готова: настоящие шахматы на chess.js, все семь пунктов проходят, метки для агента на месте. Тёма приходит к Лёхе с ней — и сразу с подвохом:

— Слушай, окей. Игра есть, метки есть, за кого агент играть — решили. Но двигать-то фигуры руками кто будет? Агент же живёт в терминале — он в мою доску в браузере как попадёт? Я что, за него мышкой кликать должен?

— А вот с этого и начинается главное на сегодня, — Лёха явно ждал вопроса. — Вспомни, что агент умел до сих пор. Читал файлы, писал код, даже на прошлой неделе через mcp-кабель притащил тебе землетрясения. Всё это — работа с текстом: буквы, данные, строчки на диске. А вот открыть страницу в браузере и кликнуть по ней — нажать кнопку, схватить фигуру, перетащить на клетку — он не умел. Не было у него рук в браузере.

— А теперь будут?

— А теперь будут. Сегодня агент научится управлять настоящим браузером. Сам открывает окно, сам двигает курсор, сам кликает. И это, честно скажу, самое зрелищное, что ты тут увидишь.

2. Это тот же MCP-кабель, только к браузеру

— И это что, какая-то новая огромная штука? — Тёма заранее напрягается, что сейчас неделя настройки.

— А вот и нет, — Лёха почти доволен. — Помнишь, пару дней назад мы MCP-кабелем дотянулись до сервиса землетрясений? Была программа снаружи, она отдавала данные, а мы подключили её к агенту кабелем. Так вот, браузер подключается точно так же. Есть специальная программа — браузер с разъёмом под MCP. Подключаем её к агенту тем же кабелем — и агент получает над браузером руки: открыть страницу, кликнуть, напечатать, снять скриншот.

— То есть новое что-то учить не надо?

— Кабель — тот же, ты его уже освоил. Новое — только куда он воткнут. Раньше на том конце был сервис с данными, теперь — браузер, которым можно рулить. Приём один и тот же. Эта программа-браузер называется Playwright. Подключил кабелем — и у агента появились руки в браузере.

3. Подключаем Playwright

— Хватит теории, — Лёха открывает терминал. — Подключаем. Одна команда:

claude mcp add playwright -- npx -y @playwright/mcp@latest

— Погоди, разбери по словам, — просит Тёма, глядя на строку. — А то с виду сложновато.

— Да не сложнее прошлого раза, — Лёха разбирает по частям. — claude mcp add — это «добавь MCP-подключение», ты это уже делал пару дней назад с землетрясениями. playwright — просто имя, которым я называю это подключение, чтоб потом узнавать его в списке.

— А эти две чёрточки?

— -- — это разделитель. Всё, что стоит справа от них, Claude не разбирает как свои настройки, а передаёт целиком как команду запуска: «вот эту программу возьми и запусти». Справа как раз она и стоит — npx -y @playwright/mcp@latest: это «скачай из интернета свежий пакет @playwright/mcp и запусти его».

— А в прошлый раз мы писали какой-то --transport http. Тут где он?

— Хороший вопрос. В прошлый раз сервис работал по сети — где-то на чужом сервере, и мы флагом --transport http говорили: «кабель идёт по интернету, вот по такому адресу». А тут всё иначе. Мы не идём в сеть — мы запускаем программу-браузер прямо у тебя на машине, вот этой командой после --. Раз программа локальная, запущена рядом, — Claude общается с ней напрямую, без сети, и никакой --transport http не нужен. Локальная программа против сетевого сервиса — вот и вся разница между двумя командами.

Лёха жмёт Enter — команда отрабатывает. И сразу предупреждает:

— Теперь важное, не пропусти. Подключение добавилось в настройки, но текущая сессия про него ещё не знает. Новые кабели цепляются только на старте — значит, сессию надо перезапустить. Но не просто выйти-зайти начисто, а так, чтоб не потерять всё, что мы тут наработали над игрой. Для этого есть отдельный ключ — --continue: он и подхватит свежий кабель, и вернёт весь наш контекст. Выходишь из агента и запускаешь:

claude mcp list        # проверить: playwright → ✓ Connected
claude --continue      # перезапустить, подхватив кабель и не потеряв контекст

— В списке playwright должен стоять со статусом ✓ Connected — значит, браузер подключён и агент его видит. Если статуса нет или ошибка — первым делом проверь команду и что пакет скачался. И почти всегда причина одна: не перезапустил сессию. Забыл — агент подключения не подхватит, хоть трижды его добавляй.

Дальше, уже в свежей сессии, глянем, что подключение дало:

/mcp          # показывает подключённые MCP и их инструменты

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

4. Агент делает первый ход

— А теперь просто проси словами, — Лёха набирает в сессии. — Только назови прямо: через Playwright. Скажешь просто «открой страницу» — агент может открыть её в обычном браузере, куда ему руки не дотянутся, будет смотреть со стороны. А нам надо, чтоб он открыл её именно в playwright-браузере — том, которым он умеет рулить. Поэтому имя и указываем:

Через Playwright открой мою игру game.html в браузере.
Ты играешь за чёрных. Дождись, когда настанет твой ход, сделай ход и пришли скриншот доски.

— А теперь гляди на экран, — Лёха не торопит.

Секунду ничего. Потом само открывается окно браузера — то самое, playwright-овское, где видно каждое движение агента. В нём загружается доска. Тёма двигает белую пешку — своей рукой, он же за белых. Ход переходит к чёрным. И тут курсор в окне сам подъезжает к чёрному коню, подхватывает его, ведёт на клетку, отпускает. В чат падает скриншот доски.

— Офигеть! — Тёма аж подскакивает, тычет пальцем в экран. — Он реально сам сходил! Я не трогал ничего — а фигура поехала!

— Сам, — усмехается Лёха. — А теперь смотри, как он это сделал. Прочитал на странице метку data-turn, увидел "b" — понял, что настала его очередь, чёрные. Посмотрел на доску, выбрал ход, кликнул фигуру, кликнул клетку. Ты за него ни разу не притронулся к мышке. Вот тебе и «браузер ожил» — не на словах, а вот оно, окно, курсор ходит сам.

5. /goal: агент крутит до результата

Тёма уже завёлся:

— Слушай, а можно ещё круче? Чтоб я не по одному ходу командовал, а сказал «доиграй партию» — и ушёл, а он сам катал до конца?

— Можно, и для этого у Claude Code есть отдельная мощная команда — /goal, «заданная цель». Штука крутая, запомни её. Обычно ты как работаешь: даёшь агенту шаг, он сделал, ждёшь, даёшь следующий. А /goal переворачивает это. Ты даёшь не шаги, а условие, при котором дело можно считать сделанным — и уходишь.

Агент дальше сам крутит по кругу: сделал попытку → проверил, выполнено ли условие → не выполнено, делает ещё → и так, пока не сойдётся. Причём проверяет не он сам себе на глаз: после каждого шага подключается отдельный невидимый проверяющий (быстрая модель) и судит — достигнута цель или нет. Достигнута — агент останавливается. Это и есть «поставил задачу и ушёл»: возвращаешься — а всё готово.

— Это ж вообще для чего угодно так можно! — доходит до Тёмы. — Не только шахматы.

— Для чего угодно, где ты можешь чётко описать, что значит "готово", — кивает Лёха. — А у нас с шахматами это как раз есть. Помнишь свою метку data-game-over? Вот она тут и пригодится как условие:

/goal на доске появился атрибут data-game-over="true"

— Агент играет ход за ходом и после каждого сверяется: встал data-game-over в "true" или ещё нет. Партия дошла до мата, метка встала — агент остановился сам. А ты в это время хоть чай пей.

Тёма светится:

— Да это ж крутость в квадрате! Мало что он сам ходит — так ещё и всю партию без меня доведёт: загадал, ушёл, вернулся — готово.

— Ага. А выключить режим, когда надоест:

/goal clear     # снять загаданную цель

И тут Лёха ставит честную границу — не поучая, просто отмечает:

— Только заметь одну вещь. Условие, которое ты вписал, — data-game-over — ты взял готовым. Ты же сам эту метку в игру и заложил, когда собирал, — теперь просто скопировал её в /goal. А вот самому придумать, при каком условии задача вообще считается выполненной, чтоб машине можно было доверить проверку, — это отдельное взрослое умение, до него дойдём сильно позже. Пока — берёшь готовое условие и наслаждаешься, как агент сам крутит до результата.

— Заметано, — Тёма уже не слушает оговорку толком, ему не терпится запустить.

6. Тот же браузер — на любую живую страницу

— Слушай, — соображает Тёма на ходу, — а раз он умеет ходить по страницам… это же не только про мою игру?

— Не только, — кивает Лёха. — Браузер-то общий. Той же рукой агент откроет любую живую страницу и пройдёт по ней сценарий. Помнишь лендинг, который ты выкатил в интернет ещё на пятом уровне? Вот по нему той же рукой можно быстро пробежаться — открыть, дойти до нужного места, вернуть скриншот: всё на месте, живое.

— То есть это не только цирк «он играет, а я смотрю».

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

— Ну что, голова не пухнет? — Лёха тянется закрыть терминал. — Смотри, что у тебя теперь в руках. Playwright — это агент за рулём настоящего браузера: сам открыл окно, сам кликает, сам скриншот прислал. Подключили его тем же mcp add, что и землетрясения, только без сети — как программу прямо тут, на машине; не забыл перезапустить сессию — и mcp list показал Connected. Дальше агент читает метки прямо на странице — data-turn, data-game-over — и по ним понимает, что к чему, вместо того чтоб гадать по картинке. А /goal — это когда ты дал не шаги, а условие, и ушёл: он сам крутит до результата.

— Все нормально, — кивает Тёма. — Одно только это твоё «условие бери готовое» — так себе радость.

— На готовом пока и живи, — усмехается Лёха. — Своё придумывать научишься, дай срок. Вот теперь — можно собирать по-настоящему.