Автор: Кастури Раджаманиккам (Kasturi Rajamanikkam)
Оригинал статьи
Перевод: Ольга Алифанова

Знаете ли вы, что Chrome DevTools предназначены не только для разработчиков, но и для тестировщиков? Для QA-специалиста важно не просто находить баги — понимание первопричин их появления и умение предложить возможные решения выводит тестирование на новый уровень.

Если вы не пользуетесь Chrome, аналог Chrome DevTools с похожим функционалом можно найти в любом современном браузере, так что вы можете выполнять эти проверки в браузере по своему выбору.

Чтобы максимально эффективно использовать Chrome DevTools, тестировщикам стоит иметь базовые знания HTML, CSS, DOM, JavaScript и уметь читать сетевые ответы.

Что такое Chrome DevTools?

Chrome DevTools — это мощный набор инструментов для инспектирования и отладки веб-сайтов и веб-приложений. Для тестировщиков он предоставляет удобный способ изучать элементы страницы, анализировать логи консоли, отслеживать сетевую активность и оценивать производительность страницы.

Давайте рассмотрим, какие функции Chrome DevTools делают его незаменимым инструментом для тестировщиков, — на примере 10 тестов.

Тест 1: Использование вкладки Elements для устранения проблемы с отступами

Вкладка Elements состоит из двух панелей: HTML и CSS. Щёлкните правой кнопкой по любому элементу и выберите Inspect, или используйте стрелку в левом верхнем углу DevTools, чтобы выбрать элемент, наведя курсор. В правой панели отобразятся соответствующие CSS-стили. Здесь можно изменять HTML и CSS в реальном времени, не внося постоянных изменений в код.

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

Рисунок 1: Проблема с баннером, вызванная пространством между линией и изображением

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

Рисунок 2: Наведение на верхнюю область для выделения свободного пространства

Удаление свойства margin-bottom в CSS устраняет проблему с лишним отступом.

Рисунок 3: Удаление свойства margin-bottom в CSS устранило проблему с лишним отступом

Как видно на трёх скриншотах выше, вы можете навести курсор на пространство, выделить его, проинспектировать и устранить проблему, отрегулировав margin или padding.

Тест 2: Использование Inspect Element для устранения ошибки, мешающей навигации пользователя

На скриншоте ниже интерфейс содержит «точки-карусели» для переключения слайдов. Однако они отображаются лишь частично. Эти точки должны быть полностью видимыми, чтобы пользователь мог легко выбрать любую из них для перехода к следующему слайду.

Область, в которой отображается слайд-шоу, имеет ограничение, скрывающее всё, что выходит за её границы (свойство CSS overflow-hidden). Из-за этого точки на краях слайдера обрезаются, и пользователю трудно их увидеть или использовать.

Рисунок 4: Наполовину скрытые точки карусели в слайдере

Чтобы разобраться в проблеме, просто наведите курсор на содержимое — вы увидите зелёную тень overflow вокруг точек. После выбора элемента справа появятся связанные CSS-стили.

Рисунок 5: Наведение на элемент карусели и просмотр CSS-значения overflow-hidden

Снимите галочку с атрибута overflow-hidden — и вы увидите, что проблема исчезает, при этом положение точек остаётся корректным.

Рисунок 6: Удаление атрибута overflow-hidden для исправления проблемы

Тест 3: Использование вкладки Console для выявления ошибок JavaScript

Вкладка Console — важнейший инструмент для обнаружения ошибок JavaScript: такие ошибки выделяются красным и легко находятся. Возможных типов ошибок сотни, и умение анализировать их приходит только с опытом. Иногда разработчики внедряют дополнительные скрипты, чтобы облегчить поиск специфических проблем.

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

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

Рисунок 7: Идентификаторы некорректных текстовых элементов диаграммы, отображённые в консоли

Тест 4: Анализ ошибок в консоли

На скриншоте ниже по самому сообщению видно, что лог связан с проблемой безопасности в свойствах cookie. Если оставить такую ошибку без внимания, это может привести к проблемам с управлением сессиями, неверным данным аналитики, нестабильному поведению приложения и многому другому. Поэтому если сайт использует куки или политику одного источника (same-origin), эту ошибку необходимо проверить и исправить.

Рисунок 8: Ошибка в Console, связанная с проблемой безопасности в свойствах cookie

Тест 5: Поиск битых ссылок с помощью пользовательского JavaScript в консоли

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

Ниже приведён фрагмент кода, который проверяет наличие битых ссылок. После вызова функции checkBrokenLinks() она найдёт и выведет в консоль все битые ссылки, выделив их красным цветом. Это особенно полезно при тестировании страниц, недоступных из внешних сетей.

