Тестирование с Devtools для тех, кто никогда не. Ч.2 – Network

Джуны заучивают названия вкладок и расположение кнопок внутри DevTools, но не всегда понимают, а зачем он, собственно, сдался? В этой статье на примерах расскажем о Network, и да — речь не об общении на it-конференции :)

В первой части мы рассказали, как попасть в панель разработчика и что можно натворить во вкладке Elements.

Сегодня перепрыгнем через две кнопки и посмотрим на Network.Эта вкладка показывает загрузку страницы «под капотом»: как подтягиваются изображения и медиафайлы, какие данные приходят с бэкенда.

Network — лучший друг тестировщика номер два, наравне со вкладкой Elements. Ведь тут можно отслеживать все запросы и ответы, которые осуществляет сайт в процессе работы. Это особенно полезно, когда плохо продуманы уведомления об ошибках на фронтенде. Либо сам текст уведомления неверный и не помогает пользователю.

Сама вкладка гибко настраивается. Кликнув правой кнопкой мыши в области названия колонок, можно выбрать, какая именно информация будет выводиться – например, добавить колонку со статус-кодом или методом.

Рассмотрим конкретные случаи, в которых тестировщику пригодится Network — все они взяты из нашей практики на проекте Джуны.

Возьмем пример некорректно срабатывающей регистрации. Бывает, что ошибки валидации отображаются только в ответах с бэкенда и не выводятся на фронтенд. Тут нам и поможет вкладка Network.

Для удобства работы можно отсортировать запросы по статусам, чтобы сразу увидеть все ошибки на странице.

Еще один способ – отфильтровать запросы по параметру Fetch/XHR. Так вы будете видеть только те из них, которые обращаются к серверу и получают ответ напрямую от него.

Вернемся к нашему примеру с регистрацией. В данном случае оказалось, что если в процессе регистрации вернуться к странице авторизации, то потом невозможно зарегистрироваться ¯\_(ツ)_/¯

Как мы поймем, что именно пошло не так? Откроем Network и увидим, что с бэкенда приходит ошибка в ответ на запрос регистрации.

Простому пользователю эта информация будет не видна. Заводим баг на отсутствие уведомления (и заодно на неверный статус-код).

Например, кажется, что регистрация идет по плану, а по факту отправки данных не происходит.

Снова обращаемся к Network, ищем нужный запрос – и действительно, вернулась ошибка 400. Оказывается, мы ввели неверный номер телефона, который начинается с +78 – а принимаются только номера, начинающиеся с +79. Но пользователь об этом не знает и уверен, что все прошло успешно и ему скоро придет СМС для регистрации.

В таком случае можно увидеть, какого именно ресурса не хватает. Фильтруем по параметру Img – и видим все запросы для получения картинок на странице. Разработчик сможет пофиксить один, уже найденный ресурс, вместо того чтобы искать ошибку самому.

Тут, разумеется, может быть миллион причин (поговорим об этом в следующей статье) – но одну из них легко обнаружить через Network.

Если сайт отправляет двойные запросы – это сильно нагружает сервер. Отображение страницы замедляется, что негативно сказывается на опыте пользователя.

Для этих целей в Network есть функционал так называемого троттлинга трафика. Мы можем вручную выбрать скорость соединения для сайта и посмотреть, как он себя ведет при быстром/медленном интернете или в оффлайне.

Иногда встречаются трудноуловимые или плавающие баги, которые не удается локализовать силами тестировщиков. В таком случае полезно поделиться архивом запросов с разработчиком.

Чтобы сгенерировать такой архив, активируйте чекбокс Preserve log – это позволит сохранить журнал запросов. Затем нажмите стрелку вниз (Export HAR….), чтобы скачать файл.

Чтобы посмотреть свой же или любой другой архив, нужно остановить запись запросов в текущей вкладке, нажав на красную кнопку в верхнем левом углу. Затем с помощью соседней кнопки очистить Network от запросов, если они есть. И через стрелку вверх (Import HAR file….) добавить нужный файл.

А ещё активный чекбокс Preserve log помогает, когда страница быстро перезагружается при получении ошибки и не позволяет даже прочитать информацию из запроса и ответа. С активной настройкой Preserve log не нужно «ловить» строку запроса, она просто остается в истории.

Мы разобрали на примерах, чем вкладка Network может быть полезна в тестировании, а вот тут рассказывали про 10+ лайфхаков по работе с DevTools.

Чтобы закрепить материал, можно воспользоваться бесплатным тренажёром — иногда задания из него задают прямо на собеседовании!

Ставьте лайк, если нужна статья про остальные вкладки DevTools. И — остаемся на связи <3

UPD: про остальные вкладки рассказали здесь