В настоящее время тестирование веб-приложений — это не только тестирование совместимости с веб-браузером. Проверка надлежащей видимости на мобильных устройствах, таких как планшеты и смартфоны, так же или даже важнее в контексте потенциальных пользователей.
Все современные браузеры предоставляют разработчикам интегрированные средства разработки и отладки. Браузер Chrome содержит инструмент под названием Chrome DevTools, который состоит из множества очень полезных функций, таких как проверка кода, манипулирование DOM, встроенная консоль JS, мониторинг производительности и сети и многое другое. Ниже я представлю некоторые действительно полезные функции, связанные с мобильным тестированием.
Включение DevTools и эмуляции мобильных устройств
Откройте сайт, который вы хотите проверить или отладить, и перейдите в Меню браузера > Дополнительные инструменты > Инструменты разработчика (или используйте сочетание клавиш Cmd+Opt+I на Mac или F12 / Ctrl+Shift+I на Windows и Linux). Представление эмуляции мобильного устройства появляется после нажатия на значок мобильного устройства, показанный ниже.
Эмуляция сенсорного ввода
В режиме эмуляции стандартный курсор заменяется виртуальным указателем. Типичное поведение, такое как наведение на элемент, отключено, однако разрешены действия для мобильных устройств, такие как касание дисплея или прокрутка.
Панели запросов мультимедиа CSS
Панель медиа-запросов расположена под основной панелью инструментов и представляет шкалы для типичных разрешений телефонов и планшетов.
Чтобы включить графическое представление для текущего файла CSS, нам нужно открыть «Меню из трех точек» и нажать «Показать медиа-запрос».
Графическое представление состоит из трех цветов:
- СИНИЙ — запросы, нацеленные на максимальную ширину
- ЗЕЛЕНЫЙ — запросы, которые нацелены на ширину в пределах диапазона
- ОРАНЖЕВЫЙ — запросы, нацеленные на минимальную ширину
Настройки эмулируемых устройств
Если есть необходимость добавить новое мобильное разрешение в предопределенный список, мы можем просто сделать это в Меню инструментов разработчика (F11) › вкладка Устройства. На этой вкладке мы можем включить/отключить существующие устройства или добавить новое.
Доступные параметры для определения нового устройства:
- имя устройства
- тип устройства (планшет, мобильный и т. д.)
- разрешение устройства
- имя пользовательского агента браузера
- соотношение пикселей (плотность, используемая в дисплеях сетчатки или аналогичных дисплеях с высоким разрешением)
Моделирование ограничения пропускной способности
Эта функция очень полезна, когда мы хотим имитировать медленное сетевое соединение, например, открытые точки доступа (аэропорты, отели). Мы можем проверить, достаточно ли работает наше приложение, быстро ли оно загружается и остается ли оно отзывчивым во всех средах.
Настройки дросселирования доступны в меню инструментов разработчика (F11) › вкладка «Дросселирование». Здесь мы можем найти предопределенные профили или добавить новый.
Профиль регулирования состоит из:
- имя профиля
- скорость загрузки (кб/с)
- скорость загрузки (кб/с)
- значение задержки (мс)
Эмуляции мобильных датчиков
DevTools также поддерживает такие специфические для мобильных устройств функции, как геолокация и гироскоп. Эти настройки доступны в меню Дополнительные инструменты › Датчики.
Параметры, доступные для установки в этой функции:
- широта и долгота — эти значения можно установить вручную, проверить из предопределенного списка или установить как недоступные, чтобы эмулировать, что устройство не может получить сигнал GPS
- ориентация устройства — мы можем вручную установить координаты x, y, z или щелкнуть и перетащить изображение устройства, чтобы установить требуемое положение.
Chrome DevTools — очень мощный инструмент, который содержит множество функций, которые мы можем использовать при разработке и тестировании приложений. С того момента, как я его обнаружил, я не могу представить себе работу без него. Я призываю всех ознакомиться с официальной документацией, которую вы можете найти по этой ссылке, и проверить, что еще DevTools может вам предложить.
Первоначально опубликовано на http://www.blog.j-labs.pl.
