Робот-человек
Nikola всё
Uber для охраны
iPhone 16e
Смартфон Huawei с 3 экранами
Аниме: Улицы разбитых фонарей
Рикша Hyundai

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

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

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

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

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

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

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

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

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

Задача 1. Не получается зарегистрироваться, но сообщения об ошибке нет.

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

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

При сортировке по статусам-кодам можно увидеть все ошибки страницы вверху списка
При сортировке по статусам-кодам можно увидеть все ошибки страницы вверху списка

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

С фильтром Fetch/XHR видим только запросы, отправленные непосредственно на сервер 
С фильтром 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: про остальные вкладки рассказали здесь

4141
11
реклама
разместить
13 комментариев

Комментарий удалён модератором

Комментарий удалён модератором

Спасибо! Можно на таком же языке про Postman статью?

2

Да, в бэклоге лежит такая идея :)

2

Настало время Bruno

спасибо за статейку, а про постман такое будет?

2

Да, уже в планах 👌

1
Раскрывать всегда
7 полезных промптов для нейросетей, которые прокачают вашу работу с текстами
7 полезных промптов для нейросетей, которые прокачают вашу работу с текстами

Эти промты помогут структурировать информацию, ускорить рабочие процессы и сократить время на рутину. Они пригодятся всем, кто проводит рабочие встречи и интервью, работает с текстами или создает контент.

22
реклама
разместить
Нейросети против фейков: проверяем факты при генерации статей, чтобы жареный петух не клюнул в попу

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

88
Контент-конвейер: «Ваша секретная стратегия успеха в Instagram и TikTok»
Контент-конвейер: «Ваша секретная стратегия успеха в Instagram и TikTok»
11
NotebookLM: обзор + 40 способов применить нейросеть, чтобы работать быстрее
NotebookLM: обзор + 40 способов применить нейросеть, чтобы работать быстрее

Что раздражает больше всего, когда работаешь с огромным объемом информации? Это попытки выловить крупицы полезных данных из десятков статей, видео, книг и документов. Сидишь с кучей вкладок, тратишь часы на сортировку и анализ, мозг уже кипит, а нужный результат — где-то в недосягаемости. Это касается всего: работы, учебы, даже личных проектов.

55
Правила, чтобы нарушать. Когда UX-стандарты мешают юзабилити сайта
Правила, чтобы нарушать. Когда UX-стандарты мешают юзабилити сайта

У вас новый сайт (или приложение, или какой-то другой диджитал-продукт). Вы хотите убедиться, что клиентам он понравится, и вообще, что пользоваться им удобно. Вы заказываете UX-тестирование у сторонней компании, они предлагают правки, вы идете с этими правками в агентство, которое разработало сайт, оно вносит правки и… сайт становится хуже. Как та…

33
11
Как настроить аналитику для площадок, которые не дают настраивать аналитику. Гайд по настройке аналитики за 10 минут.
Как настроить аналитику для площадок, которые не дают настраивать аналитику. Гайд по настройке аналитики за 10 минут.
1212
33
Безопасный ИТ-код: что мы понимаем под защищенной автоматизацией

Исполнительный директор ALP Group Александр Казеннов объясняет, как гарантировать информационную безопасность бизнеса, закрыть все уязвимости и не пасть жертвой хактивистов.

Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D-bBHT158E0s&postId=1824080" rel="nofollow noreferrer noopener" target="_blank">Sherlock</a>, YouTube
11
Документы со встроенной YandexGPT. Продвижение сайтов по информационным запросам. Поиск технического мусора. Вкладки в Google выдаче.
Документы со встроенной YandexGPT. Продвижение сайтов по информационным запросам. Поиск технического мусора. Вкладки в Google выдаче.
1010
[]