Вопросы на собеседовании QA по DevTools
Собеседование на позицию junior QA почти всегда включает вопросы по DevTools: как найти причину бага, что показывает вкладка Network, чем cookie отличается от local storage. Ниже собраны вопросы по восьми темам тренажёра — с ответами и ссылкой на материал, где тема разобрана подробно. Попробуйте ответить сами, прежде чем открывать ответ: так сразу видно, что стоит повторить.
Внутри каждой темы вопросы разделены по уровням: junior — начальный уровень знаний, middle — более продвинутый.
Содержание страницы
Основы DevTools и чем они помогают
На собеседовании важно не перечислить все вкладки DevTools, а объяснить, как с их помощью исследовать проблему. Попробуйте ответить сами, прежде чем открыть ответ.
juniorначальный уровень знаний
1. Что такое DevTools и для чего они нужны QA-инженеру?
DevTools — встроенные в браузер инструменты разработчика. Они помогают посмотреть разметку и стили страницы, ошибки JavaScript, запросы к серверу и данные в браузере. QA использует их, чтобы собрать факты о дефекте и понять, на каком участке системы он возникает.
2. Кнопка не реагирует на клик. С чего начать проверку?
Открыть DevTools до повторения действия. Сначала посмотреть Console: там может появиться JavaScript-ошибка. Затем проверить Network: был ли отправлен запрос и что вернул сервер.
3. На странице нет списка данных. Что можно узнать во вкладке Network?
Был ли запрос за данными, на какой адрес он ушёл, каким методом, какой статус и тело ответа вернул сервер. Если запрос не появился, проблема может быть на клиенте; если сервер вернул ошибку или неверные данные, искать нужно раньше отображения списка.
4. Что такое локализация бага?
Это выяснение, в какой части системы возникает проблема: в интерфейсе, JavaScript, запросе или на сервере. Необязательно находить точную причину, но полезно приложить наблюдения: например, ошибку из Console, статус запроса и ответ сервера.
middleболее продвинутый уровень
5. Почему DevTools нужно открыть до воспроизведения проблемы?
Вкладка Network записывает запросы с момента открытия DevTools. Если открыть её после загрузки страницы или клика, нужный запрос уже может не попасть в список. Поэтому DevTools открывают заранее, затем повторяют действие.
6. Сайт забывает выбранный язык после перезагрузки. В какой вкладке искать причину?
В Application: там видно, что сайт сохранил в браузере. Проверяют, записалось ли выбранное значение в cookie или в хранилище и переживает ли оно перезагрузку. Вкладку вообще выбирают по симптому: не загрузились данные — Network, по клику ничего не происходит — Console, элемент выглядит не как в макете — Elements.
Тема разобрана в статье Что такое DevTools.
Запросы, ответы и коды статусов
На собеседовании обычно просят не заученные определения, а рассуждение по конкретному запросу. Попробуйте ответить сами, прежде чем открыть ответ.
junior
1. Из чего состоит HTTP-запрос?
В запросе есть метод, URL, заголовки и при необходимости тело. Например, POST-запрос может отправить JSON в теле, а в заголовке передать тип содержимого и токен авторизации.
2. Чем отличаются коды ответа 401 и 403?
401 Unauthorized означает, что пользователь не аутентифицирован: например, не вошёл в систему или его токен недействителен. 403 Forbidden означает, что пользователь определён, но у него нет прав на это действие.
3. О чём обычно говорят статусы 4xx и 5xx?
4xx обычно указывает на проблему в запросе: неверные данные, отсутствие авторизации или прав, несуществующий адрес. 5xx означает, что сервер не смог корректно обработать запрос. Это ориентир для локализации, а не окончательный диагноз.
4. Чем отличаются GET и POST?
GET запрашивает данные и не должен их изменять: параметры уходят в адресе, тела у запроса обычно нет, ссылку можно сохранить в закладки или переслать. POST отправляет данные на сервер в теле запроса — обычно чтобы что-то создать, и повторная отправка обычно создаёт ещё одну запись.
5. Чем отличаются PUT и PATCH?
PUT заменяет ресурс целиком: в теле передаётся полный набор полей, и то, чего в нём нет, ресурс теряет. PATCH меняет только переданные поля — например, тело {"price": 79.99} изменит цену товара и не тронет остальное.
middle
6. Достаточно ли статуса 200, чтобы считать ответ правильным?
Нет. 200 OK подтверждает успешную обработку HTTP-запроса, но в Response могут прийти пустые, устаревшие или чужие данные, а также логическая ошибка внутри тела ответа. Нужно сверить тело ответа с ожидаемым результатом.
7. На странице нет заказов, хотя запрос вернул 200. Как искать проблему?
Открыть тело ответа. Если там правильный список заказов, проблема, вероятно, в обработке или отображении данных фронтендом. Если список уже пустой или неверный, дефект возник до рендеринга — в данных, запросе или на сервере.
8. Пользователь дважды нажал «Оформить заказ» и получил два заказа. Что покажет вкладка Network?
Два одинаковых POST-запроса, оба со статусом 2xx: сервер добросовестно создал две записи. Повторный POST так и должен работать — в отличие от PUT и DELETE, где повтор оставляет систему в прежнем состоянии. Значит, дело не в самом запросе: нет защиты от повторной отправки — ни блокировки кнопки, ни проверки на стороне сервера. К отчёту прикладывают оба запроса и оба ответа.
Тема разобрана в статье Клиент-серверное взаимодействие.
Вкладка Network
Эта группа проверяет, умеете ли вы по списку запросов определить, на чьей стороне дефект, и собрать данные для отчёта. Попробуйте ответить сами, прежде чем открыть ответ.
junior
1. Зачем нужен переключатель Preserve log?
Он сохраняет список запросов при перезагрузках и переходах. Без него запрос, вызвавший переход, — например, отправка формы с редиректом — удаляется вместе с предыдущей страницей, а обычно именно он и нужен.
2. Что приложить к баг-репорту из вкладки Network?
Код статуса, тело запроса и тело ответа — три элемента, которые делают отчёт воспроизводимым. Сам запрос удобнее всего скопировать правым кликом → Copy → Copy as cURL: получится точный отправленный запрос, его можно повторить из терминала.
3. Что можно посмотреть внутри одного запроса?
Запрос раскрывается по клику, внутри — несколько вкладок:
- Headers — метод, полный URL, код статуса и заголовки: что отправил браузер и что вернул сервер.
- Payload — тело запроса и параметры адреса.
- Response — ответ в исходном виде, Preview — он же отформатированный, что удобнее для JSON.
- Timing — распределение времени по этапам запроса, нужно при разборе медленных ответов.
middle
4. Как по вкладке Network понять, на чьей стороне дефект?
Сравнить тело ответа с тем, что показывает страница. Если сервер вернул правильные данные, а на экране их нет или они искажены, дефект на фронтенде. Если данные уже неверны в самом ответе, искать нужно раньше: в запросе, который отправила страница, или на сервере.
5. Что означает красная строка без кода статуса?
Что ответ не получен вообще. Причина указана в самой строке:
- (failed) — нет соединения, не разрешилось имя хоста или сервер не запущен.
- CORS error — ответ пришёл, но браузер не отдал его странице: неверно настроены заголовки разрешений.
- (blocked:…) — запрос остановили расширение, блокировщик рекламы или политика безопасности страницы.
- (canceled) — запрос прервали, обычно из-за перехода на другую страницу. Чаще всего это не дефект.
6. Как убедиться, что вы тестируете актуальную версию, а не кэш?
Включить Disable cache при открытых DevTools или выполнить жёсткую перезагрузку. В колонке Size у ответа из кэша вместо размера стоит from disk cache или from memory cache — признак, что файл не запрашивался у сервера.
Тема разобрана в статье Вкладка Network.
Elements и вёрстка
На собеседовании по Elements обычно проверяют, умеете ли вы прочитать разметку и использовать её для проверки интерфейса. Попробуйте ответить сами, прежде чем открыть ответ.
junior
1. Как быстро найти элемент на странице и в разметке?
Нажать ctrl shift c / cmd shift c и кликнуть по элементу на странице: DevTools выделит его в Elements. Внутри дерева поиск открывается сочетанием ctrl f / cmd f; искать можно текстом, CSS-селектором или XPath.
2. Можно ли исправить текст или CSS во вкладке Elements?
Да, но только локально в своём браузере: можно изменить текст, CSS-свойство или удалить элемент, чтобы проверить гипотезу. Эти изменения не уходят на сервер, не видны другим пользователям и пропадают после перезагрузки страницы.
3. Как проверить адаптивную вёрстку через DevTools?
Открыть device toolbar сочетанием ctrl shift m / cmd shift m и проверить страницу на разных ширинах, особенно возле брейкпоинтов. Нужно убедиться, что элементы не выходят за экран, остаются доступными, колонки перестраиваются ожидаемо и нет горизонтальной прокрутки.
middle
4. Чем DOM во вкладке Elements отличается от исходного HTML?
Elements показывает текущее DOM-дерево после того, как браузер построил страницу и JavaScript мог её изменить. Исходный HTML — документ, который пришёл с сервера. Если данные есть в DOM, но нет в исходном HTML, их добавил скрипт.
5. Почему кнопка в виде div может быть дефектом?
Стилизованный <div> может выглядеть как кнопка, но не получает стандартную семантику, фокус и управление с клавиатуры. Для действия нужен <button>, либо разработчик должен отдельно реализовать все недостающие свойства.
Тема разобрана в статье Вкладка Elements.
Console и ошибки JavaScript
Здесь проверяют, умеете ли вы прочитать ошибку и отличить дефект страницы от постороннего шума. Попробуйте ответить сами, прежде чем открыть ответ.
junior
1. Что означают красные и жёлтые строки в Console?
Красные — ошибки: выполнение прервано, и на странице это обычно выглядит как неработающий элемент. Жёлтые — предупреждения, сами по себе они редко нарушают работу. Остальное — сообщения, которые страница выводит сама через console.log.
2. Что взять из ошибки для баг-репорта?
Тип и текст ошибки, например TypeError: Cannot read properties of undefined, файл и номер строки справа, а также первую строку стека вызовов — он разворачивается по клику на записи.
3. Как оставить в Console только ошибки и не потерять их при переходе?
Селектор уровня ограничивает вывод категорией Errors, соседнее поле фильтрует по подстроке. Чтобы записи не пропали, включают Preserve log: без него ошибка очищается вместе с предыдущей страницей — а это как раз тот случай, когда дефект связан с отправкой формы или перенаправлением.
middle
4. Кнопка не работает, и в Console есть ошибка. Значит ли это, что дефект найден?
Ошибка — факт для отчёта, но ещё не причина. Сначала нужно убедиться, что она относится именно к этому действию: очистить консоль, повторить действие и посмотреть, что записалось. Затем проверить Network — ушёл ли запрос и что вернул сервер.
5. Почему не всякая ошибка в Console относится к сайту?
Расширения браузера, скрипты аналитики и блокировщики рекламы пишут свои ошибки в ту же консоль. До оформления дефекта случай повторяют в окне инкогнито с отключёнными расширениями.
6. Console пустая, а на экране неверные данные. О чём это говорит?
О том, что страница не завершилась ошибкой: код отработал. Значит, дело скорее в данных, и разбор переходит во вкладку Network, к телу ответа.
Тема разобрана в статье Вкладка Console.
Application: cookie, хранилища и кэш
Эта группа про данные, которые остаются в браузере между перезагрузками, и про случаи, когда они мешают проверке. Попробуйте ответить сами, прежде чем открыть ответ.
junior
1. Чем cookie отличается от local storage и session storage?
Cookie браузер сам прикладывает к каждому запросу к сайту, поэтому по ней сервер узнаёт сессию. Local storage и session storage автоматически не отправляются: страница должна явно включить значение в запрос. Между самими хранилищами разница во времени жизни — local storage переживает закрытие браузера, session storage очищается при закрытии вкладки.
2. Как проверить, что баннер о cookie показывается при первом визите на страницу?
Привести браузер в состояние нового посетителя: Application → Clear site data либо открыть страницу в окне инкогнито. При первом открытии баннер должен появиться.
Дальше проверяется, что он появляется именно один раз: после «Принять» сайт сохраняет cookie — например cookie_consent=accepted, её видно в таблице Cookies, — и при следующем открытии страницы читает это значение и баннер уже не показывает. Если снова очистить данные сайта, баннер должен вернуться.
3. Исправление выкачено, но страница ведёт себя по-старому. Что проверить до оформления дефекта?
Кэш. Обычная перезагрузка может вернуть прежний скрипт или стиль, поэтому нужна жёсткая перезагрузка — ctrl shift r / cmd shift r — и проверка во вкладке Network: если в колонке Size стоит from disk cache, файл взят из кэша, а не с сервера.
middle
4. Что означают флаги HttpOnly и Secure у cookie?
HttpOnly — cookie недоступна скриптам на странице, это защищает значение от кражи через JavaScript. Secure — cookie передаётся только по HTTPS. Оба флага видны в таблице Cookies во вкладке Application.
5. Пользователей разлогинивает раньше срока. Что смотреть в Application?
Колонку Expires / Max-Age у cookie сессии: в ней дата истечения или время жизни, заданные сервером, — их сравнивают с требуемым сроком. Если срока нет, cookie сессионная и удаляется при закрытии браузера.
Тема разобрана в статье Вкладка Application.
Lighthouse и автоматические проверки
Вопросы о том, что показывает автоматический аудит и что остаётся за ручной проверкой. Попробуйте ответить сами, прежде чем открыть ответ.
junior
1. Что показывает Lighthouse?
Автоматический аудит текущей страницы по четырём категориям: Performance, Accessibility, Best Practices и SEO. Это отправная точка для разбора, а не приговор о качестве: результаты разных прогонов расходятся, поэтому динамика говорит больше, чем одно число.
2. Почему аудит запускают в окне инкогнито с отключёнными расширениями?
Скрипты расширений выполняются на той же странице и попадают в измерения, искажая оценку производительности и часть проверок. В инкогнито расширения по умолчанию отключены, поэтому прогоны остаются сопоставимыми.
3. Как запустить аудит Lighthouse?
Во вкладке Lighthouse выбирают режим (Navigation — для загрузки страницы), устройство (Mobile или Desktop) и набор категорий, затем запускают анализ. Отчёт собирается по текущей странице, поэтому открыть нужно именно тот адрес, который проверяется.
middle
4. Оценка Accessibility 100 — значит ли это, что страница доступна?
Нет. Категория автоматически проверяет лишь часть требований: контраст цветов, атрибуты alt, названия полей форм, порядок заголовков, корректность ARIA. Навигацию с клавиатуры, работу со скринридером, порядок фокуса и осмысленность альтернативного текста проверяют вручную.
5. Какой стандарт стоит за проверками веб-доступности?
WCAG — рекомендации по веб-доступности, публикуемые W3C; уровень AA обычно и записывают в требования. В Европейском союзе требования к ряду цифровых продуктов и услуг задаёт European Accessibility Act, применяемый с 28 июня 2025 года; соответствующий технический стандарт — EN 301 549.
Тема разобрана в статье Вкладка Lighthouse.
Веб-доступность
На собеседовании на junior QA обычно спрашивают не детали стандарта, а понимаете ли вы базовые принципы и умеете ли проверить их руками. Попробуйте ответить сами, прежде чем открыть ответ.
junior
1. Что такое веб-доступность?
Это возможность пользоваться сайтом людям с разными ограничениями: например, незрячим пользователям со скринридером, слабовидящим, тем, кто не может пользоваться мышью и работает только с клавиатуры.
2. Что такое WCAG?
Web Content Accessibility Guidelines — рекомендации по доступности веб-контента. В них описаны критерии, по которым можно проверить сайт, и три уровня соответствия:
- A — базовый;
- AA — основной уровень, который чаще всего используют как требование;
- AAA — самый строгий.
3. Как проверить веб-доступность сайта с клавиатуры?
Убрать мышь и пройти страницу с помощью Tab и Shift + Tab, проверив:
- можно ли добраться до всех кнопок, ссылок и полей;
- логичный ли порядок перехода;
- видно ли текущий фокус;
- можно ли активировать элементы клавишами Enter или Space.
4. Для чего нужен alt у изображения?
В нём хранится альтернативный текст изображения, который может прочитать скринридер.
<img src="logo.png" alt="Логотип Tallinn Learning"> — картинка несёт информацию.
<img src="decoration.png" alt=""> — картинка декоративная: пустой alt скрывает её от скринридера.
Проверять нужно не только наличие alt, но и то, передаёт ли его текст смысл изображения.
middle
5. Что такое ARIA и зачем она нужна?
Это роли и атрибуты, которые помогают вспомогательным технологиям понять назначение и состояние элементов интерфейса.
<div role="button">Buy</div> — роль сообщает, что элемент нужно воспринимать как кнопку.
<button>Buy</button> — обычная кнопка: семантика и работа с клавиатуры у неё уже есть.
ARIA не заменяет правильный HTML: если подходит обычный <button>, лучше использовать его.
6. Текст на странице светло-серый на белом фоне. Это дефект?
Это проверяемое требование, а не вкусовщина: критерий 1.4.3 Contrast (Minimum) уровня AA требует не меньше 4.5:1 для обычного текста и 3:1 для крупного.
Как проверить: правый клик по тексту → Inspect, затем клик по квадратику перед значением color в панели Styles — в палитре указано Contrast ratio и отмечено, проходит ли он AA. Тот же дефект находит Lighthouse в категории Accessibility. Если значение ниже порога, это обычный дефект: он воспроизводим, и в отчёте можно сослаться на критерий.
Тема разобрана в статье Веб-доступность.