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

Введение​

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

Возможности просмотра трассировок​

Действия​

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

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

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

Скриншоты​

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

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

Снимки​

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

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

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

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

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

Вызов​

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

Журнал​

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

Ошибки​

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

Консоль​

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

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

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

Сеть​

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

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

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

Метаданные​

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

Вложения​

Вкладка «Вложения» позволяет исследовать вложения. Если вы выполняете тестирование визуальной регрессии, вы сможете сравнить скриншоты, изучив разницу изображений, фактическое изображение и ожидаемое изображение. При нажатии на ожидаемое изображение вы можете использовать ползунок, чтобы сдвинуть одно изображение поверх другого, чтобы легко увидеть различия в ваших скриншотах.

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

Для записи трассировки в режиме разработки установите флаг --trace в on при запуске ваших тестов. Вы также можете использовать режим UI для лучшего опыта разработчика.

npx playwright test --trace on

Затем вы можете открыть HTML-отчёт и нажать на значок трассировки, чтобы открыть трассировку.

npx playwright show-report

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

Трассировки должны запускаться на непрерывной интеграции при первой повторной попытке выполнения завершённого тестом, установив параметр trace: 'on-first-retry' в файле конфигурации теста. Это создаст файл trace.zip для каждого повторно выполняемого теста.

import { defineConfig } from '@playwright/test';
export default defineConfig({
  retries: 1,
  use: {
    trace: 'on-first-retry',
  },
});

const browser = await chromium.launch();
const context = await browser.newContext();

// Start tracing before creating / navigating a page.
await context.tracing.start({ screenshots: true, snapshots: true });

const page = await context.newPage();
await page.goto('https://playwright.dev');

// Stop tracing and export it into a zip archive.
await context.tracing.stop({ path: 'trace.zip' });

Доступные параметры для записи трассировки:

• 'on-first-retry' — Запись трассировки только при первой повторной попытке выполнения теста.
• 'on-all-retries' — Запись трассировок для всех повторных попыток выполнения теста.
• 'off' — Не записывать трассировку.
• 'on' — Запись трассировки для каждого теста. (не рекомендуется, так как это ресурсоёмко)
• 'retain-on-failure' — Запись трассировки для каждого теста, но удаление её из успешных запусков теста.

Вы также можете использовать trace: 'retain-on-failure' если вы не включили повторные попытки, но всё равно хотите трассировки для неудачных тестов.

Доступны более подробные параметры, см. testOptions.trace.

Если вы не используете Playwright в качестве исполнителя тестов, используйте API browserContext.tracing вместо этого.

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

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

npx playwright show-trace path/to/trace.zip

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

trace.playwright.dev — это статически размещённый вариант просмотра трассировок. Вы можете загрузить файлы трассировок с помощью перетаскивания.

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

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

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

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

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