Playwright UI Mode

Содержание:

• Введение
• Как запустить UI Mode
• Запуск тестов
• Фильтрация тестов
• Просмотр временной шкалы
• Вкладка Actions
• Детальный анализ DOM при отладке
• Поиск и проверка локаторов
• Вкладка Source
• Вкладка Call
• Вкладка Log
• Вкладка Errors
• Вкладка Console
• Вкладка Network
• Вкладка Attachments
• Вкладка Metadata
• Режим наблюдения (Watch mode)
• Настройка UI Mode в Docker и GitHub

Друзья, поддержите нас вступлением в наш телеграм канал QaRocks. Там много туториалов, задач по автоматизации и книг по QA.

Введение

Playwright UI Mode — это удобный инструмент для визуального запуска и отладки автотестов. Он позволяет пошагово воспроизводить выполнение теста и отслеживать, что происходило на каждом этапе. Вся структура тестов отображается в боковой панели: можно развернуть нужный файл, выбрать конкретный describe– и запустить его отдельно.

UI Mode поддерживает фильтрацию по тексту, тегам (@tag), статусу выполнения (пройден, упал, пропущен) и проектам из playwright.config. Для каждого теста доступна детальная трассировка: достаточно навести курсор на шаг, чтобы увидеть, что именно происходило в этот момент. DOM можно открыть в отдельном окне, что удобно при отладке визуальных изменений.

Как запустить UI Mode

Открыть режим можно командой:

npx playwright test --ui

Запуск тестов

После запуска UI Mode в боковой панели появится список всех тестовых файлов.

Варианты запуска:

• Все тесты сразу — нажмите на значок ▶️ в верхней части боковой панели.
• Отдельный файл, блок или тест — наведите курсор на нужный элемент и кликните по локальному значку ▶️ рядом с ним.

Интерфейс сохраняет историю запусков, поэтому всегда можно сравнить текущие результаты с предыдущими.

Фильтрация тестов

В режиме UI Mode вы можете быстро находить нужные тесты с помощью удобной системы фильтрации:

Критерии фильтрации:

• По названию или содержимому (текстовый поиск)
• По тегам (например, @smoke или @regression)
• По статусу выполнения (passed, failed, skipped)
• По проектам (если в playwright.config настроено несколько окружений)

Важный момент по зависимостям:
Если в вашей конфигурации есть тесты-зависимости (setup tests), которые должны выполняться перед основными, учтите что UI Mode не запускает их автоматически. В таком случае предварительно выполните установочные тесты вручную через командную строку:

npx playwright test --project=setup

Только после этого можно запускать зависимые тесты через интерфейс UI Mode.

Просмотр временной шкалы (Timeline)

В верхней части трассировки теста отображается временная шкала с цветовой разметкой, где разные цвета обозначают навигацию и различные действия. Наводите курсор на шаги, для каждого будет показан снимок экрана, сделанный в момент выполнения. Двойной клик по действию покажет, сколько времени оно заняло. С помощью ползунка на шкале можно выбрать несколько шагов, они появятся во вкладке Actions, а консольные и сетевые логи автоматически отфильтруются и покажут только информацию, связанную с выбранными действиями.

Вкладка Actions

Во вкладке Actions отображаются все действия теста: какой локатор использовался и сколько времени заняло выполнение. Наводите курсор на любое действие — вы сразу увидите, как менялся DOM в момент его выполнения. Можно перемещаться по шагам, кликать по ним для детального разбора и отладки. Вкладки Before и After наглядно покажут, что происходило до и после конкретного действия.
Полезно, чтобы быстро находить проблемные локаторы, анализировать, какие действия выполняются дольше ожидаемого, визуально проверять корректность изменений DOM.

Детальный анализ DOM при отладке

DOM снимки можно открыть в отдельных окнах для более детального анализа. Просто кликнуть иконку “Развернуть” над нужным снимком, он откроется в новом окне браузера с полным доступом к DevTools, включая вкладки Elements, Console и Network. Здесь можно проверить CSS-стили, вычисленные значения и выполнять поиск по DOM-дереву.

