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

Введение​

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

Открытие Trace Viewer​

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

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

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

trace.playwright.dev — это размещённая на статическом хостинге версия Trace Viewer. Файл трассировки можно загрузить перетаскиванием или с помощью кнопки Select file.

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

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

Удалённые трассировки можно открывать напрямую по URL. Например, это позволяет легко просматривать трассировки, не скачивая вручную файлы из запусков CI.

npx 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

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

Локальная запись трассировки​

Чтобы записать трассировку в режиме разработки, задайте флаг --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.

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

Действия​

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

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

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

Снимки экрана​

Если при записи трассировки включён параметр screenshots (включён по умолчанию), для каждой трассировки записывается скринкаст, который отображается в виде киноплёнки. Наведите указатель на киноплёнку, чтобы увидеть увеличенное изображение для каждого действия и состояния. Это поможет быстро найти нужное действие.

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

Снимки​

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

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

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

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

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

Вызов​

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

Журнал​

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

Ошибки​

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

Консоль​

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

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

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

Сеть​

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

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

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

Метаданные​

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

Вложения​

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