VS Code

Введение​

Расширение Playwright для VS Code позволяет использовать возможности Playwright Test прямо в редакторе: запускать, отлаживать и создавать тесты с помощью удобного интерфейса. В этом руководстве описано, как установить расширение и использовать его основные функции, чтобы повысить эффективность сквозного тестирования.

Предварительные требования​

Перед началом убедитесь, что установлены следующие компоненты:

• Node.js (рекомендуется версия LTS)
• Visual Studio Code

Начало работы​

Установка и настройка​

1. Установите расширение: Откройте представление «Расширения» в VS Code (Ctrl+Shift+X или Cmd+Shift+X) и выполните поиск по запросу «Playwright». Установите официальное расширение от Microsoft.

1. Установите Playwright: После установки расширения откройте палитру команд (Ctrl+Shift+P или Cmd+Shift+P) и выполните команду Test: Install Playwright.

3. Выберите браузеры: Выберите браузеры для тестирования (например, Chromium, Firefox, WebKit). Также можно добавить рабочий процесс GitHub Actions для запуска тестов в CI. Эти параметры можно изменить позже в файле playwright.config.ts.

Открытие боковой панели тестирования​

Нажмите значок тестирования на панели действий VS Code, чтобы открыть обозреватель тестов. Здесь вы найдете свои тесты, а также боковую панель Playwright для управления проектами, инструментами и настройками.

Основные функции​

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

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

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

• Запуск в нескольких браузерах: На боковой панели Playwright установите флажки у проектов (браузеров), в которых нужно выполнить тестирование. В Playwright проекты представляют собой разные конфигурации браузеров: каждый проект обычно соответствует определенному браузеру (например, Chromium, Firefox или WebKit) и имеет собственные настройки, такие как размер области просмотра, эмуляция устройства и другие параметры, специфичные для браузера. При запуске теста он будет выполнен во всех выбранных проектах, что позволит проверить работу приложения в разных браузерах и конфигурациях.

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

Отладка тестов​

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

• Использование точек останова: Установите точку останова, щелкнув на поле рядом с номером строки. Щелкните тест правой кнопкой мыши и выберите Debug Test. Выполнение теста приостановится на точке останова, и вы сможете проверить переменные и пошагово просмотреть код.

• Отладка в реальном времени: Если включен параметр Показать браузеры, щелкните локатор в коде. Playwright выделит соответствующий элемент в браузере, что позволит легко проверить локаторы.

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

• Исправление с помощью ИИ: Если тест завершается с ошибкой, нажмите значок искры рядом с сообщением об ошибке, чтобы получить от Copilot предложение по исправлению на основе ИИ. Copilot анализирует ошибку и предлагает изменить код, чтобы устранить проблему.

• Отладка с помощью Trace Viewer: Для полноценной отладки включите параметр Показать Trace Viewer на боковой панели Playwright. По завершении теста автоматически откроется подробная трассировка с полной временной шкалой выполнения. Просмотрщик трассировки особенно полезен для:
• Пошагового анализа: просмотра каждого действия теста с точными временными метками
• Проверки DOM: просмотра снимков DOM в любой момент выполнения теста, чтобы увидеть, как именно выглядела страница
• Мониторинга сети: изучения всех сетевых запросов и ответов, полученных во время теста
• Журналов консоли: просмотра всех сообщений и ошибок браузера
• Сопоставления с исходным кодом: перехода непосредственно к исходному коду, который выполнил каждое действие
• Визуальной отладки: просмотра снимков экрана и понимания того, что пользователь видел на каждом шаге

Просмотрщик трассировки особенно полезен при отладке нестабильных тестов и анализе сложных взаимодействий с пользователем.

Подробнее см. в нашем руководстве по Trace Viewer.

Создание тестов с помощью CodeGen​

CodeGen — это мощный инструмент Playwright для создания тестов. Он автоматически генерирует код тестов, записывая ваши действия на веб-странице. Вместо того чтобы писать тесты с нуля, вы можете просто перемещаться по приложению, а CodeGen будет записывать ваши действия и преобразовывать их в надежный код теста с подходящими локаторами и проверками.

• Запись нового теста: Нажмите Записать новый на боковой панели. Откроется окно браузера. По мере взаимодействия со страницей Playwright будет автоматически создавать код теста. Также можно создавать проверки с помощью панели инструментов записи.

• Запись в текущей позиции курсора: Поместите курсор внутрь существующего теста и нажмите Записать в позиции курсора, чтобы добавить новые действия в указанное место.
• Выбор локатора: Используйте инструмент Выбрать локатор, чтобы щелкнуть любой элемент в открытом браузере. Playwright определит наиболее подходящий локатор и скопирует его в буфер обмена, откуда его можно вставить в код.

Подробнее см. в нашем руководстве по CodeGen.

Дополнительные возможности​

Зависимости проектов​

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

Подробнее см. в нашем руководстве по зависимостям проектов.

Глобальная настройка​

Для задач, которые нужно выполнить только один раз перед всеми тестами (например, для заполнения базы данных), используйте глобальную настройку. Запустить глобальную настройку и очистку вручную можно на боковой панели Playwright.

Несколько конфигураций​

Если у вас несколько файлов playwright.config.ts, переключаться между ними можно с помощью значка шестеренки на боковой панели Playwright. Это позволяет легко работать с разными наборами тестов или средами.

Краткий справочник​

Что дальше​

• Пишите тесты с помощью проверок web-first, фикстур страниц и локаторов
• Запускайте тесты в CI
• Подробнее о Trace Viewer