DevTools как инструмент тестировщика

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

1. Просмотр информации о элементах и изменение стилей CSS

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

Чтобы воспользоваться функционалом, нужно нажать правой кнопкой мыши на нужный элемент приложения и выбрать “Просмотреть код”. Откроется вкладка Elements (Элементы), которая содержит все элементы DOM-дерева и стили (вкладка Styles). Далее в этой вкладке можно вносить изменения в стиле для нужного элемента.

2. Изменение текста

У элементов можно менять не только стили, но и само содержимое. Это можно использовать в тех случаях, когда нужно посмотреть, что произойдёт, если у одного или нескольких элементов изменится длина названия или объём содержимого. Есть два способа применения этого функционала:

1. через вкладку Elements (Элементы) нужно отредактировать текст содержимого в коде;

   

2. использовать режим редактирования всего документа - для этого во вкладке Console (Консоль) ввести команду document.designMode="on” (чтобы выключить режим используется команда document.designMode="off”). В этом режиме можно редактировать все элементы на странице.

   

3. Вкладка Console (Консоль)

Здесь выводится информации о взаимодействии с JavaScript на странице, в том числе все ошибки в JavaScript-коде. Причём сообщения об ошибках отображаются сразу с указанием строки и документа, вызвавшего ошибку. Это позволяет сразу увидеть фрагмент кода, который нужно исправить. Например Uncaught TypeError указывает на то, что в коде в одной из функций JavaScript есть ошибка и сразу можно увидеть, в каком именно месте.

Так же в консоли можно запускать команды JavaScript.

Кроме того консоль можно отобразить или скрыть в виде отдельной вкладки, находясь на любой другой вкладке и не покидая её, нажнужно нажать клавишу Esc.

4. Отслеживание HTTP-трафика

Мониторить HTTP-трафик страницы во время и после её загрузки можно с помощью вкладки Network (Сеть).

Если открыть эту вкладку и обновить страницу, то можно увидеть все запросы, которые отправляет система, а также просматривать коды ответов, типы запросов, «тяжесть» передаваемых запросов и скорость их обработки и прочее - то есть оценить всю работу страницы сервером.

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

Все запросы можно отфильтровать по типам содержимого:

• All - все типы запросов, то есть запросы не будут отфильтрованы, а отобразятся все;
• XHR - запросы HTTP или HTTPS напрямую к веб-серверу и загружаемые данные от сервера;
• JS - запросы для загрузки файлов JavaScript;
• CSS - запросы для загрузки файлов CSS;
• Img - запросы для загрузки изображений;
• Media - запросы для загрузки медиафайлов;

Отфильтровав запросы по этому типу, можно скачивать любые медиафайлы: видео, музыку. Для этого нужно перейти в запрос, навести курсор, нажать правой кнопкой мыши, выбрать “Open in new tab” и скачать файл в новом окне;

• Font - запросы для загрузки шрифтов;
• Doc - запросы на момент инициализации связи между сервером и клиентом, то есть то, что мы вводим в адресную строку браузера;
• Manifest - запросы для получения манифеста (специального JSON-файла, который содержит дополнительную информацию о приложении для браузера, например, иконку на рабочем столе при установке приложения, полноэкранный режим, ориентация экрана и прочее);
• WS - запросы по веб-сокетам;

💡 WebSocket — протокол связи поверх TCP-соединения, предназначенный для обмена сообщениями между браузером и веб-сервером с использованием постоянного соединения. То есть клиент может инициализировать соединение по WebSocket с сервером один раз и использовать его для обмена данными с сервером, как только появляется какая-то новая информация для передачи, без необходимости повторного подключения к серверу.

• Wasm - запросы для WebAssembly файлов (подробнее что такое WebAssembly - по ссылке);
• Other - прочие запросы, не попавшие ни в один из перечисленных типов.

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

Если нажать на HTTP-запрос можно просмотреть:

1. во вкладке Headers (Заголовки) - детали и общая информацию о запросе: например, URL запроса, заголовки запросов и ответов, метод запроса, код статуса, а также установленные cookies установлены (здесь удобно копировать значение cookie, например, для запуска скриптов или выполнения запросов через Postman);

   

2. во вкладке Payload (Полезная нагрузка) отображаются данные, отправленные в теле HTTP-запроса;
3. во вкладке Preview (Предварительный просмотр) - превью ответа от сервера, например можно увидеть загруженное изображение. Здесь же можно скачать изображение - навести курсор на картинку, щёлкнуть правой кнопкой мыши и выбрать “Copy image as”;
4. во вкладке Response (Ответ) - текстовый ответ от сервера;
5. во вкладке Initiator (Инициатор) - источник запроса ресурса. Например, если JavaScript инициирует загрузку изображения, то можно посмотреть конкретную строку кода JavaScript, вызвавшую запрос, а так же узнать, загрузилась картинка из кэша или с сервера;
6. во вкладке Timing (Время) - время загрузки и передачи данных;
7. во вкладке Cookies (Куки) - используемые cookies;
8. для запросов по веб-сокетам (фильтр WS) есть отдельная вкладка Messages (Сообщения) - здесь отоюраэаются соединения между клиентом и сервером по веб-сокетам и передаваемые асинхронно сообщения.

   

Так же во вкладке Network доступны различные элементы управления:

