Chrome – самый популярный браузер в мире, почти две трети пользователей предпочитают его другим браузерам 🌎 Помимо того, что это самый используемый браузер, он является отличным помощником для нас, тестировщиков. Если вы занимаетесь веб-тестированием, то наверняка используете несколько браузеров для кросс-браузерных тестов. Но вы можете делать больше, чем просто запускать приложение в браузере. С помощью Chrome Developer Tools можно получить дополнительную информацию о работе приложения или даже изменить его поведение.
В этой статье мы обсудим, как инструменты разработчика в браузере Chrome могут помочь тестировщикам в более эффективной и качественной работе.
Друзья, поддержите нас вступлением в наш телеграм канал QaRocks. Там много туториалов, задач по автоматизации и книг по QA.
Содержание:
- Доступ к инструментам разработчика
- Вкладка Элементы
- Мониторинг HTTP-запросов на вкладке Сеть
- Симуляция производительности сети с помощью Developer Tools
- Эмуляция устройств
- Работа с файлами cookie
- Захват скриншотов из Chrome Developer Tools
- Помощь в тестировании локализации
- Заключение
Доступ к инструментам разработчика
Инструменты разработчика – это панель, открывающаяся в окне Chrome и предоставляющая различную информацию о текущей вкладке. Чтобы открыть ее, можно перейти в меню Настройка и управление Google Chrome и выбрать пункт Дополнительные инструменты -> Инструменты разработчика.
Другой способ – комбинация клавиш Ctrl+Shift+I или клавиша F12. В результате панель DevTools будет прикреплена к открытой вкладке, и вы можете выбрать, где ее разместить, или открыть как отдельное окно.
Вкладка Элементы
Эта вкладка позволяет просматривать информацию о веб-элементах на странице. Она особенно полезна при автоматизированном тестировании, поскольку позволяет определить наилучшие локаторы для веб-элементов.
Получить XPath или CSS-селектор элемента из DevTools можно, щелкнув правой кнопкой мыши по элементу на вкладке Elements и выбрав Copy -> Copy XPath или Copy -> Copy Selector. Для поиска определенных элементов можно также использовать функцию поиска (Ctrl+F).
Поиск не ограничивается простым текстом и позволяет фильтровать элементы даже с использованием сложных CSS-селекторов или XPath-запросов, при этом одновременно выводится количество найденных совпадений. Это может быть полезным для проверки правильности работы локатора, который идентифицирует нужные элементы на веб-странице, а также для определения количества элементов, соответствующих определенному локатору.
Этот CSS-селектор соответствует 9 элементам в DOM (Document Object Model).
Мониторинг HTTP-запросов на вкладке Network
На вкладке Network инструментов разработчика отображается информация обо всех HTTP-запросах. Здесь можно увидеть заголовки, тело запроса, код и тело ответа, и даже время ответа. Их можно просмотреть, чтобы убедиться, что клиент посылает правильные запросы, а сервер возвращает правильный ответ.
URL и тело запроса можно даже скопировать для последующего тестирования API с помощью таких инструментов, как Postman. Также можно проверить, нет ли лишних запросов, которые отправляются при загрузке страницы, или, если страница работает медленно, определить, какие запросы влияют на производительность.
Для этого на вкладке Network нажмите кнопку Record. Затем выполните какие-либо действия в приложении. На вкладке Network будут отображены все отправленные запросы:
Вы можете щелкнуть на каждый запрос, чтобы увидеть его детали:
- URL запроса
- заголовки запроса и ответа
- метод запроса и код ответа
- тело запроса и ответа
В нижней части вкладки можно также посмотреть количество отправленных запросов, объем переданных данных и время загрузки.
Колонка Waterfall дает наглядное представление об этапах выполнения запросов, т.е. о том, сколько времени занял каждый запрос, в какое время он был отправлен и когда был завершен. Это позволяет получить представление о том, какие запросы параллельны, а какие нет, что может быть полезно для выявления проблем с производительностью.
Симуляция производительности сети с помощью Developer Tools
На вкладке Performance можно отслеживать, сколько времени занимает какое-либо действие в приложении. Здесь нужно начать запись, затем выполнить действия, которые необходимо отследить, и остановить запись по завершении тестов. По умолчанию флажок Screenshots включен.
Но еще более интересным является то, что вы можете имитировать различные сетевые подключения, чтобы увидеть, как ведет себя тестируемое веб-приложение в различных условиях. По умолчанию браузер использует настройки вашего устройства, то есть параметры сети и процессора. Однако можно смоделировать более медленное подключение к Интернету, более медленный процессор или даже отсутствие подключения к Интернету. Это может быть особенно полезно для понимания того, как приложение работает в реальных условиях.
Эмуляция устройств
Конечно, не сравнится с тестированием на реальном устройстве или даже на других эмуляторах, но это тоже хороший вариант для тестировщиков. Несмотря на то, что вы не сможете добиться реальных условий работы мобильного устройства, у вас будет возможность протестировать интерфейс приложения на разных экранах. Для этого перейдите в Настройки (или нажмите F1, находясь в Инструментах разработчика) -> Устройства:
Здесь представлен список устройств по умолчанию, предоставленный Google. Вы можете установить флажки, соответствующие устройствам, которые вы хотите использовать в своих тестах. Можно также добавить собственное устройство с пользовательской конфигурацией (например, определенное разрешение экрана, использование/неиспользование сенсорного ввода).
Чтобы включить эмуляцию устройства, щелкните на значок Toggle Device Toolbar:
При этом дисплей изменится в соответствии с выбранным устройством. Переключение между выбранными ранее устройствами осуществляется в меню Настройки. Здесь же можно выбрать сетевые настройки (в том числе отсутствие Интернета). Если на устройстве включено сенсорное управление, Chrome также будет его имитировать.
Работа с файлами Cookie
В веб-приложениях файлы Cookie представляют собой фрагменты информации, хранящиеся на локальном компьютере и содержащие данные, которые должны быть отправлены на сервер, чтобы приложение отображало персонализированный контент. Они используются для ускорения загрузки страниц, а также для хранения важной информации, например содержимого корзины.
Мы можем (и должны) тестировать веб-приложения с различными настройками Cookies.
Наиболее важными сведениями о файле Cookie являются:
- его имя
- его значение
- дата истечения срока действия.
Хорошо, что всю эту информацию можно увидеть в Chrome DevTools на вкладке Application. Здесь, в левом меню, в разделе Cookies можно увидеть список приложений, для которых можно открыть хранящиеся файлы Сookie с подробной информацией о них. Отсюда можно удалить файлы Сookie или изменить их значения и посмотреть, как поведет себя приложение после внесенных изменений:
Скриншоты в Chrome Developer Tools
Инструменты разработчика также позволяют делать скриншоты веб-сайта/веб-приложения. Если нажать Ctrl+Shitft+P в DevTools и отфильтровать по “screenshot”, то появится 4 варианта:
- Cкриншот части экрана – позволяет выбрать область страницы для скриншота (аналогично инструменту Snipping Tools в Windows).
- Скриншот всей страницы – создание изображения всей страницы, включая те части, которые не видны.
- Скриншот элемента на экране – создается снимок экрана выделенного элемента на вкладке Элементы.
- Скриншот (обычный) – создание скриншота той части страницы, которая в данный момент находится в поле зрения.
Все эти опции позволят загрузить файл .png со снимком экрана.
Помощь при тестировании локализации
Если вы хотите убедиться, что ваше приложение хорошо работает в разных странах и на разных языках, вы можете изменить локаль браузера. Для этого откройте в инструментах разработчика Settings, выберите More Tools, затем Sensors:
В результате будет загружен список доступных местоположений. Вы также можете добавить свои собственные местоположения (нажав кнопку Manage и заполнив всю информацию для желаемой локации).
Заключение
Веб-тестирование может быть очень сложным процессом. Даже если вы проводите тестирование только вручную, вы все равно можете использовать различные инструменты, которые помогут вам.
В этой статье рассматриваются некоторые из наиболее важных инструментов разработчика, которые мы, как тестировщики, можем использовать без установки расширений или других сторонних приложений.
Перевод статьи «Chrome Developer Tools for Web Testers».