Ну что, мой юный падаван автотестировщик, скучал по мне? Сегодня я покажу тебе как использовать DevTools (инструменты разработчика) в любом современном браузере. Для тестировщика это незаменимый инструмент, который позволяет заглянуть под капот веб-приложения, собрать или задать нужные данные. Открыть его можно, нажав на кнопку F12 (или Ctrl+Shift+I, или через Меню - Дополнительные инструменты - Инструменты разработчика, или через контекстное меню - Просмотреть код).
В общем, к делу. Без долгих вступлений пойдём по вкладкам, которые явно могут пригодиться. Описывать будем на примере Google Chrome (английский, да-да, его надо подтягивать).
Вкладка Elements. На ней можно увидеть структуру страницы, которая в данный момент отображается в браузере. Это тот самый HTML, из которого и состоит страница (по-умному, DOM-дерево, объектная модель документа, будешь потом козырять на собесе), только здесь он красиво оформлен с отступами и подсветкой синтаксиса. Заметь, что отступы расставлены таким образом, чтобы показать вложенность элементов. Стрелочки видишь? Можно раскрывать элементы и проваливаться всё ниже и ниже. Если выберешь какой-нибудь элемент справа отобразятся стили (тот самый CSS). Стили (да и HTML-разметка, честно сказать) для нас не так важны: главное, чтоб всё отображалось в соответствии с требованиями, а качество кода пусть оценивают коллеги того косорукого разраба.
Можно нажать на кнопку со стрелочкой в левом верхнем углу и подвигать курсор по странице. Так можно выбрать какой-то конкретный элемент визуально, мышкой, чтоб сразу поставить на него фокус на вкладке Elements.
Установив фокус на какой-нибудь элемент внутри вкладки Elements, можно использовать поиск по элементам нажав Ctrl+F. В поле можно вставить всё что угодно, в том числе и селекторы/локаторы, которые конечно же пригодятся тебе при написании автотестов (потом поговорим о них, пока просто для информации).
Вкладка Console. На этой вкладке отображаются ошибки/предупреждения/отладочная информация. В ней можно выполнить и какой-нибудь JavaScript-код. В процессе работы над своей задачей старайся обращать внимание на ошибки, которые появляются в консоли. Конечно, не все ошибки заслуживают внимания. Допустим, фронт, как уже говорилось ранее, может обмениваться данными с бэком. И, допустим, при первом переходе на страницу будет отправляться HTTP-запрос на ручку, которая проверяет, авторизован ли пользователь в системе или нет. Если пользователь авторизован, то возвращается код 200 и страница рисуется для авторизованного пользователя. Если же нет, сервис возвращает ошибку 401, страница рисуется для неавторизованного пользователя, а в консоль попадает ошибка с информацией о том, что конкретный запрос на конкретную ручку вернул ошибку 401. Это нормальная ситуация, и, если фронт корректно обрабатывает эту ошибку, то с этим ничего делать не нужно.