Режим UI
Введение
Режим UI позволяет исследовать, запускать и отлаживать тесты с возможностью путешествия во времени, включая режим наблюдения. Все тестовые файлы отображаются в боковой панели тестирования, что позволяет развернуть каждый файл и блок описания для индивидуального запуска, просмотра, наблюдения и отладки каждого теста. Фильтруйте тесты по имени, проектам (установленным в вашем файле playwright.config), @тегу или по статусу выполнения: пройдено, неудачно и пропущено. Просматривайте полный след ваших тестов и перемещайтесь назад и вперед по каждому действию, чтобы увидеть, что происходило на каждом этапе. Вы также можете вынести снимок DOM в отдельное окно для более удобной отладки.
Открытие режима UI
Чтобы открыть режим UI, выполните следующую команду в вашем терминале:
npx playwright test --ui
Запуск ваших тестов
После запуска режима UI вы увидите список всех ваших тестовых файлов. Вы можете запустить все ваши тесты, нажав на значок треугольника в боковой панели. Вы также можете запустить один тестовый файл, блок тестов или один тест, наведя курсор на имя и нажав на треугольник рядом с ним.
Фильтрация тестов
Фильтруйте тесты по тексту или @тегу, а также по пройденным, неудачным или пропущенным тестам. Вы также можете фильтровать по проектам, установленным в вашем файле playwright.config. Если вы используете зависимости проектов, убедитесь, что сначала запускаете ваши тесты настройки перед запуском тестов, которые от них зависят. Режим UI не учитывает тесты настройки, поэтому вам придется запускать их вручную.
Просмотр временной шкалы
В верхней части следа вы можете увидеть временную шкалу вашего теста с различными цветами, выделяющими навигацию и действия. Перемещайтесь назад и вперед, чтобы увидеть снимок изображения для каждого действия. Дважды щелкните по действию, чтобы увидеть временной диапазон для этого действия. Вы можете использовать ползунок на временной шкале, чтобы увеличить количество выбранных действий, и они будут показаны на вкладке Действия, а все журналы консоли и сети будут отфильтрованы, чтобы показывать только журналы для выбранных действий.
Действия
На вкладке Действия вы можете увидеть, какой локатор использовался для каждого действия и сколько времени заняло его выполнение. Наведите курсор на каждое действие вашего теста и визуально увидьте изменения в снимке DOM. Перемещайтесь назад и вперед во времени и щелкните по действию, чтобы исследовать и отладить. Используйте вкладки До и После, чтобы визуально увидеть, что произошло до и после действия.
Вынесение и исследование DOM
Вынесите снимок DOM в отдельное окно для более удобной отладки, нажав на значок вынесения над снимком DOM. Оттуда вы можете открыть DevTools браузера и исследовать HTML, CSS, консоль и т.д. Вернитесь в режим UI и щелкните по другому действию и вынесите его, чтобы легко сравнить два снимка рядом или отладить каждый по отдельности.
Выбор локатора
Нажмите на кнопку выбора локатора и наведите курсор на снимок DOM, чтобы увидеть локатор для каждого элемента, выделенного при наведении. Щелкните по элементу, чтобы добавить его в игровую площадку локаторов. Вы можете изменить локатор на игровой площадке и посмотреть, соответствует ли ваш измененный локатор каким-либо локаторам в снимке DOM. Когда вы будете удовлетворены локатором, вы можете использовать кнопку копирования, чтобы скопировать локатор и вставить его в ваш тест.
Исходный код
Когда вы наводите курсор на каждое действие вашего теста, строка кода для этого действия выделяется в панели исходного кода. Кнопка "Открыть в VSCode" находится в верхнем правом углу этого раздела. При нажатии на кнопку ваш тест откроется в VS Code прямо на строке кода, на которую вы нажали.
Вызов
Вкладка вызова показывает вам информацию о действии, такую как время выполнения, какой локатор использовался, был ли включен строгий режим и какой ключ использовался.
Журнал
Просмотрите полный журнал вашего теста, чтобы лучше понять, что Playwright делает за кулисами, например, прокручивает в вид, ожидает, пока элемент станет видимым, включенным и стабильным, и выполняет такие действия, как клик, заполнение, нажатие и т.д.
Ошибки
Если ваш тест не удался, вы увидите сообщения об ошибках для каждого теста на вкладке Ошибки. Временная шкала также покажет красную линию, подчеркивающую, где произошла ошибка. Вы также можете щелкнуть по вкладке исходного кода, чтобы увидеть, на какой строке исходного кода произошла ошибка.
Консоль
Просмотрите журналы консоли из браузера, а также из вашего теста. Различные значки отображаются, чтобы показать, пришел ли журнал консоли из браузера или из тестового файла.
Сеть
Вкладка Сеть показывает вам все сетевые запросы, которые были сделаны во время вашего теста. Вы можете сортировать по различным типам запросов, коду состояния, методу, запросу, типу контента, продолжительности и размеру. Щелкните по запросу, чтобы увидеть больше информации о нем, такую как заголовки запроса, заголовки ответа, тело запроса и тело ответа.
Вложения
Вкладка "Вложения" позволяет вам исследовать вложения. Если вы проводите тестирование визуальной регрессии, вы сможете сравнивать скриншоты, изучая разницу изображений, фактическое изображение и ожидаемое изображение. Когда вы щелкаете по ожидаемому изображению, вы можете использовать ползунок, чтобы перемещать одно изображение поверх другого, чтобы легко увидеть различия в ваших скриншотах.
Метаданные
Рядом с вкладкой Действия вы найдете вкладку Метаданные, которая покажет вам больше информации о вашем тесте, такую как браузер, размер окна просмотра, продолжительность теста и многое другое.
Режим наблюдения
Рядом с именем каждого теста в боковой панели вы найдете значок глаза. Нажав на значок, вы активируете режим наблюдения, который будет повторно запускать тест при внесении изменений в него. Вы можете наблюдать за несколькими тестами одновременно, нажав на значок глаза рядом с каждым из них или за всеми тестами, нажав на значок глаза в верхней части боковой панели.
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 порты по умолчанию доступны только с вашей учетной записи.