Просмотрщик трассировок (Trace Viewer)

Что такое трассировка

Трассировка (trace) — это полная запись выполнения теста: каждое действие, состояние DOM, все сетевые запросы, консольные сообщения, скриншоты и снимки экрана. Trace Viewer — это встроенный инструмент Playwright для визуального анализа этих данных. Он незаменим при отладке упавших тестов и изучении поведения приложения.

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

Через pytest (рекомендовано)

Самый простой способ — использовать встроенную фикстуру --tracing при запуске тестов:

# Запись трассировки для всех тестов
pytest --tracing on

# Трассировка только при падении теста
pytest --tracing retain-on-failure

# Отключение трассировки (по умолчанию)
pytest --tracing off

Файлы трассировки сохраняются в директорию test-results/ вместе с отчётами.

Программная запись через API

Вы можете вручную управлять записью трассировки через объект BrowserContext:

from playwright.sync_api import sync_playwright

def run(playwright):
    browser = playwright.chromium.launch()
    context = browser.new_context()

    # Начать запись трассировки
    context.tracing.start(screenshots=True, snapshots=True)

    page = context.new_page()
    page.goto("https://playwright.dev")
    page.get_by_role("link", name="Get started").click()

    # Остановить запись и сохранить в файл
    context.tracing.stop(path="trace.zip")

    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

Параметры tracing.start()

# Полная запись: скриншоты, DOM-снэпшоты и исходники
context.tracing.start(screenshots=True, snapshots=True, sources=True)

# Минимальная запись (только действия)
context.tracing.start()

# Только скриншоты и снэпшоты, без исходников
context.tracing.start(screenshots=True, snapshots=True)

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

Локальный просмотр

Для просмотра сохранённой трассировки используйте команду:

# Открыть локальную трассировку
playwright show-trace trace.zip

# С указанием полного пути
playwright show-trace test-results/trace.zip

Онлайн-просмотр

Playwright предоставляет бесплатный онлайн-просмотрщик по адресу trace.playwright.dev. Просто перетащите файл .zip в окно браузера.

Удалённые трассировки

Trace Viewer поддерживает загрузку трассировок по URL:

# Просмотр трассировки по URL
playwright show-trace https://example.com/traces/trace.zip

# Можно также открыть URL в онлайн-просмотрщике

Вкладки Trace Viewer

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

Actions (Действия)

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

• Время начала и окончания
• Параметры вызова
• DOM-снэпшот до и после действия
• Скриншот на момент действия

При наведении на действие подсвечивается соответствующий элемент на DOM-снэпшоте. Это позволяет точно понять, с каким элементом работал тест.

Screenshots (Скриншоты)

Лента скриншотов, сделанных на каждом шаге выполнения. Позволяет быстро визуально оценить, как менялась страница. Ползунок времени даёт возможность пройтись по всей последовательности состояний.

Snapshots (Снэпшоты)

DOM-состояние страницы на каждом шаге выполнения. Доступно два режима:

• Before — DOM до выполнения действия
• After — DOM после выполнения действия

Можно просматривать HTML-код и визуальное представление. Снэпшоты интерактивны — элементы можно инспектировать.

Source (Исходный код)

Исходный код теста с подсветкой строк, соответствующих каждому действию. Позволяет сопоставить действие в трассировке с конкретной строкой кода. Особенно полезно при включении sources=True.

Call (Детали вызова)

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

# Пример информации вкладки Call:
# - Метод: locator.click()
# - Параметры: {selector: "button", position: {x: 10, y: 20}}
# - Длительность: 245ms
# - Результат: OK

Log (Логи)

Внутренние логи Playwright — технические сообщения от движка браузера и протокола CDP. Полезно для диагностики проблем с соединением, таймаутами и внутренними ошибками Playwright.

Errors (Ошибки)

Все ошибки, возникшие во время выполнения теста. Включает как ошибки Playwright (например, TimeoutError), так и ошибки JavaScript на странице. Отображается полный stack trace.

Console (Консоль)

Все сообщения из console.log() и других методов консоли браузера. Поддерживает фильтрацию по типам:

• log — обычные сообщения
• info — информационные сообщения
• warn — предупреждения
• error — ошибки
• debug — отладочные сообщения

Можно отфильтровать только нужные типы сообщений для фокуса на важном.

Network (Сеть)

Полный список всех HTTP-запросов, выполненных во время теста. Для каждого запроса доступны:

• URL и метод (GET, POST, PUT, DELETE и т.д.)
• Заголовки запроса и ответа
• Тело запроса и ответа (если доступно)
• HTTP-статус код
• Тип содержимого
• Длительность и размер
• Тайминг: DNS, TCP, TLS, запрос, ожидание, получение

Сетевые запросы можно сортировать по времени, типу, статусу и URL.

Metadata (Метаданные)

Общая информация о тестовом запуске:

• Браузер (Chromium, Firefox, WebKit)
• Версия браузера и движка
• Размер окна просмотра (viewport)
• Общая длительность теста
• Операционная система
• Время запуска
• Параметры контекста и браузера

Включение и исключение источников

Иногда нужно исключить определённые действия из трассировки, чтобы уменьшить размер файла:

# Трассировка только для определённого контекста
context.tracing.start(screenshots=True)

# Можно создать отдельный контекст для трассировки
main_context = browser.new_context()
debug_context = browser.new_context()

# Трассировка только для debug-контекста
debug_context.tracing.start(screenshots=True, snapshots=True)

# Основной контекст без трассировки (экономия места)
main_page = main_context.new_page()
main_page.goto("https://example.com")

Практический пример: отладка упавшего теста

Полный сценарий отладки с использованием трассировки:

# Шаг 1: Запуск тестов с трассировкой при падениях
pytest --tracing retain-on-failure

# Шаг 2: После падения в test-results/ появится файл trace.zip
# Шаг 3: Открыть трассировку
playwright show-trace test-results/trace.zip

# Шаг 4: В Trace Viewer:
# - Вкладка Actions: найти последнее успешное действие
# - Snapshot After: увидеть состояние страницы перед падением
# - Errors: прочитать текст ошибки
# - Network: проверить, какие запросы были в момент ошибки
# - Console: нет ли ошибок JavaScript

Программный пример с assert

import pathlib
from playwright.sync_api import sync_playwright, expect

def test_with_trace(playwright):
    browser = playwright.chromium.launch()
    context = browser.new_context()

    # Включаем трассировку со всеми опциями
    context.tracing.start(screenshots=True, snapshots=True, sources=True)

    page = context.new_page()
    page.goto("https://example.com")

    # Действие, которое может упасть
    heading = page.get_by_role("heading", name="Example Domain")

    try:
        expect(heading).to_be_visible()
        print("Тест пройден!")
    except AssertionError as e:
        # Сохраняем трассировку при ошибке
        context.tracing.stop(path="failure_trace.zip")
        raise e
    else:
        context.tracing.stop(path="success_trace.zip")

    context.close()
    browser.close()

with sync_playwright() as playwright:
    test_with_trace(playwright)

Сравнение трассировок

Trace Viewer позволяет загружать несколько трассировок и сравнивать их. Особенно полезно для A/B-тестирования или сравнения поведения на разных браузерах.

# Загрузка нескольких трассировок в один просмотрщик
playwright show-trace trace_chromium.zip trace_firefox.zip

# Переключение между трассировками через выпадающий список

Заключение

Trace Viewer — один из самых мощных инструментов отладки в Playwright. Он предоставляет полную картину выполнения теста: от сетевых запросов до DOM-состояний. Используйте его при каждом падении теста для быстрого выявления причин.