Перейти к основному содержимому

Отладка тестов

Playwright Inspector​

Playwright Inspector — это графический инструмент, который помогает отлаживать ваши тесты Playwright. Он позволяет пошагово проходить тесты, в реальном времени редактировать локаторы, выбирать локаторы и просматривать логи доступности.

Playwright Inspector

Запуск в режиме отладки​

Установите переменную окружения PWDEBUG, чтобы запустить ваши тесты Playwright в режиме отладки. Это настраивает Playwright для отладки и открывает инспектор. Дополнительные полезные настройки по умолчанию конфигурируются при установке PWDEBUG=1:

  • Браузеры запускаются в режиме с интерфейсом
  • Тайм-аут по умолчанию устанавливается в 0 (= без тайм-аута)

Настройка расположения исходного кода​

Чтобы указать Playwright, где искать исходный код, который вы отлаживаете, передайте список директорий с исходным кодом через переменную окружения PLAYWRIGHT_JAVA_SRC. Пути в списке должны быть разделены : на macOS и Linux, и ; на Windows.

# Директории с исходным кодом в списке разделены : на macos и linux и ; на win.
PWDEBUG=1 PLAYWRIGHT_JAVA_SRC=<java source dirs> mvn test

Пошаговое выполнение тестов​

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

Playwright Inspector and browser

Запуск теста с определенной точки останова​

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

page.pause();

После добавления вызова page.pause(), запустите ваши тесты в режиме отладки. Нажатие кнопки "Resume" в Inspector выполнит тест и остановится только на page.pause().

test with page.pause

Редактирование локаторов в реальном времени​

Во время работы в режиме отладки вы можете редактировать локаторы в реальном времени. Рядом с кнопкой 'Pick Locator' есть поле, показывающее локатор, на котором тест приостановлен. Вы можете редактировать этот локатор прямо в поле Pick Locator, и соответствующие элементы будут выделены в окне браузера.

live editing locators

Выбор локаторов​

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

Picking locators

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

Логи доступности​

К моменту, когда Playwright приостановился на действии клика, он уже выполнил проверки доступности, которые можно найти в логе. Это может помочь вам понять, что произошло во время вашего теста и что Playwright сделал или пытался сделать. Лог сообщает вам, был ли элемент видимым, включенным и стабильным, разрешился ли локатор в элемент, прокрутился ли он в видимую область и многое другое. Если доступность не может быть достигнута, действие будет показано как ожидающее.

Actionability Logs

Trace Viewer​

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

Чтобы узнать больше о том, как записывать трассы и использовать Trace Viewer, ознакомьтесь с руководством Trace Viewer.

Инструменты разработчика браузера​

При запуске в режиме отладки с PWDEBUG=console, объект playwright доступен в консоли инструментов разработчика. Инструменты разработчика могут помочь вам:

  • Исследовать дерево DOM и находить селекторы элементов
  • Просматривать логи консоли во время выполнения (или узнать, как читать логи через API)
  • Проверять сетевую активность и другие функции инструментов разработчика

Это также установит тайм-ауты по умолчанию Playwright в 0 (= без тайм-аута).

Browser Developer Tools with Playwright object

Чтобы отладить ваши тесты с использованием инструментов разработчика браузера, начните с установки точки останова в вашем тесте, чтобы приостановить выполнение, используя метод Page.pause().

page.pause();

После установки точки останова в вашем тесте, вы можете запустить ваш тест с PWDEBUG=console.

# Директории с исходным кодом в списке разделены : на macos и linux и ; на win.
PWDEBUG=console PLAYWRIGHT_JAVA_SRC=<java source dirs> mvn test

После того как Playwright запустит окно браузера, вы можете открыть инструменты разработчика. Объект playwright будет доступен в панели консоли.

playwright.$(selector)​

Запрос селектора Playwright, используя фактический движок запросов Playwright, например:

playwright.$('.auth-form >> text=Log in');

<button>Log in</button>

playwright.$$(selector)​

То же, что и playwright.$, но возвращает все соответствующие элементы.

playwright.$$('li >> text=John')

[<li>, <li>, <li>, <li>]

playwright.inspect(selector)​

Показать элемент в панели Elements.

playwright.inspect('text=Log in')

playwright.locator(selector)​

Создать локатор и запросить соответствующие элементы, например:

playwright.locator('.auth-form', { hasText: 'Log in' });

Locator ()
  - element: button
  - elements: [button]

playwright.selector(element)​

Генерирует селектор для данного элемента. Например, выберите элемент в панели Elements и передайте $0:

playwright.selector($0)

"div[id="glow-ingress-block"] >> text=/.*Hello.*/"

Подробные логи API​

Playwright поддерживает подробное логирование с помощью переменной окружения DEBUG.

DEBUG=pw:api mvn test
примечание

Для WebKit: запуск WebKit Inspector во время выполнения предотвратит дальнейшее выполнение скрипта Playwright и сбросит предварительно настроенный пользовательский агент и эмуляцию устройства.

Режим с интерфейсом​

По умолчанию Playwright запускает браузеры в безголовом режиме. Чтобы изменить это поведение, используйте headless: false в качестве опции запуска.

Вы также можете использовать опцию setSlowMo, чтобы замедлить выполнение (на N миллисекунд на операцию) и следить за процессом во время отладки.

// Chromium, Firefox, или WebKit
chromium.launch(new BrowserType.LaunchOptions()
  .setHeadless(false)
  .setSlowMo(100));