Просмотрщик трассировки
Введение
Playwright Trace Viewer — это графический инструмент, который помогает исследовать записанные трассы Playwright после выполнения скрипта. Трассы — отличный способ отладки ваших тестов, когда они не проходят на CI. Вы можете открыть трассы локально или в вашем браузере на trace.playwright.dev.
Открытие Trace Viewer
Вы можете открыть сохраненную трассу, используя либо Playwright CLI, либо в браузере на trace.playwright.dev. Убедитесь, что добавили полный путь к файлу trace.zip.
npx playwright show-trace path/to/trace.zip
Использование trace.playwright.dev
trace.playwright.dev — это статически размещенный вариант Trace Viewer. Вы можете загружать файлы трасс, перетаскивая их или используя кнопку Select file(s).
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/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip
Запись трассы
Трассировка локально
Чтобы записать трассу в режиме разработки, установите флаг --trace в on при запуске ваших тестов. Вы также можете использовать UI Mode для улучшенного опыта разработки, так как он автоматически трассирует каждый тест.
npx playwright test --trace on
Затем вы можете открыть HTML-отчет и нажать на иконку трассы, чтобы открыть трассу.
npx playwright show-report
Трассировка на CI
Трассы должны запускаться в непрерывной интеграции при первой повторной попытке неудачного теста, установив опцию trace: 'on-first-retry' в файле конфигурации теста. Это создаст файл trace.zip для каждого теста, который был повторно запущен.
- Test
- Library
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();
// Начать трассировку перед созданием/переходом на страницу.
await context.tracing.start({ screenshots: true, snapshots: true });
const page = await context.newPage();
await page.goto('https://playwright.dev');
// Остановить трассировку и экспортировать ее в zip-архив.
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 как Test Runner, используйте API browserContext.tracing.
Функции Trace Viewer
Действия
На вкладке Действия вы можете увидеть, какой локатор использовался для каждого действия и сколько времени заняло его выполнение. Наведите курсор на каждое действие вашего теста и визуально увидите изменения в снимке DOM. Перемещайтесь вперед и назад во времени и нажмите на действие, чтобы исследовать и отладить. Используйте вкладки Before и After, чтобы визуально увидеть, что произошло до и после действия.
Выбор каждого действия показывает:
- Снимки действия
- Журнал действий
- Местоположение исходного кода
Скриншоты
При трассировке с включенной опцией screenshots (по умолчанию), каждая трасса записывает видеозапись и отображает ее в виде пленочной ленты. Вы можете навести курсор на пленочную ленту, чтобы увидеть увеличенное изображение для каждого действия и состояния, что помогает легко найти действие, которое вы хотите исследовать.
Дважды щелкните на действие, чтобы увидеть временной диапазон для этого действия. Вы можете использовать ползунок на временной шкале, чтобы увеличить выбранные действия, и они будут показаны на вкладке Действия, а все журналы консоли и сети будут отфильтрованы, чтобы показывать только журналы для выбранных действий.
Снимки
При трассировке с включенной опцией snapshots (по умолчанию), Playwright захватывает набор полных снимков DOM для каждого действия. В зависимости от типа действия, он захватывает:
| Тип | Описание |
|---|---|
| Before | Снимок на момент вызова действия. |
| Action | Снимок в момент выполнения ввода. Этот тип снимка особенно полезен при исследовании, где именно Playwright кликнул. |
| After | Снимок после действия. |
Вот как выглядит типичный снимок действия:
Обратите внимание, как он выделяет как узел DOM, так и точное место клика.
Исходный код
Когда вы нажимаете на действие в боковой панели, строка кода для этого действия выделяется в панели исходного кода.
Вызов
Вкладка вызова показывает информацию о действии, такую как время выполнения, какой локатор использовался, если в строгом режиме и какой ключ использовался.
Журнал
Просмотрите полный журнал вашего теста, чтобы лучше понять, что Playwright делает за кулисами, например, прокручивает в видимую область, ждет, пока элемент станет видимым, включенным и стабильным, и выполняет действия, такие как клик, заполнение, нажатие и т.д.
Ошибки
Если ваш тест не проходит, вы увидите сообщения об ошибках для каждого теста на вкладке Ошибки. Временная шкала также покажет красную линию, подчеркивающую, где произошла ошибка. Вы также можете нажать на вкладку исходного кода, чтобы увидеть, на какой строке исходного кода произошла ошибка.
Консоль
Просмотрите журналы консоли из браузера, а также из вашего теста. Различные иконки отображаются, чтобы показать, пришел ли журнал консоли из браузера или из файла теста.
Дважды щелкните на действие из вашего теста в боковой панели действий. Это отфильтрует консоль, чтобы показывать только журналы, которые были сделаны во время этого действия. Нажмите кнопку Show all, чтобы снова увидеть все журналы консоли.
Используйте временную шкалу для фильтрации действий, нажав на начальную точку и перетащив до конечной точки. Вкладка консоли также будет отфильтрована, чтобы показывать только журналы, которые были сделаны во время выбранных действий.
Сеть
Вкладка Сеть показывает все сетевые запросы, которые были сделаны во время вашего теста. Вы можете сортировать по различным типам запросов, коду состояния, методу, запросу, типу контента, длительности и размеру. Нажмите на запрос, чтобы увидеть больше информации о нем, такую как заголовки запроса, заголовки ответа, тело запроса и тело ответа.
Дважды щелкните на действие из вашего теста в боковой панели действий. Это отфильтрует сетевые запросы, чтобы показывать только запросы, которые были сделаны во время этого действия. Нажмите кнопку Show all, чтобы снова увидеть все сетевые запросы.
Используйте временную шкалу для фильтрации действий, нажав на начальную точку и перетащив до конечной точки. Вкладка сети также будет отфильтрована, чтобы показывать только сетевые запросы, которые были сделаны во время выбранных действий.
Метаданные
Рядом с вкладкой Действия вы найдете вкладку Метаданные, которая покажет вам больше информации о вашем тесте, такую как браузер, размер окна просмотра, длительность теста и многое другое.
Вложения
Вкладка "Вложения" позволяет вам исследовать вложения. Если вы проводите тестирование визуальной регрессии, вы сможете сравнивать скриншоты, изучая разницу изображений, фактическое изображение и ожидаемое изображение. Когда вы нажимаете на ожидаемое изображение, вы можете использовать ползунок, чтобы перемещать одно изображение поверх другого, чтобы легко увидеть различия в ваших скриншотах.