Режим пользовательского интерфейса

Введение​

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

Открытие режима пользовательского интерфейса​

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

npx playwright test --ui

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

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

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

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

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

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

Действия​

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

Открытие снимка DOM в отдельном окне и его изучение​

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

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

Нажмите кнопку выбора локатора и наведите указатель на снимок DOM: при наведении будет подсвечиваться локатор каждого элемента. Нажмите элемент, чтобы открыть интерактивную среду для работы с локаторами. В ней можно изменить локатор и проверить, соответствует ли он каким-либо локаторам в снимке DOM. Когда результат вас устроит, нажмите кнопку копирования и вставьте локатор в тест.

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

При наведении указателя на действие теста соответствующая строка кода подсвечивается на панели исходного кода. В правом верхнем углу этого раздела находится кнопка «Открыть в VSCode». Нажмите её, чтобы открыть тест в VS Code на выбранной строке кода.

Вызов​

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

Журнал​

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

Ошибки​

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

Консоль​

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

Сеть​

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

Вложения​

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

Метаданные​

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

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

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

Docker и GitHub Codespaces​

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

npx playwright test --ui-host=0.0.0.0

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

Чтобы задать статический порт, можно передать флаг --ui-port:

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

примечание

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