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

Введение​

Playwright Trace Viewer — это инструмент с графическим интерфейсом, который позволяет изучать записанные трассировки тестов Playwright. Вы можете перемещаться вперёд и назад по действиям теста и визуально видеть, что происходило во время каждого из них.

Вы узнаете

• Как записать трассировку
• Как открыть HTML-отчёт
• Как открыть и просмотреть трассировку

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

По умолчанию файл playwright.config содержит конфигурацию, необходимую для создания файла trace.zip для каждого теста. Запись трассировок настроена на запуск on-first-retry, то есть при первой повторной попытке выполнить неудачный тест. Кроме того, retries равно 2 при запуске в CI и 0 при локальном запуске. Это означает, что трассировки записываются при первой повторной попытке выполнить неудачный тест, но не при первом запуске и не при второй повторной попытке.

import { defineConfig } from '@playwright/test';
export default defineConfig({
  retries: process.env.CI ? 2 : 0, // set to 2 when running on CI
  // ...
  use: {
    trace: 'on-first-retry', // record traces on first retry of each test
  },
});

Подробнее о доступных параметрах записи трассировки читайте в нашем руководстве по просмотрщику трассировок.

Обычно трассировки записываются в среде непрерывной интеграции (CI), поскольку для разработки и отладки тестов локально можно использовать режим UI. Однако, если вы хотите записывать трассировки локально без использования режима UI, включите запись трассировок с помощью --trace on.

npx playwright test --trace on

Открытие HTML-отчёта​

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

npx playwright show-report

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

Чтобы открыть трассировку нужного теста, нажмите на значок трассировки рядом с именем файла теста в HTML-отчёте.

Вы также можете открыть подробное представление теста, прокрутить страницу до вкладки 'Traces' и открыть трассировку, нажав на снимок экрана трассировки.

Подробнее о репортерах читайте в нашем руководстве по репортерам, в том числе по HTML-репортеру.

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

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

Подробнее о трассировках читайте в нашем руководстве по просмотрщику трассировок.

Что дальше​

• Запуск тестов в CI с помощью GitHub Actions
• Подробнее о просмотрщике трассировок