Используем хедлес-режим Хрома
Мы знаем, что агенты умеют ходить в командную строку и запускать там любые команды. То есть можно просить ставить пакеты, монтировать папки, проверять систему и пользоваться любыми программами, которые работают через командную строку.
Вот, например Гугл-хром с его великолепным headless-режимом.
Хедлес-режим, это когда все тоже самое, но без реального окна. Рисуется DOM, исполняется Javascript, работает сеть. Вы не видите окно, но агент видит и работает с сайтом. Может кликнуть на любой элемент, заполнить форму, снять скриншот и вообще все.
И этим можно и нужно пользоваться.
Вот кейсы 🧳 1. Тестирование и доработка мобильной версии. Лучше конечно Playwright, он может несколько браузеров запустить в хедлес-режиме. Ты — Senior Frontend QA/Developer. Используй headless Chrome или Playwright для проверки мобильной версии сайта [ссылочка🔗].
Параметры:
- viewport: 414×896, 360×800, 390×844, 393×873, 384×832. Найди еще другие популярные на текущий месяц в интернете и проверь их тоже
- сделай серию скриншотов по мере скролла страницы
Найди и зафиксируй с помощью скриншотов и хедлес-браузера:
- наезжающие элементы
- слишком мелкий текст
- сломанную сетку
- элементы, выходящие за экран
- горизонтальный скролл
- проблемы с кнопками, формами и навигацией
Затем: 1. внеси исправления в CSS/верстку, 2. пересобери проект, 3. сделай повторные скриншоты
2. Оптимизация Lighthouse. Lighthouse — этот система Гугла, которая отвечает на вопрос, насколько ваш сайт оптимизирован и готов к просмотру.
Для этой задачи агенту нужно уметь запускать аудит, читать структурированные данные и итеративно вносить правки в код.
Ты — Senior Web Developer. Твоя задача — вывести показатели Lighthouse для сайта [URL] в зеленую зону (90+). Используй headless Chrome для запуска аудита и сохрани JSON-отчет. Проанализируй узкие места, такие как блокирующие рендер ресурсы, проблемы с LCP или сдвиги макета (CLS). Внеси необходимые оптимизации в исходный код проекта и перезапускай аудит до тех пор, пока метрики Performance, Accessibility, Best Practices и SEO не станут выше 90 баллов. Кстати, рискованное. Он может потереть счетчки, виджеты и карту и все, что сочтет вредным для оптимизации.
3. Классное и я открыл это для себя буквально на неделе. Для работы с CMS (например, Bitrix или WordPress) агенту нужно передать учетные данные и алгоритм взаимодействия с DOM-элементами интерфейса. Ты — контент-редактор. Используй headless Chrome для перехода на страницу [URL админки] и авторизуйся, введя логин [LOGIN] и пароль [PASSWORD] в соответствующие поля. Найди раздел со статьями, открой последний черновик, проанализируй текст на читаемость и исправь опечатки
Но кстати, если есть доступ к апи, лучше конечно же через апи! Вот путь, логин и пароль к базе, проанализируй структуру базы, сделай бекап и через апи Битрикса накинь всем товарам скидку в 10%
4. Далее самое вкусное 🍬: можно сейчас дать доступ к Нанобана или Чатгапт и попросить нагенерировать картинок или видео для товара и залить их через систему управления выдав доступы. Работает, проверял. Один робот не поймет, что с ним работает другой 🤫
5. Сквозное (E2E) тестирование логики: Агент имитирует реальный путь пользователя, добавляя товары в корзину, заполняя формы оформления заказа и проверяя успешность транзакций на тестовом сервере.
Так что вот такие возможности, о которых год назад мы и мечтать не могли.
Че, зовите друзей знакомых к нам, здесь не боятся делиться вот такими клевыми кейсами
#ai #llm #разработка #программирование #workflow #vibecoding #product #код
В этом посте были ссылки, но мы их удалили по правилам Сетки