// Функция, проверяющая, работает ли ссылка
async function checkBrokenLinks() {
   // Получить все <a>-элементы на странице
   const links = document.querySelectorAll('a');
 
   // Пройти по каждой ссылке
   for (let link of links) {
   const href = link.getAttribute('href');
 
   // Пропускать ссылки с пустыми или несуществующими hrefs
   if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('javascript:')) {
   continue;
   }
 
   try {
      // Запросить ссылку и проверить код статуса ответа
      const response = await fetch(href, { method: 'HEAD' });
 
      // Если код статуса не OK (то есть не 2xx)
      if (!response.ok) {
      console.log(`Broken link found: ${href} (Status: ${response.status})`);
      link.style.color = 'red'; // Опционально подсветить битую ссылку красным
      }
   } catch (error) {
      // Если произошла ошибка (например, сети, или ссылка недоступна)
      console.log(`Broken link found: ${href} (Error: ${error.message})`);
      link.style.color = 'red'; // Highlight broken link
   }
   }
}

Тест 6: Использование вкладки Network для анализа кодов ошибок, вызванных действиями браузера

Вкладка Network фиксирует все запросы, которые выполняются при каждом действии на странице, и показывает важные статус-коды — по ним можно понять, успешно ли прошёл запрос или произошла ошибка.

На скриншоте ниже показан статус-код HTTP 404 для файла favicon.png. Это означает, что файл, на который ведёт запрос, отсутствует. При выборе записи по этому файлу вы увидите дополнительные сведения — заголовки, ответы сервера и прочие данные, которые помогут в диагностике.

HTTP-кодов множество — если вы хотите эффективно использовать вкладку Network, вам стоит разобраться в них подробнее.

Рисунок 9: Код ошибки HTTP 404 для favicon.png

Тест 7: Просмотр данных, передаваемых элементам действия

Во вкладке Network можно также исследовать скрытую информацию. На скриншоте ниже видно телефонный номер и адрес электронной почты, которые пользователь ввёл в поля ввода. Если данные по какой-то причине не были собраны или отправлены, вы сразу увидите, что полей в запросе нет.

Рисунок 10: Телефон и e-mail, связанные с иконками в правом верхнем углу страницы

Тест 8: Проверка офлайн-функциональности без фактического отключения от сети

Вы можете перевести браузер в офлайн-режим прямо во вкладке Network. Для этого выберите No Throttling → Offline.

Эта функция полезна, когда нужно протестировать поведение приложения без доступа к сети, но вы не хотите физически отключать своё устройство от интернета.

Рисунок 11: Выбор режима Offline в списке No Throttling

Тест 9: Использование вкладки Application для изучения потока данных

Во вкладке Application можно глубже исследовать то, что происходит с данными внутри браузера. Там можно делать многое – от очистки кэша до анализа indexDB, где можно взглянуть на связанные с UI-уровнем приложения данные. Однако чтобы правильно интерпретировать данные в этой вкладке, полезно иметь базовое представление о типе используемой базы данных.

На скриншоте ниже показан аутентификационный токен, сохранённый в локальном хранилище приложения. Такие данные могут быть полезны для тестирования - например, при автоматизации функциональности работы с диаграммами.

Рисунок 12: Получение токена аутентификации для выполнения автоматизированных тестов

Тест 10: Извлечение userID для выполнения тестов с данными конкретного пользователя

На следующем скриншоте отображён userID созданного рабочего пространства на вкладке Application. Такая информация полезна, если необходимо провести тестирование, связанное с базой данных или операциями, выполняемыми от имени конкретного пользователя.

Рисунок 13: Получение userID авторизованного пользователя

Заключение

Вкладки Elements, Console, Network и Application особенно полезны для тестировщиков веб-приложений и дают бесценную информацию, позволяя выйти за пределы простого выявления багов. Освоив Chrome DevTools (или аналогичные инструменты в других браузерах), тестировщики могут значительно повысить эффективность своей работы, быстрее находить и диагностировать ошибки, а также помогать команде обеспечивать более стабильный пользовательский опыт.

Дополнительная информация

• One Tab To Rule Them All: The Developer Tools Network Tab, Ioan Solderea
• Five Optimization And Performance Tools That Enhance Website User Experience, Kasturi Rajamanikkam
• Tiny Software Testing Tools, Big Difference In Testing Results, Andrea Jensen
• A Software Tester’s Guide To Chrome Devtools, Viv Richards