Для чего тестировщику нужна панель разработчика браузера
Тренер курса «Погружение в тестирование. Jedi Point» Александр Астапченко расскажет как точно локализовать ошибки при тестировании веб-сайтов и сэкономить при этом время.
Панель (консоль) разработчика браузера нужна не только им самим, как многие думают – она может пригодиться и в тестировании веб-сайтов.
Данная статья предназначена для тех, кто хочет разобраться в эффективных методах тестирования, поэтому будем рассматривать вкладки, которые однозначно пригодятся тестировщикам.
Итак, начнем. Чтобы зайти в панель разработчика, необходимо открыть тестируемый веб-сайт и нажать на кнопку F12, после чего перед нами открывается следующая картина:
Начнем мы со вкладки “Elements”.
В моей практике был следующий случай: мне необходимо было протестировать страницу веб-сайта. В техническом задании был указан цвет кнопки (в кодировке). Именно для таких проверок вкладка “Elements” просто необходима как воздух.
Как же нам убедиться, что цвет кнопки именно такой, который указан в ТЗ :
- Открываем панель, нажав клавишу F12,
- Кликаем по кнопке выбора элемента (указана стрелкой на скрине),
- Наводим курсор на нужный элемент и смотрим параметр “Color”.
Следующая вкладка которая нам может пригодиться, называется “Network”.
В моей практике был случай: я проходил негативный сценарий оформления заказа. При нажатии на кнопку “оформить заказ” ничего не происходило. Никаких ошибок на фронте (то есть видимой для пользователя части сайта) не отображалось. И вот тут-то помогла данная вкладка. Повторно проходя данный кейс с открытой консолью, был обнаружен запрос с ошибкой 401. Система отработала верно, но ошибка должна была отображаться и конечным пользователям.
Не стоит забывать и про адаптив, так как сейчас активно серфят интернет и через мобильные девайсы. Крайне важно убедиться, что не будет проблем с версткой при просмотре сайта через мобильное устройство/планшет. В таких ситуациях нам поможет “Toggle device bar”.
Итак, открываем консоль и кликаем на кнопку “Toggle device bar”.
Мы можем указывать вручную нужное разрешение или воспользоваться списком девайсов, которые уже есть в Google Chrome.
Также мы можем сами добавлять новые устройства в список, для этого необходимо нажать на кнопку “Edit”:
Для добавления необходимо установить чекбокс на нужное устройство, кроме того можно и создать устройство:
- Открываем консоль разработчика,
- Переходим в настройки, кликнув по шестеренке,
- Переходим во вкладку “Devices”,
- Нажимаем на “Add custom device”,
- Задаем имя устройства и нужное нам разрешение,
- Нажимаем на кнопку Add.
Созданный девайс отображается в выпадающем списке.
Ну что ж, я думаю у вас не осталось сомнений, что использование консоли намного эффективнее в решении этих задач. Это заметно экономит нам время и дает возможность точно локализовать ошибки.
Если вы хотите больше узнать о тестировании, приобрести знания и навыки, необходимые для работы джуниор-тестировщиком, записывайтесь на курс “«Погружение в тестирование. Jedi Point», а по промокоду jedi вам будет предоставлена скидка 10%.
И обязательно скачайте чек-лист “Что должен знать и уметь джуниор-тестировщик”, заполнив небольшую анкету.
