Тестирование моего сайта с помощью Gemini 2.5 Computer Vision и Playwright
Google сегодня выпустила Gemini 2.5 Computer Use. Это модель, которая может смотреть на скриншоты и говорить вам, куда нажимать. То есть, она действительно смотрит на веб-страницу и понимает: «ссылка на блог находится в верхней навигации».
На моем сайте 8 языков. Иногда при переключении языка страница загружается пустой. Без ошибки, просто пусто. Я пытался поймать, когда это происходит, но ручное тестирование — это мучение.
Поэтому я решил доверить это ИИ. С помощью Claude Code я получил работающий тест менее чем за 15 минут. Я просто дал ему документацию Gemini 2.5 Computer Use и сказал, что мне нужно. Он написал тест.
Как это работает
Модель Gemini 2.5 Computer Use просматривает скриншоты и генерирует вызовы функций. Код делает снимок экрана браузера, отправляет его модели, модель анализирует его и возвращает вызов функции, например, «click_at» с координатами.
Код выполняет этот вызов функции (используя Playwright). После нажатия он делает новый скриншот и отправляет его обратно модели в качестве ответа на функцию. Модель использует это для принятия следующего решения.
Я хотел проверить, работают ли мои переводы на самом деле. Поэтому я сказал ему:
- Перейти на страницу блога
- Нажать на первую статью блога, которую увидишь
- Запомнить заголовок и первый абзац
- Переключить язык на испанский, немецкий и французский
- Для каждого языка проверить, изменилось ли содержимое и не является ли оно пустым
- Сообщить о любых найденных проблемах с переводом
Настройка
Вам понадобятся три вещи:
- Пакет
@google/genaiдля связи с Gemini - Playwright для управления браузером
- Ключ API из Google AI Studio (это бесплатно)
Код — это, по сути, цикл:
while (!done) {
// Отправляем скриншот в ИИ
const response = await client.models.generateContent({
model: 'gemini-2.5-computer-use-preview-10-2025',
contents: [screenshot, task],
});
// Получаем координаты клика
const action = response.candidates[0].functionCall;
if (!action) {
done = true; // ИИ говорит, что закончил
break;
}
// Кликаем там, где сказал ИИ
await page.mouse.click(action.args.x, action.args.y);
// Делаем новый скриншот
screenshot = await page.screenshot();
}
Модель возвращает координаты в нормализованной сетке 1000x1000. Вы масштабируете их до фактических размеров вашего экрана. Я использую 1440x900 (рекомендуемый размер).
const actualX = Math.floor((x / 1000) * 1440);
const actualY = Math.floor((y / 1000) * 900);
Наблюдение за выполнением
Я запускал его с видимым браузером. На это довольно дико смотреть.
Шаг 1: Смотрит на мою домашнюю страницу. «Вижу ссылку Блог наверху». Нажимает на нее.
Шаг 2: На странице блога. «Первая статья о Kindle AI». Нажимает на нее.
Шаг 3: Читает статью. Запоминает заголовок: «Как использовать ИИ прямо на вашем Kindle».
Шаг 4: Находит переключатель языка (этот маленький значок глобуса). Нажимает на него.
Шаг 5: Открывается меню. Нажимает «Español» (Испанский).
Шаг 6: Загружается испанская версия. «Содержимое изменилось. Работает».
Шаг 7: Переключается на немецкий. Снова нажимает на переключатель языка.
Шаг 8: Страница загружается на немецком. «Подождите, эта страница выглядит почти пустой. Видна только точка. Содержимое отсутствует». Немедленно останавливается.
Он нашел ошибку (подробнее о том, что вызвало пустые переведенные страницы, можно прочитать здесь). Затем он сгенерировал подробный отчет:
📊 ИТОГОВЫЙ ОТЧЕТ
⚠️ Найдено 1 проблема(и):
[ES] - 1 проблема(и):
Статья: Cómo usar IA directamente en tu Kindle
URL: .../traer-ia-a-kindle-como-construi-chatgpt-para-lectores-electronicos
Проблема: Страница загружена, но область содержимого пуста, видна только точка.
Шаги: Главная → Блог → Нажата статья → Содержимое отсутствуетИИ поймал именно ту проблему, которую я искал. Он даже описал, что увидел (пустая страница с одной точкой) и перечислил шаги для воспроизведения.
Возникшие проблемы
При первом запуске я получил ошибку 503. API находится в предварительной версии и перегружен. Запустил еще раз, все сработало нормально.
Модель поддерживает 13 действий: open_web_browser, wait_5_seconds, go_back, go_forward, search, navigate, click_at, hover_at, type_text_at, key_combination, scroll_document, scroll_at и drag_and_drop. Для этого теста я реализовал только 7. Для реального набора тестов вам понадобятся все.
Каждый скриншот размером 50–100 КБ отправляется в API. Мой тест отправил около 30 скриншотов. Это накапливается, если вы много тестируете.
Почему это полезно
Для тестирования обычные тесты Playwright выглядят так:
await page.click('[data-testid="lang-switcher"]');
await page.click('[data-lang="es"]');
expect(await page.textContent('h1')).toBe('Cómo usar IA...');
С Computer Use вы просто говорите: «Переключись на испанский и проверь, изменился ли заголовок».
Тест с ИИ медленнее и стоит денег. Но:
- Гораздо быстрее писать
- Не ломается при изменении CSS-классов
- Работает как настоящий пользователь
- Хорошо подходит для разовых проверок
Что еще можно с этим сделать
Модель не ограничивается тестированием. В документации упоминаются варианты использования, такие как автоматизация повторяющегося ввода данных, проведение исследований на веб-сайтах и заполнение форм. Увидев, как это работает, я подумал о других применениях:
- «Сравнить цены на этот товар на этих 5 веб-сайтах»
- «Заполнить эту форму заявки на работу данными из моего резюме»
- «Найти все статьи блога по теме X и обобщить их»
- «Ежедневно отслеживать эту страницу и уведомлять меня об изменении контента»
- «Извлечь все детали продукта из этого каталога в электронную таблицу»
Все, что вы делали бы вручную в браузере, можно автоматизировать с помощью простых текстовых инструкций.
Попробуйте
В API Gemini есть бесплатный уровень для тестирования, хотя Computer Use использует то же ценообразование, что и Gemini 2.5 Pro (1,25 доллара за 1 млн входных токенов). Вам понадобится:
- Ключ API из Google AI Studio
- Пакет npm
@google/genai - Playwright
Начните с простого: «Перейдите на example.com и назовите мне заголовок страницы». Затем развивайте.
Имя модели: gemini-2.5-computer-use-preview-10-2025.