- Что это
- Расширение VS Code
- Кастомизация и отладка
- Inspector
- Окружения и Codegen
- Статус аутентификации
Разработка и сопровождение сложных тестовых сценариев требует предельной точности, что может замедлять рабочий процесс, особенно когда количество тестов увеличивается с ростом объема проекта. Неопытные тестировщики могут испытывать проблемы с автоматизацией, и даже опытным тестировщикам сложно найти баланс между скоростью и точностью.
Инструменты автоматизации, такие как Playwright, помогают записывать тесты с помощью простого интерфейса, который автоматически генерирует код, тем самым ускоряя процесс тестирования. Recorder — функция записи в Playwright, которая упрощает создание тестов и автоматически генерирует сценарии, которые можно настраивать для гибкости и масштабируемости.
Что собой представляет Recorder
Это инструмент, который позволяет записывать взаимодействия пользователя (тестировщика) с веб-приложениями. Он генерирует код на основе выполненных действий, помогая как начинающим, так и опытным разработчикам быстро создавать тестовые сценарии. Сгенерированный код реюзабельный и совместим с многими браузерами, что упрощает автоматизацию тестирования веб-приложений.
Этот инструмент предлагает два способа записи тестов, ориентированных на различные рабочие процессы и предпочтения:
- Запись тестов с помощью расширения VS Code: Расширение Playwright Visual Studio Code позволяет пользователям записывать и редактировать тесты, не покидая IDE. Это позволяет разработчикам записывать тесты во время создания или сопровождения своего кода, сохраняя весь процесс в своей среде разработки.
- Запись тестов с помощью Playwright Inspector: Инспектор Playwright — это инструмент, предназначенный для интерактивной записи тестов в процессе выполнения сессии в Playwright. Он обеспечивает интуитивно понятный вид тестируемого приложения при записи таких взаимодействий, как нажатия, ввод форм и навигация.
Запись действий в Playwright с помощью расширения VS Code
Вы можете записывать тесты с помощью расширения Playwright для VS Code, которое упрощает создание тестов, позволяя беспрепятственно записывать, редактировать и выполнять их в IDE.
Чтобы лучше понять, как записывать тесты с помощью расширения Playwright, рассмотрим распространенный сценарий тестирования, записав поток поиска и оформления заказа на сайте LambdaTest eCommerce Playground.
Сценарий:
- Перейти на страницу URL.
- Нажать «Магазин по категориям».
- Выбрать категорию «Ноутбуки и планшеты».
- Добавить продукт «HTC Touch HD» в корзину.
- Проверить, видно ли всплывающее окно «Добавить в корзину».
Ниже приведена реализация вышеуказанного сценария.
Необходимые условия: Убедитесь, что Playwright установлен в вашем проекте и что папка проекта открыта в VS Code. Для получения подробных инструкций по установке Playwright, следуйте этому руководству по установке Playwright.
После того как все необходимые условия для работы с Playwright соблюдены, вы можете выполнить следующие шаги, чтобы начать работу с рекордером.
Шаг 1: Сначала необходимо установить расширение Playwright из VS Code Marketplace. Это расширение предоставляет вам специфические для Playwright инструменты, такие как запись и выполнение тестов, полностью интегрированные в рабочее пространство разработки.
Шаг 2: После установки расширения откройте проект в VS Code и перейдите к IDE-представлению TEST EXPLORER для управления и выполнения тестов. Чтобы записать тест, нажмите кнопку Record new на боковой панели тестирования.
Это действие создаст файл test-1.spec.ts и откроет окно браузера. Окно браузера будет записывать ваше взаимодействие с сайтом, фиксируя такие действия, как клики, ввод формы и навигацию. Затем в реальном времени в тестовом файле будет сгенерирован соответствующий тестовый сценарий.
В браузере перейдите на URL-адрес, который вы хотите протестировать, и начните кликать по нему, чтобы записать действия пользователя в соответствии с тестовым сценарием.
Шаг 3: Чтобы проверить поведение пользователя, используйте панель инструментов Recorder для записи утверждений (ассертов) во время записи. Это позволит легко добавлять проверки видимости, текстового содержимого и значений непосредственно в процессе создания теста. Например, вы можете добавить утверждение, проверяющее, видно ли всплывающее окно «Добавить в корзину» после нажатия кнопки «Добавить в корзину«.
Шаг 4: После создания тестового сценария Playwright автоматически сгенерирует его на основе ваших действий. Сохраните сгенерированный сценарий в виде файла .spec.ts (например, addToCart.spec.ts).
Вот пример того, как может выглядеть сгенерированный код:
Шаг 5: Чтобы запустить сценарий, перейдите на панель TEST EXPLORER и нажмите кнопку воспроизведения рядом с файлом теста или спецификации, который вы хотите запустить. Тест будет выполняться в «безголовом» режиме (без видимого браузера), а результаты будут отображаться в TEST EXPLORER.
Если вы хотите запустить тест с видимым браузером, вы можете включить флажок Show browser или Show trace viewer, а затем повторно запустить тесты с помощью кнопки Play рядом с файлом теста.
Шаг 6: Откройте терминал в VS Code и выполните следующую команду для выполнения теста в безголовом режиме (т. е. без открытия видимого окна браузера):
npx playwright test addToCart.spec.ts
Если вы хотите запустить тест с видимым окном браузера (в нормальном режиме), вместо этого можно использовать следующую команду:
npx playwright test addToCart.spec.ts --headed
Шаг 7: Если тест завершился неудачно, появится автоматическая страница репорта, на которой будет отображена информация об упавших тестах. Чтобы просмотреть отчет о последнем выполнении теста, выполните следующую команду в терминале:
npx playwright show-report
Кастомизация и отладка с помощью Playwright Recorder
После записи и просмотра тестового сценария вы можете доработать его, добавив утверждения или кастомную логику. Playwright предлагает функции записи утверждений и генерации локаторов, что упрощает настройку и отладку сценариев.
Генерация локаторов:
Recorder упрощает процесс генерации локаторов с помощью опции Pick locator.
Шаг 1: Нажмите кнопку Pick locator на боковой панели, затем наведите курсор на элементы в окне браузера. Локатор будет выделен под каждым элементом.
Шаг 2: Щелкните нужный элемент, и локатор появится в поле Pick locator в VS Code.
Шаг 3: Нажмите Enter, чтобы скопировать локатор в буфер обмена и вставить его в код, или нажмите Escape, чтобы отменить действие.
Запись теста у курсора:
Чтобы записать дополнительные действия в определенной точке теста, выполните следующие действия.
Шаг 1: Переместите курсор в файле теста в то место, где вы хотите записать новые действия.
Шаг 2: Нажмите кнопку Запись по курсору (Record at cursor) на боковой панели. Если окно браузера не открыто, запустите тест с включенным режимом «Показать браузер», а затем нажмите кнопку «Запись у курсора».
Шаг 3: В окне браузера выполните необходимые действия.
Шаг 4: Записанные действия автоматически появятся возле позиции курсора в вашем тестовом файле в VS Code.
Запись через Inspector
Инспектор Playwright — это еще один мощный инструмент, который наблюдает за вашим взаимодействием с веб-сайтом и генерирует тесты. Выполнив команду codegen, Playwright открывает два окна, расположенных рядом друг с другом:
- Окно браузера: В нем вы взаимодействуете с веб-сайтом.
- Окно Инспектора Playwright: Это окно записывает ваши действия в режиме реального времени, генерируя код для Playwright, который вы можете скопировать и использовать в своих тестовых файлах.
Команда codegen упрощает процесс создания сценариев, фиксируя взаимодействия пользователя и преобразуя их в исполняемый код.
Чтобы записать тестовый сценарий с помощью команды codegen, рассмотрим подробный пример, включающий множество взаимодействий и ассертов. Сценарий имитирует поиск продукта, применение фильтра, добавление продукта в корзину и проверку процесса оформления заказа.
Сценарий:
- Перейти на домашнюю страницу.
- Ввести «iPod» в строку поиска и нажать клавишу Enter.
- Задать диапазон цен, чтобы сузить результаты.
- Нажать на товар, соответствующий критериям.
- Добавить товар в корзину.
- Убедиться, что цена товара совпадает с суммой в корзине.
- Перейти к оформлению заказа.
Ниже приведены шаги по реализации вышеописанного тестового сценария.
Шаг 1: Откройте терминал и выполните следующую команду:
npx playwright codegen https://ecommerce-playground.lambdatest.io
Откроются два окна:
- Окно браузера, в котором вы можете взаимодействовать с сайтом.
- Инспектор Playwright отслеживает ваши действия и генерирует код в режиме реального времени.
Шаг 2: Взаимодействуйте с браузером, выполняя шаги тестового сценария (например, навигация, поиск товара, применение фильтров и добавление в корзину). Инспектор автоматически запишет и преобразует эти действия в код Playwright.
Шаг 3: После завершения сценария просмотрите код, сгенерированный Инспектором. Внесите необходимые изменения, чтобы повысить точность и читабельность сценария.
Вот пример того, как может выглядеть сценарий с добавленными ассертами:
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
// Navigate to the LambdaTest e-commerce playground site
await page.goto('https://ecommerce-playground.lambdatest.io/');
// Locate and click the search textbox to enter search criteria
await page.getByRole('textbox', { name: 'Search For Products' }).click();
// Type "ipod" in the search textbox to look for the product
await page.getByRole('textbox', { name: 'Search For Products' }).fill('ipod');
// Click the search button to initiate the product search
await page.getByRole('button', { name: 'Search' }).click();
// Set the filter field in the filter panel
await page.locator('#mz-filter-panel-0-0').getByPlaceholder('Minimum Price').click();
await page.locator('#mz-filter-panel-0-0').getByPlaceholder('Minimum Price').fill('100');
await page.locator('#mz-filter-panel-0-0').getByPlaceholder('Maximum Price').click();
await page.locator('#mz-filter-panel-0-0').getByPlaceholder('Maximum Price').fill('150');
await page.locator('#mz-filter-panel-0-0').getByPlaceholder('Maximum Price').press('Enter');
// Click on the iPod Classic product from the search results
await page.locator('#mz-product-grid-image-80-212469').click();
// Click the "Add to Cart" button to add the iPod Classic to the shopping cart
await page.getByRole('button', { name: 'Add to Cart' }).click();
// Assert that a notification is visible, indicating the product was added to the cart successfully
await expect(page.locator('#notification-box-top')).toBeVisible();
// Click on the "Checkout" link to proceed to the checkout page
await page.getByRole('link', { name: 'Checkout ' }).click();
// Verify that the iPod Classic is listed in the cart on the checkout page
await expect(page.locator('#checkout-cart').getByText('iPod Classic')).toBeVisible();
// Confirm that the price displayed for the iPod Classic is $122.00
await expect(page.getByRole('cell', { name: '$122.00' }).nth(2)).toBeVisible();
})
Шаг 4: Усовершенствуйте сценарий, добавив несколько утверждений для проверки ключевых элементов и условий, например:
- Подтверждение об успешном добавлении товара в корзину.
- Валидация итоговой корзины для подтверждения соответствия цены.
- Верификация деталей оформления заказа для подтверждения информации о доставке и суммы заказа.
Чтобы проверить, видно ли название выбранного продукта на странице товара, добавьте:
await expect(page.locator('.product-title')).toHaveText('ipod');
Вы также можете добавить утверждения для других элементов, таких как изображения товаров, описания или рейтинги.
Шаг 5: Удовлетворившись записанным и отредактированным сценарием теста, сохраните его в виде файла .spec.ts. Например, назовите его: productFilterCheckout.spec.ts
Чтобы выполнить тест, выполните следующую команду в терминале:
npx playwright test productFilterCheckout.spec.ts
Эмуляция окружений с помощью Codegen
Эмуляция — еще одна мощная функция Playwright, которая воспроизводит различные окружения, такие как устройства, вьюпорты (экраны), цветовые схемы и настройки геолокации. Она обеспечивает бесперебойную работу приложений в различных пользовательских условиях, позволяя тестировщикам записывать реалистичные пользовательские сценарии и генерировать сценарии, отражающие реальное поведение приложения.
Эмуляция размера вьюпорта
По умолчанию Playwright открывает окно браузера с заданным размером области просмотра (Viewport Size). Чтобы протестировать приложение при определенных размерах области просмотра (например, на меньших или больших экранах), используйте команду —viewport-size в codegen.
Чтобы сгенерировать тесты с заданным размером области просмотра, выполните следующую команду:
npx playwright codegen --viewport-size=800,600 https://ecommerce-playground.lambdatest.io/
В приведенной выше команде:
- —viewport-size=800,600: устанавливает ширину в 800 пикселей и высоту в 600 пикселей.
- Полезно для имитации настольных компьютеров с маленьким экраном или больших планшетов в альбомной ориентации.
Эмуляция устройств
Playwright позволяет эмулировать реальные устройства, такие как смартфоны или планшеты, с помощью команды —device. Для эмуляции iPhone 13 выполните следующую команду:
npx playwright codegen --device="iPhone 13" https://ecommerce-playground.lambdatest.io/
В приведенной выше команде:
- —device=»iPhone 13″ устанавливает размер области просмотра, пользовательский агент и характеристики устройства в соответствии с iPhone 13.
Эмуляция цветовой схемы
Некоторые веб-сайты предлагают различные темы, основанные на системных предпочтениях пользователя, такие как светлый и темный режим. Playwright поддерживает эмуляцию этих цветовых схем во время генерации тестов с помощью команды —color-scheme.
Чтобы сэмулировать светлый режим, выполните команду, приведенную ниже:
npx playwright codegen --color-scheme=light https://playwright.dev
В приведенной выше команде:
- —color-scheme=light — она инструктирует Playwright эмулировать светлую цветовую схему для сессии браузера.
Эмуляция геолокации, языка и часового пояса
Чтобы протестировать особенности локализации, например язык или поведение, основанное на времени (time-based behavior), можно воспользоваться опциями Playwright для эмуляции геолокации, языка и часового пояса. Это особенно полезно для приложений, отображающих информацию о местоположении или чувствительный к времени контент.
Чтобы эмулировать геолокацию, язык и часовой пояс, выполните приведенную ниже команду:
npx playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" https://bing.com/maps
В приведенной выше команде:
- —timezone=»Europe/Rome»: Устанавливает эмулируемый часовой пояс на Рим, Италия.
- —geolocation=»41.890221,12.492348″: Эмулирует местоположение в Риме на основе широты и долготы.
- —lang=»it-IT»: Устанавливает итальянский язык.
Поиск статуса аутентификации
Playwright позволяет сохранять и повторно использовать аутентифицированное состояние сессии, что особенно полезно для сценариев тестирования, требующих ввода учетных данных. С помощью команд —save-storage и —load-storage можно один раз записать шаг аутентификации и повторно использовать его в последующих тестах.
Для этого необходимо выполнить следующие шаги:
Шаг 1. Чтобы сохранить cookies, localStorage и данные сессии, используйте команду —save-storage. Эта команда запускает Playwright в режиме генерации кода, записывая ваши действия и сохраняя данные сессии в конце.
npx playwright codegen github.com/microsoft/playwright --save-storage=auth.json
Шаг 2: Чтобы запустить тесты из аутентифицированного состояния, используйте команду —load-storage. Это загрузит сохраненные данные сессии, включая cookies и localStorage, что позволит вам обойти вход в систему и продолжить тестирование в качестве аутентифицированного пользователя.
npx playwright codegen --save-storage=auth.tson ecommerce-playground.lambdatest.io/
Восстановив сессию, вы сможете напрямую получить доступ к страницам, требующим входа в систему, сэкономив время и обеспечив беспрепятственную генерацию тестов в залогиненном состоянии.
Совет: Поскольку файл auth.json содержит конфиденциальную информацию, используйте его только локально. Обязательно добавьте его в .gitignore или удалите после завершения работы.
