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

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

Playwright Inspector

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

Playwright Inspector

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

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

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

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

Вы можете воспроизводить, приостанавливать или пошагово выполнять каждое действие вашего теста, используя панель инструментов в верхней части 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

Playwright Trace Viewer — это графический инструмент, который позволяет вам исследовать записанные трассы ваших тестов 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.

PWDEBUG=console pytest -s

Как только 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 pytest -s
примечание

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

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

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

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

# Chromium, Firefox, or WebKit
chromium.launch(headless=False, slow_mo=100)