Какие знаешь полезные вкладки в DevTools для тестировщика?

Панель инструментов разработчика (DevTools) для тестирования

Инструменты разработчика в браузерах (Chrome DevTools, Firefox Developer Tools) — это мощный арсенал не только для разработчиков, но и для тестировщиков, особенно для QA Automation Engineer. Они позволяют глубоко анализировать работу веб-приложения, находить причины дефектов, проверять поведение на стороне клиента и собирать данные для автоматизации тестов. Ниже приведены ключевые вкладки, наиболее полезные в практике тестирования.

1. Elements (Инспектор DOM и CSS)

Это, пожалуй, основная вкладка для анализа структуры страницы. Она позволяет:

• Исследовать и модифицировать DOM-дерево в реальном времени. Можно найти любой элемент, проверить его атрибуты (id, class, data-*), что критично для создания локаторов в автоматизированных тестах (Selenium, Playwright).
• Проверять и редактировать CSS стили. Можно отключать правила, изменять значения, чтобы увидеть, как приложение реагирует на разные состояния (например, скрытие элемента).
• Имитировать состояния элементов, такие как :hover, :focus, :active через контекстное меню, чтобы проверить соответствующие стили.

<!-- Пример: исследуя такой элемент, тестировщик может выбрать локатор -->
<div data-testid="login-button" class="btn primary" id="submit">Войти</div>

Для автоматизации наиболее стабильными локаторами часто являются data-testid или комбинации классов.

2. Console (Консоль JavaScript)

Консоль — это командный центр для диагностики.

• Вывод ошибок и логов. Все JavaScript-ошибки, warnings, а также логи, сознательно добавленные разработчиками (console.log, console.error), появляются здесь. Это первое место для поиска причин функциональных сбоев.
• Выполнение произвольного JS кода. Можно вручную проверить доступность функций, переменных, вызвать API приложения. Например, проверить значение глобальной переменной, хранящей состояние.
• Тестирование сетевых запросов. Можно использовать fetch() или XMLHttpRequest для прямого обращения к backend API, минуя UI.

// Пример проверки в консоли: доступность токена авторизации
console.log(window.localStorage.getItem('authToken'));
// или симуляция действия
document.querySelector('#submit').click();

3. Network (Сетевые запросы)

Эта вкладка незаменима для тестирования backend взаимодействия, API и производительности.

• Мониторинг всех HTTP-запросов. Видны методы (GET, POST), URL, статусы ответов (200, 404, 500), заголовки и тела запросов/ответов. Позволяет убедиться, что UI отправляет корректные данные.
• Анализ времени загрузки ресурсов. Можно выявить медленные скрипты, изображения, что важно для тестирования performance.
• Эмуляция сетевых условий. Можно замедлить сеть (Throttling) или полностью отключить (Offline) для проверки поведения приложения в плохих условиях.
• Блокировка или модификация запросов. Можно перехватывать запросы, чтобы проверить, как приложение реагирует на специфические ответы (например, ошибку 500).

4. Sources (Источники/Отладчик)

Вкладка для глубокой отладки клиентского кода.

• Отладка JavaScript с использованием точек останова (breakpoints). Можно шаг за шагом (Step over, Step into) выполнять код, наблюдать значения переменных в реальном времени. Это помогает понять сложные алгоритмы или найти причину бага в логике.
• Просмотр и редактирование исходных файлов (HTML, JS, CSS). В режиме Overrides можно сохранять локальные изменения файлов, которые будут применяться при каждом загрузке страницы, что полезно для экспериментов.
• Анализ загруженных ресурсов. Можно проверить, корректно ли загружаются и применяются все скрипты и стили.

5. Performance (Производительность и Lighthouse)

Современные DevTools (Chrome) объединили инструменты для анализа производительности.

• Запись и анализ производительности рендеринга. Можно записать сессию взаимодействия с приложением и получить детальный отчет о времени выполнения скриптов, рендеринга, событий. Выявляются «длинные задачи» (Long tasks), блокирующие основной поток.
• Инструмент Lighthouse. Позволяет запустить автоматизированный аудит страницы по ключевым метрикам: Performance, Accessibility, Best Practices, SEO, PWA. Генерирует отчет с конкретными предложениями по улучшению. Для тестировщика особенно важны секции Accessibility (проверка доступности для пользователей с ограничениями) и Best Practices.

6. Application (Хранение данных)

Централизованное место для проверки данных, хранимых на клиенте.

• Просмотр Local Storage, Session Storage, Cookies. Можно проверить, какие данные записывает приложение, их формат и срок жизни. Критично для тестов, связанных с авторизацией, персональными данными.
• Очистка хранилищ. Быстрая очистка нужна для подготовки чистого состояния перед тестом.
• Проверка манифеста Web App и Service Workers. Для тестирования PWA (Progressive Web Apps).

7. Mobile Emulation (Эмуляция мобильных устройств)

Не всегда отдельная вкладка, но функции доступны через меню или в Inspector.

• Эмуляция разных размеров экрана и ориентации. Позволяет проверить responsive design без использования реальных устройств.
• Эмуляция типовых устройств (iPhone, iPad, Pixel) с их точными разрешениями и коэффициентами пикселей (device pixel ratio).
• Эмуляция сенсорных событий и ограниченной сети.

Практическое применение в автоматизации

• Создание надежных локаторов: используя Elements, тестировщик анализирует структуру, чтобы выбрать устойчивые селекторы (например, по data-testid).
• Диагностика сложных багов: сочетание Console (логи), Network (запросы) и Sources (отладка) позволяет найти корневую причину проблемы.
• Мониторинг производительности: Performance и Network помогают собирать метрики, которые можно интегрировать в автоматизированные performance tests.
• Тестирование API: вкладка Network служит эталоном для сравнения — что отправляет реальный браузер, с тем, что отправляет ваш автоматизированный скрипт.

Таким образом, грамотное использование DevTools превращает тестировщика из простого наблюдателя UI в глубокого аналитика работы всего веб-приложения, что напрямую повышает качество тестирования и эффективность автоматизации.