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

Введение​

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете генерировать локаторы с помощью генератора тестов.

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

Генерация тестов с помощью инспектора Playwright​

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

Запуск Codegen​

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

npx playwright codegen demo.playwright.dev/todomvc

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

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

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

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

​

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

Используйте кнопку очистить, чтобы очистить код и начать запись заново. По завершении закройте окно инспектора Playwright или остановите команду в терминале.

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

Вы можете генерировать локаторы с помощью генератора тестов.

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

​

Эмуляция​

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

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

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

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

​

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

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

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

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

​

Вход в систему​

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

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

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

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

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

​

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

Если вы хотите использовать 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();
})();