Такой подход полезен при отладке сложных динамических интерфейсов, где важно отслеживать поэтапные изменения DOM. Возможность параллельного просмотра снимков разных шагов значительно упрощает поиск причин неожиданного поведения тестов.

Поиск и проверка локаторов

Playwright предлагает удобный инструмент для подбора и проверки локаторов прямо в интерфейсе UI Mode. Нажмите кнопку “Pick Locator” и наведите курсор на DOM-снимок — система будет подсвечивать элементы и отображать соответствующие локаторы в реальном времени.

Когда вы кликнете на нужный элемент, его локатор автоматически появится в панели для редактирования. Здесь вы можете изменять селектор, сразу проверяя, находит ли он нужный элемент в текущем состоянии страницы. Playwright поддерживает все типы локаторов — от простых текстовых до сложных XPath выражений.
После настройки локатора достаточно нажать кнопку копирования, чтобы перенести готовый селектор в ваш тест.

Вкладка Source

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

Вкладка Call​

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

Вкладка Log

Вкладка Log показывает полный журнал системных операций, которые Playwright выполняет в процессе тестирования. Здесь можно посмотреть технические детали, невидимые при обычном выполнении: прокрутка элемента в область видимости, ожидание, пока он станет видимым, активным и стабильным, а также выполнение действий вроде click, fill, press и других.
Эти данные становятся незаменимыми для диагностики неочевидных ошибок, когда тест неожиданно падает без видимых причин, при оптимизации производительности медленно работающих сценариев, а также при проверке корректной последовательности выполнения операций в сложных тестовых случаях.

Вкладка Errors​

Если тест завершился с ошибкой, подробности отобразятся на вкладке Errors. На таймлайне также появится красная линия, указывающая на момент сбоя. Чтобы понять, где именно возникла ошибка, можно перейти на вкладку Source — там подсвечивается строка исходного кода, вызвавшая сбой.

Вкладка Console​

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

Вкладка Network

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

Вкладка Attachments

Вкладка Attachments предоставляет удобный инструмент для работы с файлами, прикрепленными к тестам. Особенно мощные возможности для визуального регрессионного тестирования. Можно детально анализировать различия между скриншотами через режим сравнения.

Вкладка Metadata​

Рядом с вкладкой Actions находится вкладка Metadata, где отображаются ключевые параметры выполнения: тип и версия браузера, размер viewport (область просмотра), общая продолжительность теста и другие системные данные.

Режим наблюдения (Watch mode)

Рядом с каждым тестом в боковой панели вы найдете иконку глаза — кнопку активации Watch Mode. При включении этого режима тест будет автоматически перезапускаться при любых изменениях в его коде. Можно отслеживать несколько тестов одновременно, нажав на значок глаза рядом с ними, или включить наблюдение сразу для всех тестов, используя значок глаза в верхней части боковой панели.

Настройка UI Mode в Docker и GitHub Codespaces

В средах Docker и GitHub Codespaces режим UI Mode можно запускать прямо в браузере. Чтобы интерфейс был доступен за пределами контейнера, его нужно привязать к адресу 0.0.0.0:

npx playwright test --ui-host=0.0.0.0

В GitHub Codespaces порт пробрасывается автоматически, поэтому вы можете открыть UI Mode в браузере, просто кликнув по ссылке в терминале.

Если вы хотите задать статичный порт, используйте флаг --ui-port:

npx playwright test --ui-port=8080 --ui-host=0.0.0.0

Обратите внимание:

При использовании --ui-host=0.0.0.0 UI Mode становится доступен другим устройствам в вашей сети, включая трассировки тестов и потенциально чувствительные данные. В случае GitHub Codespaces порты по умолчанию доступны только вашему аккаунту.

Перевод статьи «UI Mode».