Ответ
При ручном и автоматизированном веб-тестировании я регулярно работаю со следующими вкладками Chrome DevTools:
1. Elements (Инспектор)
- Для чего: Поиск и проверка CSS-селекторов, XPath
- Пример использования: При создании локаторов для автотестов проверяю уникальность селектора:
/* Вместо нестабильного: */ div.button /* Использую: */ button[data-testid="submit-btn"]
2. Console (Консоль)
- Для чего: Выполнение JavaScript для проверки работы скриптов, проверка переменных
- Пример: Проверка наличия ошибок в консоли после действий пользователя
3. Network (Сеть)
- Для чего: Анализ HTTP-запросов, проверка статусов, заголовков, времени ответа
- Как использую:
- Фильтрую по типу запросов (XHR/JS/CSS)
- Проверяю статус-коды ответов (200, 404, 500)
- Анализирую время загрузки ресурсов
- Мокирую ответы через "Override" для тестирования edge-cases
4. Application (Приложение)
- Для чего: Работа с хранилищами (LocalStorage, SessionStorage, Cookies)
- Пример: Очистка данных авторизации перед тестом:
// В консоли: localStorage.clear(); sessionStorage.clear();
5. Performance (Производительность)
- Для чего: Запись и анализ метрик загрузки страницы
- Что проверяю: First Contentful Paint, Time to Interactive, выявление долгих задач
6. Lighthouse
- Для чего: Автоматический аудит производительности, доступности, SEO
- Использую: Для регрессионного тестирования показателей скорости
7. Mobile Emulation (Эмуляция мобильных устройств)
- Для чего: Тестирование адаптивного дизайна на разных разрешениях
В автоматизации использую Chrome DevTools Protocol (CDP) через Selenium для:
- Перехвата сетевых запросов
- Эмуляции геолокации
- Установки cookies
