Просмотрщик трассировки
Введение
Playwright Trace Viewer — это графический инструмент, который помогает исследовать записанные трассы Playwright после выполнения скрипта. Трассы — отличный способ отладки ваших тестов, когда они не проходят в CI. Вы можете открыть трассы локально или в вашем браузере на trace.playwright.dev.
Открытие Trace Viewer
Вы можете открыть сохраненную трассу, используя либо Playwright CLI, либо в браузере на trace.playwright.dev. Убедитесь, что добавили полный путь к файлу trace.zip.
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="show-trace trace.zip"
Использование trace.playwright.dev
trace.playwright.dev — это статически размещенный вариант Trace Viewer. Вы можете загружать файлы трасс, используя перетаскивание или через кнопку Select file(s).
Trace Viewer загружает трассу полностью в вашем браузере и не передает данные внешним ресурсам.
Просмотр удаленных трасс
Вы можете открыть удаленные трассы напрямую, используя их URL. Это упрощает просмотр удаленной трассы без необходимости вручную загружать файл из CI, например.
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="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
Запись трассы
Трассы могут быть записаны с использованием API BrowserContext.tracing() следующим образом:
Browser browser = browserType.launch();
BrowserContext context = browser.newContext();
// Начать запись трассы перед созданием/переходом на страницу.
context.tracing().start(new Tracing.StartOptions()
.setScreenshots(true)
.setSnapshots(true)
.setSources(true));
Page page = context.newPage();
page.navigate("https://playwright.dev");
// Остановить запись трассы и экспортировать ее в zip-архив.
context.tracing().stop(new Tracing.StopOptions()
.setPath(Paths.get("trace.zip")));
Это запишет трассу и поместит ее в файл с именем trace.zip.
Возможности Trace Viewer
Действия
На вкладке Действия вы можете увидеть, какой локатор использовался для каждого действия и сколько времени заняло его выполнение. Наведите курсор на каждое действие вашего теста и визуально увидите изменения в снимке DOM. Перемещайтесь вперед и назад во времени и нажимайте на действие, чтобы исследовать и отлаживать. Используйте вкладки Before и After, чтобы визуально увидеть, что произошло до и после действия.
Выбор каждого действия показывает:
- Снимки действия
- Журнал действий
- Местоположение исходного кода
Скриншоты
При трассировке с включенной опцией setScreenshots (по умолчанию), каждая трасса записывает видеозапись и отображает ее в виде пленочной полосы. Вы можете навести курсор на пленочную полосу, чтобы увидеть увеличенное изображение для каждого действия и состояния, что помогает легко найти действие, которое вы хотите исследовать.
Дважды щелкните по действию, чтобы увидеть временной диапазон для этого действия. Вы можете использовать ползунок на временной шкале, чтобы увеличить количество выбранных действий, и они будут показаны на вкладке Действия, а все журналы консоли и сети будут отфильтрованы, чтобы показывать только журналы для выбранных действий.
Снимки
При трассировке с включенной опцией setSnapshots (по умолчанию), Playwright захватывает набор полных снимков DOM для каждого действия. В зависимости от типа действия, он захватит:
| Тип | Описание |
|---|---|
| Before | Снимок на момент вызова действия. |
| Action | Снимок в момент выполнения ввода. Этот тип снимка особенно полезен при исследовании, где именно Playwright кликнул. |
| After | Снимок после действия. |
Вот как выглядит типичный снимок действия:
Обратите внимание, как он выделяет как узел DOM, так и точную позицию клика.
Исходный код
Когда вы нажимаете на действие в боковой панели, строка кода для этого действия выделяется в панели исходного кода.
Вызов
Вкладка вызова показывает информацию о действии, такую как время выполнения, какой локатор использовался, если в строгом режиме и какой ключ использовался.
Журнал
Просмотрите полный журнал вашего теста, чтобы лучше понять, что делает Playwright за кулисами, например, прокрутка в видимую область, ожидание, пока элемент станет видимым, включенным и стабильным, и выполнение таких действий, как клик, заполнение, нажатие и т.д.
Ошибки
Если ваш тест не проходит, вы увидите сообщения об ошибках для каждого теста на вкладке Ошибки. Временная шкала также покажет красную линию, подчеркивающую, где произошла ошибка. Вы также можете нажать на вкладку исходного кода, чтобы увидеть, на какой строке исходного кода произошла ошибка.
Консоль
Просмотрите журналы консоли из браузера, а также из вашего теста. Различные значки отображаются, чтобы показать, пришел ли журнал консоли из браузера или из тестового файла.
Дважды щелкните по действию из вашего теста в боковой панели действий. Это отфильтрует консоль, чтобы показывать только журналы, которые были сделаны во время этого действия. Нажмите кнопку Show all, чтобы снова увидеть все журналы консоли.
Используйте временную шкалу для фильтрации действий, нажав на начальную точку и перетащив до конечной точки. Вкладка консоли также будет отфильтрована, чтобы показывать только журналы, которые были сделаны во время выбранных действий.
Сеть
Вкладка Сеть показывает все сетевые запросы, которые были сделаны во время вашего теста. Вы можете сортировать по различным типам запросов, коду состояния, методу, запросу, типу контента, продолжительности и размеру. Нажмите на запрос, чтобы увидеть больше информации о нем, такую как заголовки запроса, заголовки ответа, тело запроса и тело ответа.
Дважды щелкните по действию из вашего теста в боковой панели действий. Это отфильтрует сетевые запросы, чтобы показывать только запросы, которые были сделаны во время этого действия. Нажмите кнопку Show all, чтобы снова увидеть все сетевые запросы.
Используйте временную шкалу для фильтрации действий, нажав на начальную точку и перетащив до конечной точки. Вкладка сети также будет отфильтрована, чтобы показывать только сетевые запросы, которые были сделаны во время выбранных действий.
Метаданные
Рядом с вкладкой Действия вы найдете вкладку Метаданные, которая покажет вам больше информации о вашем тесте, такую как браузер, размер окна просмотра, продолжительность теста и многое другое.