Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p><strong>Разбираемся, как тестировщику получить информацию о работе приложения и внести в него нужные изменения с помощью инструментов разработчика Chrome.</strong></p>

2 <p>Инструменты разработчика отображаются в браузере Chrome в виде панели, на которой доступны сведения об открытой вкладке. Чтобы воспользоваться DevTools, откройте меню, нажав на три точки в правом верхнем углу, выберите More Tools (Дополнительные инструменты), а затем Developer Tools (Инструменты разработчика). Также можно использовать горячие клавиши Ctrl+Shift+I или нажать F12. По желанию панель DevTools можно переместить или открыть в отдельном окне.</p>

3 <p>О том, как открыть DevTools в других браузерах и почему инструменты разработчика делают работу эффективнее, мы рассказали<a>в этой статье</a>.</p>

4 <h2>Содержание</h2>

5 <ul><li><a>Просмотр информации об элементах</a></li>

6 <li><a>Мониторинг HTTP-запросов</a></li>

7 <li><a>Моделирование характеристик сети</a></li>

8 <li><a>Эмуляция устройств</a></li>

9 <li><a>Работа с файлами cookie</a></li>

10 <li><a>Создание скриншотов</a></li>

11 <li><a>Тестирование локализации</a></li>

12 </ul><h2>Просмотр информации об элементах</h2>

13 <p>На вкладке Elements (Элементы) можно просмотреть информацию об элементах веб-страницы, дереве DOM и стилях CSS. На основе этой информации можно определить лучшие локаторы для веб-элементов, что особенно актуально при тестировании средств веб-автоматизации.</p>

14 <p>В инструментах разработчика можно получить XPath или CSS-селектор элемента. Для этого откройте вкладку Elements, щелкните правой кнопкой мыши на нужном элементе и выберите Copy (Копировать), а затем Copy XPath или Copy Selector.</p>

15 <p>Для поиска элементов в DOM нажмите Ctrl+F. Искать можно не только по простому тексту, но и с помощью фильтров, которые позволяют обнаружить сложные CSS-селекторы или XPath. С их помощью можно убедиться, что локатор обнаруживает нужные элементы и увидеть количество совпадений.</p>

16 <p><em>Указанный CSS-селектор соответствует 9 элементам в DOM</em></p>

17 <h2>Мониторинг HTTP-запросов</h2>

18 <p>Вкладка Network (Сеть) содержит информацию о HTTP-запросах. Здесь отображаются заголовки, тело запроса, код статуса, тело и время ответа. На этой вкладке тестировщик может увидеть текущий статус сетевых запросов.</p>

19 <p>URL и тело запроса можно скопировать, чтобы в дальнейшем использовать для тестирования API, например, с применением Postman. Также тут можно обнаружить лишние запросы, отправляемые во время загрузки. Если страница загружается долго, можно определить, с какими запросами это связано.</p>

20 <p>Для работы со вкладкой Network нажмите на кнопку Record (Запись). Затем отправьте запросы в приложении, и они отобразятся на этой вкладке.</p>

21 <p><em>HTTP-запросы, которые зафиксированы на вкладке Network при загрузке блога TestProject</em></p>

22 <p>Нажмите на HTTP-запрос, чтобы просмотреть:</p>

23 <ul><li>URL запроса</li>

24 <li>Заголовки запросов и ответов</li>

25 <li>Метод запроса и код статуса</li>

26 <li>Тело запроса и ответа.</li>

27 </ul><p>В нижней части вкладки указаны количество отправленных запросов, объем переданных данных и время загрузки.</p>

28 <p>Каскадная диаграмма на вкладке Network позволяет увидеть этапы запросов. Например, сколько времени занял каждый запрос, когда он был отправлен и выполнен. С помощью этого инструмента тестировщик может узнать, какие запросы выполняются параллельно и обнаружить проблемы с производительностью.</p>

29 <blockquote><h3>Читайте также:</h3>

30 <p>Гид по профессии:<a>Инженер по ручному тестированию</a></p>

31 </blockquote><h2>Моделирование характеристик сети</h2>

32 <p>На вкладке Performance (Производительность) отображается длительность каждого события. Начните запись, выполните нужные действия и остановите ее.</p>

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

