Курс

Агент управляет браузером

БЛОК 4: ДЛЯ ПРОДВИНУТЫХ • Урок 13 из 19

Playwright – что за чудо такое

Playwright это инструмент для управления браузером. Создан Microsoft в 2020 году. Название типа игра слов: «playwright» по-английски «драматург», тот кто пишет сценарии. Вот и этот инструмент пишет сценарии для браузера.

image.png

С ним Claude Code может управлять 🤘🏽 Chromium (опенсорс версией Chrome), и колдовать внутри. Агент будет видеть то же, что видишь ты, и даж немного больше: консоль разработчика, сетевые запросы и скрытые ошибки. В общем, всё что надо для эффективной работы.

Нам это помогает не тратить время на скриншоты и объяснения «вот тут у меня не работает». Claude САМ открывает, сам смотрит, и сам чинит.

Прекрасное великолепно 😏

Прикинь, ты говоришь:

Проверь весь проект. Вот список что нужно проверить: [список].

Claude Code тем временем:

  1. Проходит по всем разделам сайта
  2. Нажимает на кнопки, заполняет формы
  3. Записывает что работает, что нет
  4. Если что-то не работает — смотрит в консоль, разбирается почему
  5. Идёт в код, чинит
  6. Перепроверяет что починилось
  7. Идёт к следующему пункту

Весь цикл: нашёл проблему → понял причину → починил → проверил = идёт пока ты пьёшь кофеек, и наслаждаешься невъебенностью этой жизни!

Что ещё можно

[ + ] Чекать любой сайт. Claude может зайти на любой сайт в интернете, не только на твой локальный проект.

[ + ] Собирать информацию. Нужно спылесосить что-то с закрытой площадки где нет API? Claude зайдёт, найдёт, соберёт.

[ + ] Делать скучную херню. Кликать, заполнять формы, переходить по ссылкам, в общем всё что не по кайфу – сюда.

Как это реально используется 💡

Тестирование своих приложений
Собираешь веб-приложение, открываешь — а там дизайн поехал, кнопка не работает, страница грузится криво. Раньше надо было делать скриншот, загружать, объяснять что не так. Теперь говоришь Claude: «зайди на localhost:3000 через Playwright, сделай скрин, посмотри консоль». Он заходит, видит всё сам — и ошибки на экране, и ошибки в консоли разработчика. И сразу идёт чинить.

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

Вместо DevTools для не технарей
Если ты не разработчик и не знаешь как открыть консоль в Chrome, скопировать оттуда ошибку и отправить > не парься. Playwright делает это за тебя. Claude сам видит все ошибки, сам разбирается что к чему.

Chromium — синий Хром

Когда Playwright запускает браузер, он открывает Chromium, это не обычный Chrome с разноцветным логотипом, а его открытая версия с синим лого (на обычный хром тоже можно переключить, но пока погоди).

Хромиум это основа, на которой построен привычный нам Хром. Тот же движок, те же возможности, но без сервисов Гугл: синхронизации, отслеживания, автообновлений, итд. Чистая болванка для автоматизаций.

При желании можно переключить работу на использование твоего обычного Хрома — через настройку --browser chrome.

Автоматизация через скрипты ⏳

Помимо управления браузером в реальном времени, с помощью Playwright можно писать скрипты [проги, которые автоматически делают рутинную поебень].

Можно отправлять их:

  • Заходить на сайт по расписанию
  • Собирать данные
  • Заполнять формы
  • Делать скриншоты страниц

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

Claude Code может как управлять браузером напрямую через MCP, так и написать тебе скрипт для регулярных задач. Но важно помнить: СКРИПТ НЕ УМЕЕТ ДУМАТЬ. Это просто сценарий действий по таймеру. А когда браузер в управлении Клода, это уже другая ситуация.

Как подключить 🛠️

Просто попроси Claude:

Мне нужно чтобы ты мог управлять браузером. Подключи Playwright MCP.

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

Нюансы про сессии

[ x ] Playwright открывает чистый браузер, вообще без истории, без куков, без авторизаций. Некоторые сайты могут посчитать его подозрительным и показывать капчу. Имей в виду.

[ x ] Чтобы этого избежать, можно настроить сохранение сессии между запусками. Тогда браузер будет "живым", с историей, с авторизациями. Claude может использовать одну и ту же сессию или каждый раз открывать новую, это настраивается по твоему усмотрению.

Лёгкая альтернатива: Fetch MCP 🪶

Playwright это мощный инструмент, но иногда нужно просто прочитать содержимое веб-страницы: без скриншотов, без кликов, без управления браузером.

Для этого есть Fetch MCP — лёгкий MCP-сервер, который открывает страницы и возвращает их содержимое как текст. Бесплатный, не требует установки браузера, работает моментально.

Что может: читать страницы, извлекать текст, парсить HTML.

Чего не может: делать скриншоты, кликать по кнопкам, заполнять формы.

Как включать:

Сказать агенту: подключи Fetch MCP сервер чтобы ты мог читать веб-страницы.

Если тебе не нужно визуальное управление, а просто нужно «сходить и прочитать» > Fetch MCP хватит за глаза. А когда понадобятся скриншоты, клики и полное управление > переходи на Playwright.

Кстати, есть ещё расширение Claude для Chrome

Почитать можно тут > Claude in Chrome. Оно запускает не отдельный чистый браузер, а управляет твоим обычным! Тоже видит страницы, консоль, сетевые запросы. Можно даже записать ему последовательность действий, и Claude научится их повторять. Но есть нюансик..

Не бЕзОпАсНеНьКо.

Расширение видит твой браузер: открытые страницы, консоль, историю действий. Если тебе это некомфортно (мне вот пздц некомфортно), используй отдельный профиль в Chrome. И проверь в настройках аккаунта Anthropic, чтобы была выключена передача данных для обучения моделей (по умолчанию у всех включена).

Помимо того, что расширение имеет обширный доступ к твоим личным данным, оно ещё и уязвимо к инъекциям – это когда какие-то черти оставляют на страницах в интернете "невидимые" промпты, которые Клод хавает, и потом выполняет их приказы, направленные на кражу твоих данных и запуск вредоносных програм. С этой темой пока не научились нормально бороться, поэтому лучше быть осторожным втройне.

Выводы: Playwright даёт Клоду изолированный браузер, который не связан с твоими данными. Расширение Chrome даёт доступ к твоему основному браузеру. Думаем.

💭 От Тома:
Внатуре одна из самых полезных штук. Раньше: заметил баг → сделал скриншот → загрузил → объяснил что не так → ждёшь решение → идёшь проверять. Мне аж плохо стало пока вспоминал. Теперь говорю «зайди и глянь» — и он сам видит, сам чинит, сам проверяет.

А ещё я через Playwright собирал данные с закрытого сайта — настроил авторизацию, написал сценарий, и он аккуратненько всё собрал. Часы ручной работы → 5 минут автомата. Пздц удобно.