Учитесь на тестировщика, но все еще не умеете работать с DevTools? Не надо так. Вооружившись знаниями о панели разработчика, вы сможете грамотно локализовать ошибки на сайте и развеять миф о том, что ручные тестировщики «просто нажимают кнопки по инструкции».
До этого в статье на VC мы на конкретных примерах из Джунов разобрали, какие задачи тестирования можно решать с помощью вкладки Elements. Настало время поговорить о лайфхаках. Если вы уже общаетесь с панелью разработчика на «ты», не боитесь затеряться в ее дебрях и готовы покопаться в фичах поглубже – эта статья для вас. Что же интересного может делать тестировщик в DevTools?
В Console
Редактировать сайт целиком
Вы наверняка умеете изменять отдельные элементы сайта через HTML-код. Так вот, в консоли можно включить режим редактирования, который сильно упростит этот процесс.
Откройте консоль, введите команду: document.designMode=’on’; и нажмите Enter. Теперь можно напрямую переписывать тексты на сайте и перетаскивать элементы.
Важно: отображение элементов, которое вы получаете через режим редактирования, может отличаться от их вида при реальном добавлении на сайт. Если вы вписали в блок 30 символов и верстка не нарушилась в режиме редактирования, это не значит, что она действительно будет корректной с 30 символами в этом блоке на реальном сайте. В этом смысле проверка через Elements надежнее.
Новый текст введен через режим редактирования консоли – верстка не нарушается
Тот же текст введен через Elements – верстка нарушается
Для чего же тогда нужна консоль? Если необходимо быстро проверить сразу несколько элементов на странице и поэкспериментировать с расположением элементов, сделать это через режим редактирования будет просто быстрее. Но не забываем о перепроверке :)
Ускорить воспроизведение видео
Представьте: вы как порядочные тестировщики хотите убедиться, что все загруженные на страницу видео проигрываются корректно – от первой до последней секунды. Но у кого же есть столько терпения, времени и сил? Предлагаем решение :)
Видео в HTML-коде обозначается соответствующим тегом <video>. При обращении к элементам нам нужно указать, какое по счету видео на странице нас интересует. Помним, что индексация (то есть порядковый номер) элементов начинается с нуля. Значит, первое видео на странице будет иметь номер 0, второе – 1 и так далее.
Далее перейдем в консоль и введем: document.getElementsByTagName("video")[0].playbackRate = 5;
Это означает, мы скомандовали: найди в документе первое видео и проиграй его в заданном темпе. В конце может стоять любое число – это скорость воспроизведения.
Так, например, можно ускорить видео в разы больше, чем предлагает интерфейс YouTube или любого другого сайта.
В Network
Скачать ресурс
Иногда в процессе тестирования нужно отдельно рассмотреть исходник ресурса, выложенного на сайте – видео, изображения или звука. Проще всего это сделать через вкладку Network.
Дополнительно: некоторые ресурсы можно доставать напрямую из Elements, но это менее удобно – чаще всего там указывается только путь файлу без домена. Так что целую ссылку приходится «конструировать» самостоятельно. В Network такой проблемы нет.
Зайдите в Network и обновите страницу. Если ищете видео или аудиодорожки, отфильтруйте запросы по Media, если изображения – по Img. Откройте нужный запрос, выделите ссылку и перейдите по ней.
В открывшейся новой вкладке появится ресурс, который можно сохранить локально на своем устройстве.
Заблокировать отдельный запрос
При тестировании иногда нужно посмотреть, как сайт будет отображаться без изображений, заданных шрифтов, видео или других ресурсов. Для этих целей можно блокировать выбранные запросы.
Проверим, как сайт будет работать, если вдруг не подгрузится один или несколько CSS-файлов.
Отфильтруем запросы в Network по CSS и найдем нужный файл. Скопируем из вкладки Headers URL запроса. Затем в меню из трех точек в правом верхнем углу выберем Run command либо воспользуемся горячими клавишами: Cmd/Ctrl + Shift + P.
В открывшейся командной строке найдите команду Show Network request blocking («Показать блокировку запросов Сети») и кликнете по ней. Появится окно в нижней части DevTools.
Нажмите Add pattern, введите скопированный ранее адрес стиля или любого другого ресурса в строку. Можно добавить сразу несколько запросов, используя плюс в верхней части окошка.
Теперь перезагрузите страницу – вуаля. Заблокированный стиль не прогрузился, но ошибка на фронте не отображается.
Для сравнения – при блокировке другого файла на том же сайте пользователь увидит хотя бы сообщение «Что-то пошло не так», что намного дружелюбнее пустой страницы :)
Загрузить все запросы и ответы в едином файле
Главный вопрос: зачем может понадобиться полный архив Network?
В первую очередь, он нужен разработчику – если вы поймали «плавающий» баг, который не воспроизводится по четким шагам, архив запросов и ответов сессии может помочь разобраться в проблеме.
К тому же он нужен, чтобы анализировать производительность страницы или искать уязвимости в безопасности сайта.
Скачивается архив запросов и ответов в формате HAR.
Если захотите открыть и проверить его, воспользуйтесь Charles либо импортируйте архив напрямую в браузер. Для просмотра через браузер необходимо остановить запись текущих запросов, кликнуть по кнопке Import HAR file (стрелка вверх) и выбрать нужный архив.
Копировать объекты JSON
Кстати о Charles.
Если вы уже осваиваете сниффер, вам пригодится копирование JSON-объектов целиком – например, через функцию Map Local можно подменять содержимое сайта любым другим файлом. И написать этот файл удобно на основе уже готового JSON.
Открываем Network (можно отфильтровать запросы по Fetch/XHR, чтобы видны были только данные с сервера), находим нужный запрос. Кликнув по запросу, выбираем вкладку Preview. В любом месте вкладки нажимаем правую кнопку мыши, затем Copy object.
Скопированный JSON можно вставить в IDE или любой текстовый редактор – он откроется целиком.
Устроить сайту фотосессию :)
Маленькая вишенка на торте – скорость загрузки страницы можно отследить через серию скриншотов. Это удобно, если есть подозрения, что при загрузке на фронте появляются посторонние элементы, или порядок загрузки элементов кажется неверным.
В Network кликните по шестеренке в правом верхнем углу (не перепутать с верхней шестеренкой – это общие настройки DevTools). Появятся четыре чек-бокса – активируйте Screenshots. Ниже откроется окно, в котором будут отображаться скриншоты.
Обновите страницу – и увидите серию скринов, на которых отображается ее загрузка. Каждый скриншот подписан временной отметкой – можно отследить, с какой скоростью появляется тот или иной элемент.
В командной строке
Сделать скриншот всей страницы или отдельного элемента
Если элементы, которые нужно показать на одном скриншоте, не помещаются в видимую область, а менять масштаб нельзя – можно заскринить страницу целиком.
Делается это через командную строку. Напоминаем, как ее вызвать: три точки вверху справа > Run command или клавиши Cmd/Ctrl + Shift + P.
Вводим команду Capture full size screenshot – и готово.
Другой интересный вариант – скриншот отдельного элемента. Для этого найдите и выберите нужный div, затем включите командную строку и наберите: Capture node screenshot.
Пример результата – скрин элемента (описания товара) без посторонних деталей.
Изменить локацию
Если сайт, который вы тестируете, определяет локацию пользователя, можно поменять ее через DevTools. Это часто актуально для интернет-магазинов, в которых каталог меняется в зависимости от местоположения покупателя.
В командной строке введем и выберем Show Sensors.
Внизу появится окно Sensors, где есть раздел Location с выпадающим списком.
Можно выбрать «готовый» город, а можно перейти по кнопке Manage и добавить свою локацию. На примере ниже видим, что при выборе Берлина сайт переводится на немецкий язык.
Есть одно «но» – подмена работает только для сайтов, определяющих город через геолокацию. Если используется IP-адрес пользователя, изменить местоположение через DevTools не получится.
Отключить JavaScript
Отключение скриптов может понадобиться для разного рода проверок.
Так, JavaScript помимо прочего отвечает за валидацию данных на фронтенде. Например, когда пользователь заполняет форму регистрации скрипт проверяет, все ли обязательные поля заполнены и соблюдены ли установленные маски для почты и телефона. Но что произойдет, если JS не сработает? Будет ли действовать валидация на стороне сервера? Проверить это поможет отключение JavaScript.
Наконец, выполнение скриптов может просто мешать тестированию какой-то части сайта или локализации ошибки.
Отключить JS можно следующим образом. В командной строке DevTools вводим и выбираем Disable JavaScript. Обновляем страницу.
После этого все функции, инициируемые скриптами, пропадут. Например, на скриншоте ниже видно, что появление изображений на сайте анимировано – поэтому после отключения JS картинки исчезают.
Включить скрипты заново можно, введя в командной строке команду Enable JavaScript.
Изменить устройство
У многих сайтов мобильная и веб-версия отличаются – мобилка чаще бывает облегченной, с меньшим количеством анимации, другими шрифтами и стилями. Мы можем подменить данные об устройстве пользователя, чтобы проверить, как адаптируется при этом сайт.
Сведения об устройстве, операционной системе и браузере пользователя передаются через хедер User-Agent. Его мы и будем редактировать.
Откроем командную строку и введем Show network conditions.
Внизу появится окно с условиями сети и блоком User agent. Отключаем чек-бокс Use browser default, чтобы убрать данные своего устройства, и выбираем из выпадающего списка нужный вариант ОС и браузера. Можно задать User agent вручную, выбрав опцию Custom.
Как результат – видим изменение стилей. Например, вот так поисковик выглядит в браузере Opera на macOS.
А вот так – в мобильном браузере Safari.
Итого
Надеемся, какие-то из лайфхаков запомнятся вам и будут полезны в учебе и работе. И, конечно, приятно блеснуть дополнительными знаниями на собеседовании :)
А если вы еще не доросли до продвинутых функций DevTools, советуем начать осваивать его вместе с нашим тренажером.
До скорых встреч!