34 <p>Еще можно моделировать характеристики сетевого соединения и проверять работу приложения в разных условиях. По умолчанию браузер использует настройки текущего устройства, включая параметры сети и ЦП. Это не мешает проверить работу сайта при медленном ЦП, слабом интернет-соединении или его отсутствии. С помощью моделирования можно узнать, как приложение будет работать в реальных условиях.</p>

35 <p><em>Моделирование характеристик сети</em></p>

36 <h2>Эмуляция устройств</h2>

37 <p>Хотя девтулс Chrome не заменят тестирование на реальных устройствах или продвинутых эмуляторах, в них доступны средства эмуляции. С их помощью можно посмотреть, как приложение выглядит на различных экранах.</p>

38 <p>Для этого перейдите в меню настроек или нажмите F1 в режиме Инструментов разработчика и выберите Devices (Устройства).</p>

39 <p>В этом меню перечислены устройства, которые Google предлагает использовать по умолчанию. Для тестирования можно выбрать одно из них или добавить новое устройство с индивидуальными настройками, включая разрешение экрана и наличие тачскрина.</p>

40 <p>Чтобы активировать эмуляцию устройства, нажмите на иконку с изображением телефона и планшета.</p>

41 <p>Приложение будет отображаться так же, как на выбранном устройстве. В настройках можно переключаться между устройствами из списка. Еще можно указать настройки сети, включая отсутствие интернет-соединения и расположение дисплея. Если на устройстве доступен тачскрин, эта функция также моделируется в Chrome.</p>

42 <h2>Работа с файлами cookie</h2>

43 <p>Файлы cookie содержат информацию, которая хранится на устройстве, и передают данные серверу, позволяя отображать персонализированный контент. Благодаря таким файлам страницы загружаются быстрее и сохраняют важную информацию, например, содержимое корзины в интернет-магазине.</p>

44 <p>Веб-приложения нужно тестировать с разными настройками файлов cookie. Основные сведения о файле cookie - Name (Название), Value (Значение) и Expiration date (Срок действия) - название, значение и срок действия - можно получить на вкладке Applications (Приложения) инструментов разработчика Chrome.</p>

45 <p>Раскройте список Cookies в левом меню. Выберите сайт для просмотра сохраненных файлов cookie и подробной информации о них. Здесь можно удалить файлы cookie, изменить их значения и отследить влияние таких изменений на работу приложения.</p>

46 <p><em>Файлы cookie для<a>страницы веб-приложения</a></em></p>

47 <h2>Создание скриншотов</h2>

48 <p>С помощью инструментов разработчика можно делать скриншоты сайта или веб-приложения. Нажмите Ctrl+Shift+P, введите "screenshot" и выберите один из четырех вариантов.</p>

49 <ul><li>Capture area screenshot (сделать скриншот области) создает скриншот определенной области экрана, как инструмент "Ножницы" в Windows.</li>

50 <li>Capture full size screenshot (сделать полноразмерный скриншот) создает копию изображения всей страницы, включая области, которые не отображаются на экране.</li>

51 <li>Capture node screenshot (сделать скриншот узла) делает скриншот элемента, выделенного на вкладке Elements.</li>

52 <li>Capture screenshot (сделать скриншот) делает скриншот отображаемой части страницы.</li>

53 </ul><p>При выборе любого варианта будет сохранен скриншот в формате .png.</p>

54 <h2>Тестирование локализации</h2>

55 <p>Если приложение локализовано, и нужно проверить его работу с различными настройками страны и языка, в инструментах разработчика можно изменить региональные настройки браузера. Откройте меню с тремя точками рядом с кнопкой настроек, нажмите More Tools, а затем Sensors (Датчики).</p>

56 <p>Откроется список вариантов расположения, для которых указаны географическое положение, региональные настройки и часовой пояс. Можно задать собственные настройки, нажав на кнопку Manage (Настроить) и указав информацию о выбранном расположении.</p>

57 <p><em>Эта статья - адаптированный перевод<a>материала</a>тестировщицы Андреа Драничану, опубликованного в блоге TestProject.</em></p>

58 <blockquote><h3>Изучите ручное тестирование на Хекслете</h3>

59 <p>На Хекслете есть профессия "<a>Инженер по тестированию</a>". Освойте ее и познакомьтесь с этапами разработки и жизненным циклом ПО, техниками тест-дизайна, системами управления тестированием и системами баг-трекинга.</p>

60 </blockquote>