Для чего тестировщику нужна панель разработчика браузера

Тренер курса «Погружение в тестирование. 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%.

И обязательно скачайте чек-лист “Что должен знать и уметь джуниор-тестировщик”, заполнив небольшую анкету.