Упражнение. Использование playwright в Visual Studio Code
В предыдущем разделе описаны основные понятия, связанные с конфигурацией тестов playwright и спецификацией тестирования playwright, но мы использовали командную строку playwright (CLI) для выполнения наших тестов и просмотра отчетов.
Что делать, если бы мы могли сделать это в нашей среде Visual Studio Code и иметь более визуальный процесс взаимодействия для разработки, запуска и отладки, наших тестов?
С помощью расширения Playwright Test for Visual Studio Code вы получите превосходный интерфейс разработчика и уникальные инструменты, которые могут сделать его предпочитаемым способом взаимодействия со средством выполнения тестов Playwright. Давайте прыгаем и поберем экскурсию.
Начало работы
В документации по Playwright содержится подробное руководство с видеопрохождением, которое мы рекомендуем смотреть в удобное для вас время. На этом занятии мы пытаемся ознакомиться с подмножеством этих упражнений, чтобы ознакомиться с использованием.
]
Установка расширения Playwright
Установите расширение из Visual Studio Code Marketplace. После установки вы увидите значок колбы в левой части окна Visual Studio Code, как показано на снимке экрана. Обратите внимание, как расширение автоматически обнаруживает и собирает спецификации тестирования в проекте.
Запуск теста (в безголовом режиме)
Чтобы запускать тесты в фоновом режиме (без окна браузера), убедитесь, что опции Показать браузер и Показать средство просмотра трассировки отключены. Нажмите зеленую кнопку воспроизведения в строке 3 файла example.spec.ts , чтобы запустить первый тест. Вы также можете выбрать серые кнопки воспроизведения на боковой панели обозревателя тестов, чтобы выполнить все тесты в файле или запустить определенный тест.
Как только вы запустите тесты, откроется окно, в котором можно просмотреть всю историю выполнения тестов. Вы также можете выполнить детализацию теста и выбрать команду "Выполнить тест ", чтобы повторно запустить этот конкретный тест.
Отображение браузера (с заголовком)
Если вы хотите запустить в режиме управления , то есть запустить тесты с открытым окном браузера, установите флажок "Показать браузер " перед выполнением тестов.
Playwright — это очень быстрый пользователь, который может затруднить отслеживание того, что происходит в тесте при использовании браузера Show. Для отладки рекомендуется использовать параметр "Показать средство просмотра трассировки ".
Показать средство просмотра трассировки (с заголовком)
Установите флажок "Показать средство просмотра трассировки " и нажмите зеленую кнопку воспроизведения для второго теста. Откроется окно просмотра трассировки, в котором предоставляется визуальное представление выполнения теста.
В верхней части окна отобразится временная шкала теста, на которую можно навести указатель мыши, чтобы просмотреть состояние браузера. Чтобы выбрать определенный диапазон времени для фокусировки, выберите и перетащите временную шкалу.
На левой боковой панели можно увидеть действия, выполненные во время выполнения теста. Если выбрать действие locator.click , вы увидите красную точку на кнопке "Начало работы " в моментальном снимке DOM.
Затем выберите утверждение expect.toBeVisible , и вы увидите, что наш моментальный снимок DOM изменен, чтобы отобразить страницу установки с выделением заголовка, который мы утверждаем. Над моментальным снимком DOM можно выбрать кнопки "До " и " После ", чтобы увидеть состояние DOM до и после выполнения действия.
Вы можете открыть снимок DOM в отдельном окне, выбрав значок открытия в правом верхнем углу. Это может быть полезно, если вы хотите проверить DOM во время отладки теста.
Говоря об отладке, вы также можете выбрать локатор из моментального снимка DOM, нажав кнопку «Выбрать локатор» на нижней панели. Затем наведите указатель мыши на элементы в снимке DOM, чтобы увидеть локатор для этого элемента. При выборе элемента он добавляется в поле Локатор в нижней части средства просмотра трассы, где его можно отредактировать перед копированием в буфер обмена.
Вы можете самостоятельно изучить остальные функции средства просмотра трассировки, такие, как вкладки вызов, консоль, сеть и исходники.
Отладка тестов
Для отладки рекомендуется запускать тесты с опцией "Показать просмотрщик трассировки" и использовать трассу вашего теста, чтобы лучше понять, что происходит.
Однако с расширением Visual Studio Code можно также выполнять отладку тестов прямо в Visual Studio Code, просматривать сообщения об ошибках, создавать точки останова и выполнять отладку тестов в реальном времени. Узнайте больше из документации или просмотрите следующее видео, чтобы получить представление о поддержке отладки.
Создание тестов
CodeGen создает тесты для вас при выполнении действий в браузере, что делает его самым простым способом начать разработку тестов для сложных рабочих процессов.
Чтобы создать тест, нажмите кнопку "Записать новую" на боковой панели тестирования в Visual Studio Code. Откроется окно браузера, в котором можно выполнять действия, которые будут записаны и преобразованы в тест. Вы также заметите, что новый файл в папке tests создается с помощью созданного теста.
Введите URL-адрес в окне браузера и начните выполнять такие действия, как пользователь. Вы увидите действия, записанные в тестовом файле в VS Code.
Давайте воспроизведем простой тест, который мы провели ранее, перейдя на веб-сайт Playwright и нажав кнопку Начало работы. Затем можно выбрать значок «Проверка видимости» на панели инструментов Codegen и выбрать заголовок Установка, чтобы подтвердить, что он виден.
Дополнительные сведения о создании тестов см. в следующем видео.
Дальнейшие шаги
В этом разделе вы узнали, как использовать расширение Visual Studio Code для поиска и выполнения тестов, а также как работать с средством просмотра трассировки, чтобы получить более визуальный интерфейс для отладки тестов.
Вы также узнали, как Visual Studio Code предоставляет более широкие средства для создания тестов с помощью функций Запись нового теста, Выбор локатора и Запись по курсору. Теперь пришло время применить знания основ Playwright в рамках проекта под руководством для создания спецификации комплексного тестирования для нашего примерного приложения.