Бесплатный тренажёр DevTools для тестировщиков

О тренажёре

Тренажёр по DevTools — инструментам браузера для исследования разметки и стилей, JavaScript-ошибок, запросов к серверу и данных, которые сайт сохраняет в браузере.

Здесь можно потренироваться работать с Network, Elements, Console и Application, читать запросы и ответы сервера, проверять cookie и local storage и находить информацию, которая помогает локализовать баг.

Тренажёр состоит из трёх частей:

  1. Теория — короткие материалы по основным возможностям DevTools.
  2. Вопросы по теории — проверка того, что было разобрано в материалах.
  3. Практические задания — задачи, которые нужно решать уже с открытым DevTools.

Тренажёр — часть профессиональной программы обучения QA-инженеров Tallinn Learning, в которую входит полный курс ручного тестирования.

Кому подойдёт

Тренажёр рассчитан на тех, кто изучает ручное тестирование, готовится к собеседованию на позицию junior QA-инженера или уже тестирует веб-приложения, но пока неуверенно пользуется DevTools.

Если вы раньше не работали с DevTools, начните с теории и проходите задания по порядку.

Если основы уже знакомы, можно сразу перейти к вопросам или практическим задачам.

Теория

В начале тренажёра находятся короткие материалы по основам DevTools. Здесь разобрано:

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

Вопросы по теории

После материалов идут вопросы для самопроверки.

В большинстве заданий нужно определить, верно ли утверждение, и выбрать «Верно» или «Неверно».

Есть и вопросы по HTTP-статусам: даётся ситуация, а из списка нужно выбрать подходящий код ответа.

После ответа показывается пояснение. Если ответ был неправильным, можно сразу посмотреть правильный вариант и разобраться почему.

Для этой части открывать DevTools не нужно.

Практические задания

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

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

В зависимости от задания придётся посмотреть:

  • отправился ли запрос;
  • что браузер отправил на сервер;
  • какой статус вернулся;
  • что пришло в теле ответа;
  • появились ли ошибки в Console;
  • какие данные записались в cookie или local storage;
  • что происходит с элементом страницы.

Это уже не вопросы на знание теории: ответ нужно найти самостоятельно в DevTools.

Как выполнять практическое задание

  1. Выберите задание из списка.
  2. Прочитайте, что требуется проверить.
  3. Откройте DevTools.
  4. Выполните действие из задания.
  5. Посмотрите результат в нужной вкладке DevTools.
  6. Сравните его с тем, что ожидалось.
  7. Ответьте «Верно», если приложение работает так, как описано, или «Неверно», если нашли расхождение.

Если работаете с Network, откройте DevTools до выполнения действия. Иначе нужный запрос может не попасть в список.

В некоторых заданиях есть форма. Поле ввода уже заполнено случайным значением — его можно оставить или заменить своим.

После ответа тренажёр покажет фактический результат и объяснение. Задание можно запустить заново кнопкой «Ещё раз» или перейти к следующему.

Чему вы научитесь

В реальной работе тестировщику часто недостаточно увидеть, что «что-то не работает».

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

После открытия страницы запрос /orders возвращает 500.

Или:

Запрос возвращает 200, и данные есть в ответе сервера, но на странице они не отображаются.

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

Обратите внимание

Случайно выбирается не условие задания, а поведение приложения: перед каждым запуском задание решает, сработает ли оно ровно так, как описано, или с дефектом.

Одно и то же задание может отработать корректно при первом запуске, а после нажатия «Ещё раз» уже содержать дефект. Поэтому не запоминайте ответ — каждый раз проверяйте результат через DevTools.

Начать учиться бесплатно