Начало работы - VS Code
Введение
Playwright Test был создан специально для удовлетворения потребностей в end-to-end тестировании. Playwright поддерживает все современные движки рендеринга, включая Chromium, WebKit и Firefox. Тестируйте на Windows, Linux и macOS, локально или на CI, в безголовом или обычном режиме с нативной эмуляцией мобильных устройств Google Chrome для Android и Mobile Safari.
Начните с установки Playwright и генерации теста, чтобы увидеть его в действии. В качестве альтернативы вы также можете начать и запустить свои тесты, используя CLI.
Установка
У Playwright есть расширение для VS Code, которое доступно при тестировании с Node.js. Установите его из магазина расширений VS Code или из вкладки расширений в VS Code.
После установки откройте панель команд и введите:
Install Playwright
Выберите Test: Install Playwright и выберите браузеры, на которых вы хотите запускать свои тесты. Эти параметры можно позже настроить в файле playwright.config. Вы также можете выбрать, хотите ли вы настроить GitHub Actions для запуска ваших тестов на CI.
Открытие боковой панели тестирования
Боковая панель тестирования может быть открыта нажатием на иконку тестирования в панели активности. Это даст вам доступ к обозревателю тестов, который покажет вам все тесты в вашем проекте, а также боковую панель Playwright, включающую проекты, настройки, инструменты и установку.
Запуск тестов
Вы можете запустить один тест, нажав на зеленый треугольник рядом с вашим блоком теста, чтобы запустить его. Playwright выполнит каждую строку теста, и когда он завершится, вы увидите зеленую галочку рядом с вашим блоком теста, а также время, затраченное на выполнение теста.
Запуск тестов и отображение браузеров
Вы также можете запустить свои тесты и показать браузеры, выбрав опцию Show Browsers на боковой панели тестирования. Затем, когда вы нажмете зеленый треугольник для запуска теста, браузер откроется, и вы визуально увидите, как он проходит через ваш тест. Оставьте эту опцию выбранной, если хотите, чтобы браузеры открывались для всех ваших тестов, или снимите ее, если предпочитаете, чтобы ваши тесты выполнялись в безголовом режиме без открытия браузера.
Используйте кнопку Close all browsers, чтобы закрыть все браузеры.
Просмотр и запуск всех тестов
Просмотрите все тесты на боковой панели тестирования и разверните тесты, нажав на каждый тест. Тесты, которые не были запущены, не будут иметь зеленой галочки рядом с ними. Запустите все тесты, нажав на белый треугольник, когда вы наводите курсор на тесты на боковой панели тестирования.
Запуск тестов на нескольких браузерах
Первая секция на боковой панели Playwright - это секция проектов. Здесь вы можете увидеть все ваши проекты, как они определены в вашем конфигурационном файле Playwright. Конфигурация по умолчанию при установке Playwright предоставляет вам 3 проекта: Chromium, Firefox и WebKit. Первый проект выбран по умолчанию.
Чтобы запустить тесты на нескольких проектах, выберите каждый проект, установив флажки рядом с именем проекта. Затем, когда вы запускаете свои тесты с боковой панели или нажимаете кнопку воспроизведения рядом с именем теста, тесты будут выполняться на всех выбранных проектах.
Вы также можете индивидуально запустить тест на конкретном проекте, нажав на серую кнопку воспроизведения рядом с именем проекта теста.
Запуск тестов с просмотрщиком трасс
Для лучшего опыта разработки вы можете запускать свои тесты с опцией Show Trace Viewer.
Это откроет полную трассу вашего теста, где вы можете пройти через каждое действие ваших тестов, исследовать временную шкалу, исходный код и многое другое.
Чтобы узнать больше о просмотрщике трасс, ознакомьтесь с нашим руководством по Trace Viewer.
Отладка тестов
С расширением VS Code вы можете отлаживать свои тесты прямо в VS Code, видеть сообщения об ошибках, создавать точки останова и в реальном времени отлаживать свои тесты.
Сообщения об ошибках
Если ваш тест не удался, VS Code покажет вам сообщения об ошибках прямо в редакторе, показывая, что ожидалось, что было получено, а также полный журнал вызовов.
Живая отладка
Вы можете отлаживать свой тест в реальном времени в VS Code. После запуска теста с опцией Show Browser нажмите на любой из локаторов в VS Code, и он будет выделен в окне браузера. Playwright выделит его, если он существует, и покажет вам, если есть более одного результата.
Вы также можете редактировать локаторы в VS Code, и Playwright покажет вам изменения в реальном времени в окне браузера.
Запуск в режиме отладки
Чтобы установить точку останова, нажмите рядом с номером строки, где вы хотите, чтобы точка останова была, пока не появится красная точка. Запустите тесты в режиме отладки, щелкнув правой кнопкой мыши на строке рядом с тестом, который вы хотите запустить.
Откроется окно браузера, и тест будет запущен и приостановлен в месте, где установлена точка останова. Вы можете пройти через тесты, приостановить тест и перезапустить тесты из меню в VS Code.
Чтобы узнать больше об отладке, ознакомьтесь с руководством по отладке в Visual Studio Code.
Отладка с просмотрщиком трасс
Для лучшего опыта разработки вы можете отлаживать свои тесты с опцией Show Trace Viewer.
Это откроет полную трассу вашего теста, где вы можете пройти через каждое действие и увидеть, что произошло до и после действия. Вы также можете исследовать снимок DOM, видеть журналы консоли, сетевые запросы, исходный код и многое другое.
Чтобы узнать больше о просмотрщике трасс, ознакомьтесь с нашим руководством по Trace Viewer.
Генерация тестов
CodeGen автоматически сгенерирует ваши тесты, когда вы выполняете действия в браузере, и это отличный способ быстро начать. Видовая область окна браузера установлена на определенную ширину и высоту. См. руководство по конфигурации, чтобы изменить видовую область или эмулировать различные среды.
Запись нового теста
Чтобы записать тест, нажмите на кнопку Record new на боковой панели тестирования. Это создаст файл test-1.spec.ts, а также откроет окно браузера. В браузере перейдите на URL, который вы хотите протестировать, и начните кликать. Playwright запишет ваши действия и сгенерирует код теста прямо в VS Code. Вы также можете генерировать утверждения, выбрав одну из иконок на панели инструментов, а затем кликнув на элемент на странице для утверждения. Могут быть сгенерированы следующие утверждения:
'assert visibility'для утверждения, что элемент видим'assert text'для утверждения, что элемент содержит определенный текст'assert value'для утверждения, что элемент имеет определенное значение
Когда вы закончите запись, нажмите кнопку cancel или закройте окно браузера. Затем вы можете просмотреть ваш файл test-1.spec.ts и увидеть ваш сгенерированный тест.
Запись с курсора
Чтобы записать с определенной точки в вашем тестовом файле, нажмите кнопку Record at cursor на боковой панели тестирования. Это сгенерирует действия в существующем тесте в текущей позиции курсора. Вы можете запустить тест, установить курсор в конец теста и продолжить генерацию теста.
Выбор локатора
Выберите локатор и скопируйте его в ваш тестовый файл, нажав кнопку Pick locator на боковой панели тестирования. Затем в браузере кликните на элемент, который вам нужен, и он появится в поле Pick locator в VS Code. Нажмите 'enter' на клавиатуре, чтобы скопировать локатор в буфер обмена, а затем вставьте его в любое место вашего кода. Или нажмите 'escape', если хотите отменить.
Playwright проанализирует вашу страницу и определит лучший локатор, отдавая приоритет ролям, тексту и тестовым id локаторам. Если генератор найдет несколько элементов, соответствующих локатору, он улучшит локатор, чтобы сделать его устойчивым и уникально идентифицировать целевой элемент, так что вам не придется беспокоиться о сбоях тестов из-за локаторов.
Зависимости проекта
Вы можете использовать зависимости проекта для запуска тестов, которые зависят от других тестов. Это полезно для настроечных тестов, таких как вход на сайт.
Запуск настроечных тестов
Чтобы запустить ваши настроечные тесты, выберите проект setup, как он определен в вашем конфигурационном файле, из секции проектов на боковой панели Playwright. Это даст вам доступ к настроечным тестам в обозревателе тестов.
Когда вы запускаете тест, который зависит от настроечных тестов, настроечный тест будет запущен первым. Каждый раз, когда вы запускаете тест, настроечный тест будет запускаться снова.
Запуск настроечных тестов только один раз
Чтобы запустить настроечный тест только один раз, снимите его выбор в секции проектов на боковой панели Playwright. Настроечный тест теперь удален из обозревателя тестов. Когда вы запускаете тест, который зависит от настроечного теста, он больше не будет запускать настроечный тест, что делает его намного быстрее и, следовательно, значительно улучшает опыт разработки.
Глобальная настройка
Глобальная настройка выполняется, когда вы запускаете свой первый тест. Она выполняется только один раз и полезна для настройки базы данных или запуска сервера. Вы можете вручную запустить глобальную настройку, нажав на опцию Run global setup в секции Setup на боковой панели Playwright. Глобальная очистка не выполняется по умолчанию; вам нужно вручную инициировать ее, нажав на опцию Run global teardown.
Глобальная настройка будет повторно выполняться, когда вы отлаживаете тесты, так как это обеспечивает изолированную среду и выделенную настройку для теста.
Несколько конфигураций
Если ваш проект содержит более одного конфигурационного файла Playwright, вы можете переключаться между ними, сначала нажав на значок шестеренки в правом верхнем углу боковой панели Playwright. Это покажет вам все конфигурационные файлы в вашем проекте. Выберите конфигурационные файлы, которые вы хотите использовать, установив флажок рядом с каждым из них и нажав на кнопку 'ok'.
Теперь у вас будет доступ ко всем вашим тестам в обозревателе тестов. Чтобы запустить тест, нажмите на серый треугольник рядом с именем файла или проекта.
Чтобы запустить все тесты из всех конфигураций, нажмите на серый треугольник в верхней части обозревателя тестов.
Чтобы выбрать конфигурационный файл для работы, просто переключайтесь между ними, нажимая на имя конфигурационного файла на боковой панели Playwright. Теперь, когда вы используете инструменты, такие как запись теста, он будет записывать тест для выбранного конфигурационного файла.
Вы можете легко переключаться между конфигурациями, нажимая на имя конфигурационного файла на боковой панели Playwright.