• Record network log / Stop recording network log- запуск записи выполнения запросов / остановка записи запросов;
• Clear network log - очистка всех ранее отправленных запросов, для того чтобы проще отсматривать текущие запросы;
• Search - поиск опеределённого запроса;
• Preserve log - при включении этой функции на вкладке Console, результаты сохраняются, а не очищаются при каждой загрузке страницы;
• Disable cache - отключение кэширования. Данный алгоритм действий отключает кэширование только тогда, когда открыто окно «Инструменты разработчика»;
• No throttling - использование стандартных (дефолтных) настроек сети. При нажатии на кнопку можно смоделировать условия при работе с медленным интернетом;
• Сохранение или загрузка полного списка запросов и сопутствующей информации в виде HAR-файла - архив содержит все запросы пройденного сценария. Открыть файл можно с помощью текстового редактора.

5. Переотправка запросов

Для запросов XHR без изменения параметров запроса можно быстро продублировать запрос не обновляя при этом всю страницу:

1. нужно навести курсор на запрос
2. кликнуть правой кнопкой мыши
3. нажать “Replay XHR”.

Так же можно менять параметры запроса при повторной отправке:

1. навести курсор на запрос
2. кликнуть правой кнопкой мыши
3. выбрать "Copy"
4. нажать "Copy as fetch"
5. вставить запрос в консоль
6. изменить нужные параметры в запросе, например, данные в теле запроса
7. нажать Enter

6. Моделирование характеристик сети

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

Функция Screenshots (Скриншоты) активирована по умолчанию, поэтому каждое изменение на экране сохраняется в виде отдельного скриншота. С их помощью можно выбрать фрагменты записи и получить подробные сведения о них.

Также на вкладке Performance можно моделировать характеристики сетевого соединения и проверять работу приложения в различных условиях. По умолчанию браузер использует настройки текущего устройства, включая параметры сети и ЦП. Это не мешает проверить работу сайта при медленном ЦП, слабом интернет-соединении или его отсутствии. Моделирование позволяет узнать, как приложение будет работать в реальных условиях.

7. Проверка адаптивной вёрстки

С помощью инструмента Toggle device toolbar можно протестировать отображение интерфейса на разных устройствах и для разных размеров экранов:

• можно выбрать одну из моделей мобильного устройства и интерфейс веб-приложения адаптируется под мобильную версию экрана этой модели;
• можно вручную задать любые размеры экрана и проверить интерфейс с заданными настройками;
• можно изменить значение заряда батареи (заряжен наполовину, низкий заряд, разряжен);
• можно сменить ориентацию устройств (горизонтальная или вертикальная).

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

8. Вкладка Application

Вкладка предназначена для инспектирования и очистки всех загруженных ресурсов, включая базы данных IndexedDB или Web SQL, local и session storage, файлы cookie, кэш приложения, изображения, шрифты и таблицы стилей.

Local storage - локальное хранилище, которое сохраняет данные во время сеансов браузера, то есть данные хранятся в течение неограниченного времени (после закрытия вкладки браузера, самого браузера, перезагрузки компьютера), пока пользователь самостоятельно их не удалит. В отличие от cookies, данные в localStorage не передаются на сервер с каждым запросом и работают даже при отключенных cookie.

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

Session storage - это временное хранилище данных в браузере. Временное — потому что после закрытия вкладки все данные в Session storage автоматически удаляются. При этом перезагрузка вкладки не влияет на данные, главное, чтобы не прервалась сессия — не потерялось интернет-соединение или не поменялась Wi-Fi-точка.

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

IndexedDB - это способ постоянного хранения данных внутри браузера, другими словами это NOSQL хранилище на стороне клиента.

Cookies - здесь можно удалять файлы cookie, изменять их значения и отслеживать влияние таких изменений на работу приложения. Файлы cookie хранятся в браузере и содержат данные, которые можно передавать на сервер через заголовки, то есть сервер обменивается с клиентом данными о сайте, который посещал пользователь. Файлы cookie устанавливаются сервером и могут быть прочитаны только тем сервером, который их установил. Например, часто в таких файлах хранится статистика посещений, логин и пароль от сайтов или сервисов, индивидуальные настройки пользователя (регион, дизайн оформления и прочее).

Cache storage - хранилище кэша, позволяет просматривать данные сохраненные в кэше.

9. Нефункциональное тестирование

Проверку производительности и доступности можно проводить с помощью Lighthouse.

Lighthouse - автоматизированный инструмент для оценки производительности, доступности, SEO и лучших практик как для десктопной так и для мобильной версии приложения. Все оцениваемые показатели собираются в отчет. Для запуска создания отчета нужно на вкладке Lighthouse выбрать необходимые параметры и нажать Analyze page load. После обработки страницы отобразится отчет.

Performance — производительность. Анализирует скорость загрузки сайта. На эту оценку влияет время блокировки, отрисовки стилей, загрузки интерактивных элементов, шрифтов и контента.

Accessibility — доступность. Проверяет, могут ли все пользователи получать доступ к контенту и эффективно перемещаться по сайту. Эта оценка зависит от понятности и воспринимаемости контента (имеют ли текстовые элементы на странице достаточные коэффициенты контрастности), возможности управлять интерфейсом и передвигаться по содержимому без помощи мыши (правильно ли размечена страница для средств чтения с экрана.)

Best Practices — лучшие практики. Проверяет безопасность сайта и использование современных стандартов веб-разработки. Оценка зависит от применения HTTPS, отсутствия устаревших API, правильной кодировки и других параметров.

SEO — оценивает соответствие страницы рекомендациям Google по поисковой оптимизации (подробнее по ссылке). Здесь проверяется использование метатегов, доступ к индексации и переобходу роботами, наличие атрибутов alt у изображений, адаптированность к мобильным экранам и другие характеристики.

PWA (Progressive Web App) — Прогрессивные веб-приложения. Проверяет, регистрирует ли сайт Service Workers, работает ли на слабом соединении, или оффлайн-режиме при необходимости.

💡 Небольшой Devtools-тренажёр для новичков