Инструменты разработчика Chrome для агентов позволяют вашему агенту проверять адаптивный дизайн, тестировать API, учитывающие местоположение, и имитировать различные скорости процессора или сети. Используйте эти инструменты для выявления граничных случаев и более эффективной автоматизации аудита производительности.
Эти функции эмуляции работают с другими инструментами, которые позволяют вашему агенту взаимодействовать с вашим сайтом, например, нажимать на элементы, заполнять формы и перемещаться по страницам.
Вот чему вы можете поучиться:
- Область просмотра и пользовательский агент : эмуляция определенных размеров экрана и идентификаторов устройств.
- Геолокация: Подмена координат местоположения для тестирования API, учитывающих местоположение.
- Сеть и ЦП: Регулировка параметров сети и скорости ЦП для имитации реальных ограничений производительности.
- Цветовая схема: переключение между светлым и темным режимами.
При использовании эмуляции следует учитывать следующее:
- Поддержка устройств: Ваш агент может эмулировать любое устройство из списка
KnownDevicesв Puppeteer . Это включает в себя имитацию событий касания для мобильных устройств. - Поведение браузерного движка : Хотя инструмент имитирует характеристики устройства, он не моделирует браузерные движки, отличные от Chromium, или различные операционные системы. Ваш агент всегда запускается в Chrome в вашей текущей операционной системе.
Варианты использования эмуляции пользователя
Поручите своему агенту эмулировать различные среды и проверять пользовательский интерфейс, вместо того чтобы вручную изменять размер окон браузера, подменять IP-адреса или ограничивать скорость сети после каждого изменения кода.
Интегрируйте эмуляцию в свой процесс разработки с помощью этих рабочих процессов.
Дорабатывайте адаптивный дизайн.
Шаблоны навигации часто кардинально различаются между мобильными и настольными устройствами. В процессе разработки приложения вы можете поручить своему агенту проверять корректность отображения только что созданных компонентов и предоставление одинакового контента на всех устройствах.
Пример подсказки:
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
Пример выполнения агента: Ваш агент открывает окно Chrome, переходит на нужную страницу, запускает эмуляцию и сравнивает элементы в обоих окнах просмотра. Он подтверждает, что мобильная версия (гамбургер-меню) и версия для настольных компьютеров (заголовок) содержат ожидаемые ссылки.
Проверка взаимодействия между различными окнами просмотра
Нарушения в макетах происходят не только в CSS, но и во время взаимодействия с пользователем. Статические скриншоты часто не показывают ошибки, которые возникают, когда пользователи действительно касаются интерфейса. Вы можете поручить своему агенту тестирование конкретных сценариев взаимодействия в разных областях просмотра, чтобы выявить скрытые функциональные ошибки.
Пример подсказки:
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
Пример выполнения запроса агентом: Ваш агент вводит поисковый запрос и изменяет размер экрана в соответствии с каждым из трех размеров. В этом примере ваш агент обнаруживает, что на планшетах и мобильных устройствах строка поиска расширяется, занимая всю ширину заголовка, и скрывает ссылку « Войти ».
Прототип функций, учитывающих местоположение.
Тестирование API, зависящих от физического местоположения пользователя (например, поиск «Рядом со мной» или поиск магазинов), обычно требует ручного переопределения датчиков. Теперь вы можете поручить своему агенту подменять определенные геолокации для беспрепятственной проверки логики вашего фронтенда и бэкенда.
Пример подсказки:
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
Пример выполнения действий агента: Ваш агент переходит на сайт, ищет Берлин, а затем динамически вводит определенные координаты широты и долготы, чтобы имитировать Париж, после чего взаимодействует с функцией «Использовать мое местоположение», чтобы убедиться, что отображаются правильные магазины.