Trace Viewer для детальной диагностики

Playwright предоставляет мощный инструмент для тестирования веб-приложений, включая функциональность записи и анализа трассировки тестов с помощью Trace Viewer. Этот инструмент позволяет разработчикам и тестировщикам анализировать каждый шаг теста, выявлять причины ошибок и улучшать стабильность тестов. Он предоставляет визуальное представление всех событий, происходящих во время выполнения теста, включая навигацию, взаимодействие с элементами, сетевые запросы и ошибки.

Что такое Trace?

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

Как записывать трассировки в Playwright?

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

Пример настройки трассировки в Playwright:

const { test, expect } = require('@playwright/test');

test('Тест с трассировкой', async ({ page, browserContext }) => {
  await browserContext.tracing.start({
    screenshots: true,
    snapshots: true,
  });

  await page.goto('https://example.com');
  await page.click('text=Some button');
  await expect(page).toHaveText('Some expected text');

  await browserContext.tracing.stop({ path: 'trace.zip' });
});

Этот код активирует трассировку, начиная с момента перехода на страницу, и записывает её в файл trace.zip. Важно, что параметр screenshots: true позволяет записывать скриншоты, а snapshots: true — снимки состояния страницы. Это позволяет получить полную картину происходящего на странице в процессе теста.

Как открывать трассировки в Trace Viewer?

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

npx playwright show-trace trace.zip

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

Основные функции Trace Viewer

1. Хронология событий

В Trace Viewer отображается временная шкала всех событий, произошедших в ходе теста. Хронология даёт точное представление о том, в каком порядке происходили действия, а также помогает легко найти моменты, которые могли привести к сбою теста.

Каждое событие на шкале может быть проанализировано, включая:

  • Сетевые запросы и их ответы
  • Взаимодействие с элементами страницы
  • Выполнение JavaScript

Каждое событие может быть выведено с дополнительной информацией, такой как время выполнения, ошибки и статусы.

2. Скриншоты и видео

Если трассировка была настроена на запись скриншотов и видео, в Trace Viewer можно просматривать все изображения и видеоматериалы, связанные с тестом. Это позволяет детально анализировать, как менялся интерфейс страницы в процессе выполнения теста и что именно увидел пользователь в момент взаимодействия.

При обнаружении ошибки в тесте можно вернуться к соответствующему скриншоту или кадру видео и понять, что именно привело к сбою.

3. Интерактивные действия

Каждое действие в тесте отображается на временной шкале, и вы можете кликать на события, чтобы детально увидеть, что происходило в момент их выполнения. Например, можно нажать на событие “клик по кнопке” и увидеть состояние страницы на тот момент, включая все изменения DOM, сетевые запросы и другие действия.

4. Сетевые запросы

Trace Viewer позволяет просматривать сетевые запросы, сделанные в ходе теста. Для каждого запроса отображаются:

  • URL запроса
  • Метод (GET, POST и др.)
  • Статус код
  • Ответ сервера

Это полезно для диагностики ошибок, связанных с отсутствием или некорректными данными на сервере. Например, если тест не может продолжиться из-за ошибки в сети, Trace Viewer позволит быстро найти проблему.

5. Логирование ошибок

Если в тесте произошли ошибки, такие как ассерты или исключения, Trace Viewer выделяет их на шкале времени. Это помогает локализовать точку сбоя и понять, что именно привело к ошибке.

Использование Trace Viewer для отладки

Использование Trace Viewer значительно облегчает процесс отладки, поскольку он предоставляет всю информацию в удобном виде. Чтобы эффективно использовать этот инструмент:

  1. Обратите внимание на моменты, когда произошли ошибки или неудачные ассерты.
  2. Используйте видео и скриншоты для анализа внешнего вида страницы и корректности пользовательских действий.
  3. Исследуйте сетевые запросы для выявления проблем с API или сервером.
  4. Используйте хронологию событий для выявления возможных конфликтов между действиями теста и взаимодействиями с элементами.

Советы по улучшению использования Trace Viewer

  1. Ограничьте объём трассировки: Чтобы избежать чрезмерного увеличения размера файла трассировки, можно отключить записи видео и скриншотов, если они не критичны для анализа.
  2. Используйте различные уровни логирования: Playwright позволяет настроить логирование с различными уровнями детализации, что помогает получать только те данные, которые важны для конкретного теста.
  3. Автоматизация анализа: В больших проектах можно использовать скрипты для автоматического анализа трассировок, например, для выявления повторяющихся проблем или сбоев.

Trace Viewer является незаменимым инструментом для глубокой диагностики и отладки тестов в Playwright, предоставляя всё необходимое для быстрого и точного анализа.

Оглавление