Генератор тестов

Введение​

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

Создание тестов в VS Code​

Установите расширение для VS Code и создавайте тесты прямо в VS Code. Расширение доступно в Marketplace для VS Code. Ознакомьтесь с нашим руководством по началу работы с VS Code.

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

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

Перейдите в браузере на URL-адрес, который хотите протестировать, и начните взаимодействовать со страницей, чтобы записать действия пользователя.

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

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

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

Запись с текущей позиции курсора​

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

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

В файле теста в VS Code вы увидите новые сгенерированные действия, добавленные в тест в позиции курсора.

Создание локаторов​

С помощью генератора тестов можно создавать локаторы.

• Нажмите кнопку Выбрать локатор на боковой панели Testing, а затем наведите указатель на элементы в окне браузера, чтобы увидеть локатор, выделенный под каждым элементом.
• Нажмите на нужный элемент — его локатор появится в поле Выбрать локатор в VS Code.
• Нажмите клавишу Enter, чтобы скопировать локатор в буфер обмена, а затем вставьте его в любое место кода. Чтобы отменить действие, нажмите клавишу Escape.

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

При запуске команды codegen откроются два окна: окно браузера, в котором вы взаимодействуете с сайтом, который хотите протестировать, и окно Playwright Inspector, в котором можно записать тесты, а затем скопировать их в редактор.

Запуск Codegen​

Запустите генератор тестов с помощью команды codegen, указав URL-адрес сайта, для которого нужно создать тесты. URL-адрес указывать необязательно: команду можно запустить без него, а затем ввести URL-адрес непосредственно в окне браузера.

npx playwright codegen demo.playwright.dev/todomvc

Запись теста​

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

С помощью генератора тестов можно записывать:

• Действия, например щелчок или ввод текста, просто взаимодействуя со страницей
• Проверки: нажмите один из значков на панели инструментов, а затем нажмите на элемент страницы, который нужно проверить. Можно выбрать:
  • 'assert visibility' чтобы проверить, что элемент виден
  • 'assert text' чтобы проверить, что элемент содержит определенный текст
  • 'assert value' чтобы проверить, что элемент имеет определенное значение

​

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

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

Создание локаторов​

С помощью генератора тестов можно создавать локаторы.

• Нажмите кнопку 'Record', чтобы остановить запись. Появится кнопка 'Pick Locator'.
• Нажмите кнопку 'Pick Locator', а затем наведите указатель на элементы в окне браузера, чтобы увидеть локатор, выделенный под каждым элементом.
• Чтобы выбрать локатор, нажмите на нужный элемент — код локатора появится в поле рядом с кнопкой «Выбрать локатор».
• В этом поле можно отредактировать локатор, чтобы уточнить его, или нажать кнопку копирования, а затем вставить его в код.

​

Эмуляция​

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

Эмуляция размера окна просмотра​

Playwright открывает окно браузера с заданными шириной и высотой области просмотра. Размер области просмотра не меняется в зависимости от ширины экрана, поскольку тесты необходимо запускать в одинаковых условиях. Используйте параметр --viewport, чтобы создавать тесты с другим размером окна просмотра.

npx playwright codegen --viewport-size="800,600" playwright.dev

​

Эмуляция устройств​

Записывайте скрипты и тесты с эмуляцией мобильного устройства с помощью параметра --device, который, помимо прочего, задает размер окна просмотра и user agent.

npx playwright codegen --device="iPhone 13" playwright.dev

​

Эмуляция цветовой схемы​

Записывайте скрипты и тесты с эмуляцией цветовой схемы с помощью параметра --color-scheme.

npx playwright codegen --color-scheme=dark playwright.dev

​

Эмуляция геолокации, языка и часового пояса​

Записывайте скрипты и тесты с эмуляцией часового пояса, языка и местоположения с помощью параметров --timezone, --geolocation и --lang. После загрузки страницы:

1. Примите файлы cookie
2. Нажмите кнопку определения местоположения в правом верхнем углу, чтобы проверить работу геолокации.

npx playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps

​

Сохранение состояния аутентификации​

Запустите codegen с параметром --save-storage, чтобы сохранить данные файлов cookie, localStorage и IndexedDB в конце сеанса. Это удобно, если нужно отдельно записать этап аутентификации и использовать его повторно при записи других тестов.

npx playwright codegen github.com/microsoft/playwright --save-storage=auth.json

​

Вход​

После прохождения аутентификации и закрытия браузера в auth.json будут сохранены данные состояния хранилища, которые затем можно повторно использовать в тестах.

Используйте auth.json только локально, поскольку он содержит конфиденциальную информацию. Добавьте его в .gitignore или удалите после завершения создания тестов.

Загрузка состояния аутентификации​

Запустите с параметром --load-storage, чтобы загрузить ранее сохраненное состояние хранилища из auth.json. При этом будут восстановлены все данные файлов cookie, localStorage и IndexedDB, благодаря чему большинство веб-приложений перейдут в состояние аутентификации без повторного входа. Это позволит продолжить создание тестов уже после входа.

npx playwright codegen --load-storage=auth.json github.com/microsoft/playwright

​

Использование существующего userDataDir​

Запустите codegen с параметром --user-data-dir, чтобы задать фиксированный каталог пользовательских данных для сеанса браузера. Если создать пользовательский каталог данных браузера, codegen будет использовать существующий профиль браузера и получит доступ к сохраненному в нем состоянию аутентификации.

предупреждение

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

npx playwright codegen --user-data-dir=/path/to/your/browser/data/ github.com/microsoft/playwright

Аутентификация с помощью учетных данных HTTP​

Запустите codegen с параметром --http-credentials, чтобы пройти базовую HTTP-аутентификацию. В отличие от учетных данных, встроенных в URL-адрес, они отправляются любому источнику, который запрашивает их во время записи, и включаются в сгенерированный код.

npx playwright codegen --http-credentials="username:password" example.com

Запись с использованием пользовательской конфигурации​

Если вы хотите использовать codegen в нестандартной конфигурации (например, использовать browserContext.route()), можно вызвать page.pause(), чтобы открыть отдельное окно с элементами управления codegen.

const { chromium } = require('@playwright/test');

(async () => {
  // Make sure to run headed.
  const browser = await chromium.launch({ headless: false });

  // Setup context however you like.
  const context = await browser.newContext({ /* pass any options */ });
  await context.route('**/*', route => route.continue());

  // Pause the page, and start recording manually.
  const page = await context.newPage();
  await page.pause();
})();