Режим UI

Введение​

Режим UI позволяет исследовать, запускать и отлаживать тесты с опытом путешествия во времени, включая режим наблюдения. Все тестовые файлы загружаются в боковую панель тестирования, где вы можете развернуть каждый файл и описать блок для индивидуального запуска, просмотра, наблюдения и отладки каждого теста. Фильтровать тесты можно по тексту или метке @tag, или по пройденным, неудачным и пропущенным тестам, а также по проектам, заданным в вашем файле playwright.config. Посмотрите полную трассировку ваших тестов и переместите указатель мыши вперед и назад по каждому действию, чтобы увидеть, что происходило на каждом шаге, и выведите снимок DOM в отдельное окно для более удобной отладки.

Открытие режима UI​

Чтобы открыть режим UI, выполните следующую команду в вашей консоли:

npx playwright test --ui

Запуск ваших тестов​

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

Фильтрование тестов​

Фильтровать тесты можно по тексту или @tag или по пройденным, не пройденным или пропущенным тестам. Вы также можете фильтровать по проектам, заданным в вашем файле playwright.config. Если вы используете зависимости проектов, убедитесь, что сначала запустили тестовые задачи настройки перед запуском тестов, которые зависят от них. Режим UI не будет учитывать тестовые задачи настройки, и поэтому вам необходимо запустить их вручную.

Представление временной шкалы​

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

Действия​

На вкладке «Действия» вы можете увидеть, какой локатор использовался для каждого действия и сколько времени потребовалось на его выполнение. Наведите указатель мыши на каждое действие вашего теста и визуально увидите изменение снимка DOM. Перемещайтесь назад и вперед во времени и щелкните по действию для проверки и отладки. Используйте вкладки «Перед» и «После», чтобы визуально увидеть, что произошло до и после действия.

Вывести и проверить DOM​

Выведите снимок DOM в отдельное окно для лучшей отладки, нажав на значок «Вывести» над снимком DOM. Оттуда вы можете открыть инструменты разработчика браузера и проверить HTML, CSS, консоль и т. д. Вернитесь в режим UI и щелкните по другому действию и выведите его, чтобы легко сравнить их бок о бок или отлаживать каждый по отдельности.

Выбор локатора​

Нажмите кнопку «Выбрать локатор» и наведите указатель мыши на снимок DOM, чтобы увидеть локатор каждого выделенного элемента при наведении. Щелкните по элементу, чтобы добавить поле локатора. Вы можете изменить локатор в поле и посмотреть, соответствует ли измененный локатор каким-либо локаторам в снимке DOM. После того, как вы будете удовлетворены локатором, вы можете использовать кнопку «Копировать», чтобы скопировать локатор и вставить его в свой тест.

Исходный код​

При наведении указателя мыши на каждое действие вашего теста строка кода для этого действия подсвечивается в панели исходного кода.

Вызов​

Вкладка «Вызов» показывает информацию о действии, такую как время выполнения, используемый локатор, если режим строгий и какой ключ был использован.

Журнал​

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

Ошибки​

Если тест завершается неудачно, вы увидите сообщения об ошибках для каждого теста на вкладке «Ошибки». Временная шкала также отобразит красную линию, отмечая место возникновения ошибки. Вы также можете перейти на вкладку «Исходный код», чтобы увидеть, на какой строке исходного кода произошла ошибка.

Консоль​

Просматривайте журналы консоли браузера, а также вашего теста. Разные значки показывают, пришла ли запись консоли из браузера или из файла теста.

Сеть​

Вкладка «Сеть» показывает все сетевые запросы, которые были сделаны во время вашего теста. Вы можете сортировать по различным типам запросов, коду состояния, методу, запросу, типу содержимого, продолжительности и размеру. Щелкните по запросу, чтобы получить более подробную информацию, например, заголовки запроса, заголовки ответа, тело запроса и тело ответа.

Вложения​

Вкладка «Вложения» позволяет просматривать вложения. Если вы выполняете тестирование визуальных регрессий, вы сможете сравнивать скриншоты, изучая разницу изображений, фактическое изображение и ожидаемое изображение. Когда вы щелкаете по ожидаемому изображению, вы можете использовать ползунок для перемещения одного изображения по другому, чтобы легко увидеть различия в скриншотах.

Метаданные​

Рядом с вкладкой «Действия» вы найдете вкладку «Метаданные», которая покажет вам дополнительную информацию о вашем тесте, такую как браузер, размер области просмотра, продолжительность теста и многое другое.

Режим наблюдения​

Рядом с именем каждого теста в боковой панели вы найдете значок глаза. Нажатие на значок активирует режим наблюдения, который перезапустит тест при внесении в него изменений. Вы можете наблюдать за несколькими тестами одновременно, нажав значок глаза рядом с каждым из них или за всеми тестами, нажав значок глаза в верхней части боковой панели. Если вы используете VS Code, вы можете легко открыть свой тест, нажав на значок файла рядом со значком глаза. Это откроет ваш тест в VS Code прямо на строке кода, на которую вы щелкнули.

Docker & GitHub Codespaces​

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

npx playwright test --ui-host=0.0.0.0

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

Для статического порта вы можете передать флаг --ui-port:

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

примечание

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