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

Просмотрщик трассировок

Введение​

Playwright Trace Viewer — это графический инструмент, который помогает исследовать записанные трассировки Playwright после выполнения скрипта. Трассировки — отличный способ отладки ваших тестов, когда они не проходят в CI. Вы можете открыть трассировки локально или в вашем браузере на trace.playwright.dev.

Открытие просмотрщика трассировок​

Вы можете открыть сохраненную трассировку, используя либо Playwright CLI, либо в браузере на trace.playwright.dev. Убедитесь, что вы добавили полный путь к файлу trace.zip.

playwright show-trace trace.zip

Использование trace.playwright.dev​

trace.playwright.dev — это статически размещенный вариант Trace Viewer. Вы можете загрузить файлы трассировки, используя перетаскивание или через кнопку Select file(s).

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

Drop Playwright Trace to load

Просмотр удаленных трассировок​

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

playwright show-trace https://example.com/trace.zip

При использовании trace.playwright.dev вы также можете передать URL вашей загруженной трассировки в доступном хранилище (например, внутри вашего CI) в качестве параметра запроса. Могут применяться правила CORS (Cross-Origin Resource Sharing).

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip

Запись трассировки​

Трассировки могут быть записаны путем запуска ваших тестов с флагом --tracing.

pytest --tracing on

Опции для трассировки:

  • on: Записывать трассировку для каждого теста
  • off: Не записывать трассировку. (по умолчанию)
  • retain-on-failure: Записывать трассировку для каждого теста, но удалять все трассировки успешных запусков тестов.

Это запишет трассировку и поместит ее в файл с именем trace.zip в вашем каталоге test-results.

Если вы не используете Pytest, нажмите здесь, чтобы узнать, как записывать трассировки.
browser = chromium.launch()
context = browser.new_context()

# Начать трассировку перед созданием / навигацией по странице.
context.tracing.start(screenshots=True, snapshots=True, sources=True)

page = context.new_page()
page.goto("https://playwright.dev")

# Остановить трассировку и экспортировать ее в zip-архив.
context.tracing.stop(path = "trace.zip")

Возможности Trace Viewer​

Действия​

На вкладке Действия вы можете увидеть, какой локатор использовался для каждого действия и сколько времени заняло его выполнение. Наведите курсор на каждое действие вашего теста и визуально увидите изменения в снимке DOM. Перемещайтесь назад и вперед во времени и нажимайте на действие, чтобы исследовать и отлаживать. Используйте вкладки До и После, чтобы визуально увидеть, что произошло до и после действия.

actions tab in trace viewer

Выбор каждого действия показывает:

  • Снимки действия
  • Журнал действий
  • Местоположение исходного кода

Скриншоты​

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

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

timeline view in trace viewer

Снимки​

При трассировке с включенной опцией snapshots (по умолчанию) Playwright захватывает набор полных снимков DOM для каждого действия. В зависимости от типа действия, он захватывает:

ТипОписание
ДоСнимок на момент вызова действия.
ДействиеСнимок в момент выполнения ввода. Этот тип снимка особенно полезен при исследовании, где именно Playwright кликнул.
ПослеСнимок после действия.

Вот как выглядит типичный снимок Действия:

action tab in trace viewer

Обратите внимание, как он выделяет как узел DOM, так и точное место клика.

Исходный код​

Когда вы нажимаете на действие в боковой панели, строка кода для этого действия выделяется в панели исходного кода.

showing source code tab in trace viewer

Вызов​

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

showing call tab in trace viewer

Журнал​

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

showing log of tests in trace viewer

Ошибки​

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

showing errors in trace viewer

Консоль​

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

showing log of tests in trace viewer

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

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

Сеть​

Вкладка Сеть показывает все сетевые запросы, которые были сделаны во время вашего теста. Вы можете сортировать по различным типам запросов, коду состояния, методу, запросу, типу контента, продолжительности и размеру. Нажмите на запрос, чтобы увидеть больше информации о нем, такую как заголовки запроса, заголовки ответа, тело запроса и тело ответа.

network requests tab in trace viewer

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

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

Метаданные​

Рядом с вкладкой Действия вы найдете вкладку Метаданные, которая покажет вам больше информации о вашем тесте, такую как браузер, размер области просмотра, продолжительность теста и многое другое.

meta data in trace viewer