Тестирование с Devtools для тех, кто никогда не. Ч.2 – Network
Джуны заучивают названия вкладок и расположение кнопок внутри DevTools, но не всегда понимают, а зачем он, собственно, сдался? В этой статье на примерах расскажем о Network, и да — речь не об общении на it-конференции :)
В первой части мы рассказали, как попасть в панель разработчика и что можно натворить во вкладке Elements.
Сегодня перепрыгнем через две кнопки и посмотрим на Network.Эта вкладка показывает загрузку страницы «под капотом»: как подтягиваются изображения и медиафайлы, какие данные приходят с бэкенда.
Network — лучший друг тестировщика номер два, наравне со вкладкой Elements. Ведь тут можно отслеживать все запросы и ответы, которые осуществляет сайт в процессе работы. Это особенно полезно, когда плохо продуманы уведомления об ошибках на фронтенде. Либо сам текст уведомления неверный и не помогает пользователю.
Сама вкладка гибко настраивается. Кликнув правой кнопкой мыши в области названия колонок, можно выбрать, какая именно информация будет выводиться – например, добавить колонку со статус-кодом или методом.
Рассмотрим конкретные случаи, в которых тестировщику пригодится Network — все они взяты из нашей практики на проекте Джуны.
Задача 1. Не получается зарегистрироваться, но сообщения об ошибке нет.
Возьмем пример некорректно срабатывающей регистрации. Бывает, что ошибки валидации отображаются только в ответах с бэкенда и не выводятся на фронтенд. Тут нам и поможет вкладка Network.
Для удобства работы можно отсортировать запросы по статусам, чтобы сразу увидеть все ошибки на странице.
Еще один способ – отфильтровать запросы по параметру Fetch/XHR. Так вы будете видеть только те из них, которые обращаются к серверу и получают ответ напрямую от него.
Вернемся к нашему примеру с регистрацией. В данном случае оказалось, что если в процессе регистрации вернуться к странице авторизации, то потом невозможно зарегистрироваться ¯\_(ツ)_/¯
Как мы поймем, что именно пошло не так? Откроем Network и увидим, что с бэкенда приходит ошибка в ответ на запрос регистрации.
Простому пользователю эта информация будет не видна. Заводим баг на отсутствие уведомления (и заодно на неверный статус-код).
Задача 2. Регистрация прерывается из-за ошибки, но пользователь об этом не знает.
Например, кажется, что регистрация идет по плану, а по факту отправки данных не происходит.
Снова обращаемся к Network, ищем нужный запрос – и действительно, вернулась ошибка 400. Оказывается, мы ввели неверный номер телефона, который начинается с +78 – а принимаются только номера, начинающиеся с +79. Но пользователь об этом не знает и уверен, что все прошло успешно и ему скоро придет СМС для регистрации.
Задача 3. На сайте не загружается картинка.
В таком случае можно увидеть, какого именно ресурса не хватает. Фильтруем по параметру Img – и видим все запросы для получения картинок на странице. Разработчик сможет пофиксить один, уже найденный ресурс, вместо того чтобы искать ошибку самому.
Задача 4. Сайт медленно грузится.
Тут, разумеется, может быть миллион причин (поговорим об этом в следующей статье) – но одну из них легко обнаружить через Network.
Если сайт отправляет двойные запросы – это сильно нагружает сервер. Отображение страницы замедляется, что негативно сказывается на опыте пользователя.
Задача 5. Нужно проверить работу сайта с медленным интернетом или оффлайн.
Для этих целей в Network есть функционал так называемого троттлинга трафика. Мы можем вручную выбрать скорость соединения для сайта и посмотреть, как он себя ведет при быстром/медленном интернете или в оффлайне.
А что ещё?
Иногда встречаются трудноуловимые или плавающие баги, которые не удается локализовать силами тестировщиков. В таком случае полезно поделиться архивом запросов с разработчиком.
Чтобы сгенерировать такой архив, активируйте чекбокс Preserve log – это позволит сохранить журнал запросов. Затем нажмите стрелку вниз (Export HAR….), чтобы скачать файл.
Чтобы посмотреть свой же или любой другой архив, нужно остановить запись запросов в текущей вкладке, нажав на красную кнопку в верхнем левом углу. Затем с помощью соседней кнопки очистить Network от запросов, если они есть. И через стрелку вверх (Import HAR file….) добавить нужный файл.
А ещё активный чекбокс Preserve log помогает, когда страница быстро перезагружается при получении ошибки и не позволяет даже прочитать информацию из запроса и ответа. С активной настройкой Preserve log не нужно «ловить» строку запроса, она просто остается в истории.
Итого
Мы разобрали на примерах, чем вкладка Network может быть полезна в тестировании, а вот тут рассказывали про 10+ лайфхаков по работе с DevTools.
Чтобы закрепить материал, можно воспользоваться бесплатным тренажёром — иногда задания из него задают прямо на собеседовании!
Ставьте лайк, если нужна статья про остальные вкладки DevTools. И — остаемся на связи <3
UPD: про остальные вкладки рассказали здесь
Эти промты помогут структурировать информацию, ускорить рабочие процессы и сократить время на рутину. Они пригодятся всем, кто проводит рабочие встречи и интервью, работает с текстами или создает контент.
Друзья, у меня тут набралось несколько инструментов для фактчекинга, которыми я хотел бы с вами поделиться. Тема важная и интересная — проверять достоверность информации, которую генерируют нейросети, это сейчас обязательное условие при работе с ними.
Что раздражает больше всего, когда работаешь с огромным объемом информации? Это попытки выловить крупицы полезных данных из десятков статей, видео, книг и документов. Сидишь с кучей вкладок, тратишь часы на сортировку и анализ, мозг уже кипит, а нужный результат — где-то в недосягаемости. Это касается всего: работы, учебы, даже личных проектов.
У вас новый сайт (или приложение, или какой-то другой диджитал-продукт). Вы хотите убедиться, что клиентам он понравится, и вообще, что пользоваться им удобно. Вы заказываете UX-тестирование у сторонней компании, они предлагают правки, вы идете с этими правками в агентство, которое разработало сайт, оно вносит правки и… сайт становится хуже. Как та…
Я помогаю развивать продажи в роли директора по развитию и как бизнес-консультант, и перед стартом нашего сотрудничества слышу одни и те же истории. К примеру, часто мне рассказывают: "Мы наняли крутого руководителя продаж, дали ему полный карт-бланш, но в итоге результатов ноль, хотя резюме и рекомендации были отличными". Удивительно, не правда ли…
Комментарий удалён модератором
Комментарий удалён модератором
Спасибо! Можно на таком же языке про Postman статью?
Да, в бэклоге лежит такая идея :)
Настало время Bruno
спасибо за статейку, а про постман такое будет?
Да, уже в планах 👌