Начало работы - VS Code

Введение​

Playwright Test был создан специально для удовлетворения потребностей тестирования конечных пользователей. 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 выполнит каждую строку теста, и по завершении вы увидите зеленую галочку рядом с блоком теста, а также время, затраченное на выполнение теста.

Запуск тестов и отображение браузеров​

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

Используйте кнопку Закрыть все браузеры для закрытия всех браузеров.

Просмотр и запуск всех тестов​

Просмотрите все тесты в боковой панели тестирования и разверните тесты, щелкнув по каждому тесту. Тесты, которые еще не выполнялись, не будут иметь зеленую галочку рядом с ними. Запустите все тесты, нажав на белую треугольную кнопку при наведении указателя мыши на тесты в боковой панели тестирования.

Запуск тестов на нескольких браузерах​

Первая секция в боковой панели Playwright - это секция проектов. Здесь вы можете увидеть все ваши проекты, как определено в файле конфигурации Playwright. По умолчанию при установке Playwright вам предоставляется 3 проекта: Chromium, Firefox и WebKit. Первый проект выбран по умолчанию.

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

Вы также можете индивидуально запустить тест в определенном проекте, нажав серую кнопку воспроизведения рядом с именем проекта теста.

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

Для лучшего опыта разработчика вы можете запустить свои тесты с опцией Показать просмотрщик трассировки.

Это откроет полную трассировку вашего теста, где вы сможете выполнить каждый шаг ваших тестов, изучить временную шкалу, исходный код и многое другое.

Чтобы узнать больше о просмотрщике трассировки, ознакомьтесь с нашим руководством Просмотрщик трассировки.

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

С помощью расширения VS Code вы можете отлаживать свои тесты прямо в VS Code, просматривать сообщения об ошибках, создавать точки останова и отлаживать тесты в режиме реального времени.

Сообщения об ошибках​

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

Отладка в реальном времени​

Вы можете отлаживать свой тест в режиме реального времени в VS Code. После запуска теста с отмеченной опцией Show Browser, щелкните любой из локаторов в VS Code, и он будет выделен в окне браузера. Playwright выделит его, если он существует, и покажет, если результатов несколько

Вы также можете изменить локаторы в VS Code, и Playwright отобразит изменения в окне браузера в реальном времени.

Запуск в режиме отладки​

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

Откроется окно браузера, тест запустится и приостановится в точке, где установлена точка останова. Вы можете выполнить шаги по тестам, приостановить тест и перезапустить тесты из меню VS Code.

Чтобы узнать больше об отладке, см. Отладка в Visual Studio Code.

Отладка с просмотрщиком трассировки​

Для лучшего опыта разработчика вы можете отлаживать тесты с опцией Показать просмотрщик трассировки.

Это откроет полную трассировку вашего теста, где вы сможете выполнить каждый шаг и увидеть, что произошло до и после действия. Вы также можете просмотреть моментальный снимок DOM, просмотреть журналы консоли, запросы к сети, исходный код и многое другое.

Чтобы узнать больше о просмотрщике трассировки, ознакомьтесь с нашим руководством Просмотрщик трассировки.

Генерация тестов​

CodeGen автоматически сгенерирует ваши тесты по мере выполнения действий в браузере и является отличным способом быстрого начала работы. Вид экрана для окна браузера задан определенной шириной и высотой. Ознакомьтесь с руководством по настройке, чтобы изменить вид экрана или эмулировать различные среды.

Запись нового теста​

Чтобы записать тест, нажмите кнопку Записать новый в боковой панели тестирования. Это создаст файл test-1.spec.ts и откроет окно браузера. В браузере перейдите к URL, который вы хотите протестировать, и начните нажимать по элементам. Playwright запишет ваши действия и сгенерирует код теста непосредственно в VS Code. Вы также можете сгенерировать утверждения, выбрав один из значков на панели инструментов, а затем щелкнув по элементу на странице, чтобы подтвердить его. Можно сгенерировать следующие утверждения:

• 'assert visibility' для подтверждения видимости элемента
• 'assert text' для подтверждения, что элемент содержит определенный текст
• 'assert value' для подтверждения, что элемент имеет определенное значение

Когда вы закончите запись, нажмите кнопку Отмена или закройте окно браузера. Затем вы можете изучить свой файл test-1.spec.ts и посмотреть сгенерированный тест.

Запись в курсоре​

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

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

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

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

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

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

Запуск тестов настройки​

Чтобы запустить тесты настройки, выберите проект настройки, как определено в вашем конфигурационном файле, из раздела проектов в боковой панели Playwright. Это даст вам доступ к тестам настройки в исследователе тестов.

Когда вы запускаете тест, который зависит от тестов настройки, тест настройки будет запущен первым. Каждый раз при запуске теста тест настройки будет выполняться заново.

Запуск тестов настройки только один раз​

Чтобы запустить тест настройки только один раз, снимите его выбор из раздела проектов в боковой панели Playwright. Тест настройки теперь удален из исследователя тестов. Когда вы запускаете тест, который зависит от теста настройки, он больше не будет запускать тест настройки, что значительно ускорит процесс и улучшит опыт разработчика.

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

Глобальная настройка выполняется при выполнении первого теста. Она выполняется только один раз и полезна для настройки базы данных или запуска сервера. Вы можете вручную запустить глобальную настройку, нажав опцию Run global setup в разделе Настройка в боковой панели Playwright. Глобальное завершение не выполняется по умолчанию; вам нужно вручную запустить его, нажав опцию Run global teardown.

Глобальная настройка будет выполняться повторно при отладке тестов, поскольку это гарантирует изолированную среду и отдельную настройку для теста.

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

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

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

Чтобы запустить все тесты из всех конфигураций, щелкните серую треугольную кнопку в верхней части исследователя тестов.

Чтобы выбрать конфигурационный файл для работы, просто переключайтесь между ними, щелкнув по имени конфигурационного файла в боковой панели Playwright. Теперь, когда вы используете инструменты, такие как «Записать тест», он будет записывать тест для выбранного конфигурационного файла.

Вы легко можете переключаться между конфигурациями, щелкнув по имени конфигурационного файла в боковой панели Playwright.

Что дальше​

• Написание тестов с использованием утверждений web-first, фикстур страниц и локаторов
• Запуск ваших тестов в CI
• Узнайте больше об инструменте просмотра трассировок