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

Введение

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.

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

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

Вы можете открыть удаленные трассировки напрямую, используя их 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/e6099cadf79aa753d5500aa9508f9d1dbd87b5ee.zip

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

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

pytest --tracing on

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

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

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

Если вы не используете Pytest, нажмите здесь, чтобы узнать, как записывать трассировки.

Sync

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")

Async

browser = await chromium.launch()
context = await browser.new_context()

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

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

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

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

Действия

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

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

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

Скриншоты

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

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

Снимки

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

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

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

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

Исходный код

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

Вызов

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

Журнал

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

Ошибки

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

Консоль

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

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

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

Сеть

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

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

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

Метаданные

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