Начало работы с UI-тестированием в Playwright

UI-тестирование является критически важной частью frontend-разработки, обеспечивая правильную работу ваших веб-приложений с точки зрения пользователя. Playwright, фреймворк автоматизации с открытым исходным кодом от Microsoft, зарекомендовал себя как мощный инструмент для UI-тестирования, который одновременно удобен для разработчиков и надежен. Если вы слышали о Playwright, но еще не пробовали его, это руководство покажет вам, как он работает и подходит ли он для вашего текущего рабочего процесса.
Ключевые выводы
- Playwright обеспечивает кроссбраузерное тестирование с единым API для Chrome, Firefox и Safari
- Автоматическое ожидание и изолированные тестовые среды уменьшают количество нестабильных тестов
- Встроенные инструменты отладки, такие как Inspector и Trace Viewer, упрощают устранение неполадок
- Поддерживает тестирование адаптивного дизайна, визуальные сравнения и компонентное тестирование
- Легко интегрируется с CI/CD пайплайнами для автоматизированного тестирования
Что такое Playwright и зачем использовать его для UI-тестирования?
Playwright — это фреймворк для end-to-end тестирования, который позволяет писать тесты, работающие во всех современных браузерах (Chrome, Firefox, Safari) с использованием единого API. В отличие от других инструментов тестирования, Playwright был специально разработан для современных веб-приложений с функциями, которые делают UI-тестирование более надежным и менее нестабильным.
Ключевые преимущества для UI-тестирования включают:
- Автоматическое ожидание: Playwright автоматически ожидает, пока элементы станут доступными для взаимодействия, прежде чем выполнять операции
- Изоляция: Каждый тест выполняется в свежем контексте браузера, предотвращая взаимное влияние тестов
- Кроссбраузерная поддержка: Пишите один раз, тестируйте везде с одним и тем же кодом
- Возможности современного веб: Обрабатывает Shadow DOM, iframe и современные веб-компоненты
- Мощные инструменты: Встроенные инструменты отладки, такие как Playwright Inspector и Trace Viewer
Настройка Playwright для UI-тестирования
Начать работу с Playwright довольно просто. Вам понадобится установленный Node.js, затем вы можете настроить новый проект:
# Create a new directory for your project
mkdir playwright-ui-testing
cd playwright-ui-testing
# Initialize a new Playwright project
npm init playwright@latest
Во время установки вам будет предложено ответить на несколько вопросов. Для UI-тестирования вы можете выбрать TypeScript, добавить workflow для GitHub Actions и установить браузеры при появлении запроса.
Установка создает базовую структуру проекта с:
playwright.config.ts
: Файл конфигурации для ваших тестов- Директория
tests
: Где будут располагаться ваши тестовые файлы - Директория
.github
: Конфигурация CI, если вы выбрали GitHub Actions
Написание вашего первого UI-теста
Давайте напишем простой UI-тест, который проверяет правильное отображение карточки товара на сайте электронной коммерции. Создайте новый файл с именем product-ui.spec.ts
в директории tests
:
import { test, expect } from '@playwright/test';
test('product card displays correctly', async ({ page }) => {
// Navigate to the page
await page.goto('https://demo-store.playwright.dev');
// Find a product card
const productCard = page.locator('.product-card').first();
// Verify the product card is visible
await expect(productCard).toBeVisible();
// Verify it contains expected elements
await expect(productCard.locator('.product-title')).toBeVisible();
await expect(productCard.locator('.product-price')).toBeVisible();
await expect(productCard.locator('button.add-to-cart')).toBeEnabled();
// Extract and verify product information
const title = await productCard.locator('.product-title').textContent();
console.log(`Found product: ${title}`);
});
Этот тест:
- Открывает демо-сайт магазина
- Находит карточку товара
- Проверяет, что ключевые элементы видимы и доступны
- Извлекает название товара (показывая, как можно извлекать информацию)
Запуск UI-тестов
Для запуска вашего теста используйте CLI Playwright:
npx playwright test product-ui.spec.ts
По умолчанию Playwright запускает тесты в headless режиме. Чтобы увидеть браузер в действии:
npx playwright test product-ui.spec.ts --headed
Для запуска тестов в конкретном браузере:
npx playwright test product-ui.spec.ts --project=chromium
Продвинутое UI-тестирование с Playwright
Тестирование адаптивного дизайна
Playwright упрощает тестирование вашего UI на разных размерах экрана:
test('product card is responsive', async ({ page }) => {
// Test on mobile viewport
await page.setViewportSize({ width: 375, height: 667 });
await page.goto('https://demo-store.playwright.dev');
// Verify mobile layout
await expect(page.locator('.mobile-menu-button')).toBeVisible();
// Test on desktop viewport
await page.setViewportSize({ width: 1280, height: 800 });
// Verify desktop layout
await expect(page.locator('.desktop-navigation')).toBeVisible();
});
Визуальное тестирование
Playwright поддерживает визуальные сравнения для обнаружения неожиданных изменений в UI:
test('product page visual test', async ({ page }) => {
await page.goto('https://demo-store.playwright.dev/product/1');
// Compare screenshot with baseline
await expect(page).toHaveScreenshot('product-page.png');
});
При первом запуске этого теста создается базовый скриншот. При последующих запусках текущее состояние сравнивается с базовым.
Тестирование динамических UI-элементов
Современные веб-приложения часто имеют динамические UI-элементы. Playwright хорошо с ними справляется:
test('add product to cart updates counter', async ({ page }) => {
await page.goto('https://demo-store.playwright.dev');
// Get initial cart count
const cartCount = page.locator('.cart-count');
await expect(cartCount).toHaveText('0');
// Add product to cart
await page.locator('.product-card button.add-to-cart').first().click();
// Verify cart count updates
await expect(cartCount).toHaveText('1');
});
Отладка UI-тестов
Когда тесты не проходят, Playwright предлагает мощные инструменты отладки:
Playwright Inspector
Запустите визуальный инспектор для отладки ваших тестов:
PWDEBUG=1 npx playwright test product-ui.spec.ts
Инспектор позволяет:
- Пошагово выполнять тест
- Исследовать DOM
- Просматривать логи консоли
- Изучать сетевые запросы
Trace Viewer
Трассировки записывают подробную информацию о выполнении теста:
// In your playwright.config.ts
export default defineConfig({
use: {
trace: 'on-first-retry', // Record traces on first retry of failed tests
},
});
После неудачного теста просмотрите трассировку:
npx playwright show-trace test-results/product-ui-test-chromium/trace.zip
Просмотрщик трассировки показывает:
- Скриншоты на каждом шаге
- Снимки DOM
- Сетевую активность
- Логи консоли
Интеграция UI-тестов Playwright в ваш рабочий процесс
Запуск тестов в CI
Playwright хорошо работает с CI-системами. Для GitHub Actions мастер настройки создает файл workflow, который запускает ваши тесты при push и pull request.
Для других CI-систем вы можете использовать Docker-образ Playwright:
# Example for GitLab CI
test:
image: mcr.microsoft.com/playwright:v1.40.0-focal
script:
- npm ci
- npx playwright test
artifacts:
when: always
paths:
- playwright-report/
expire_in: 1 week
Компонентное тестирование
Помимо тестов на уровне страницы, Playwright также поддерживает компонентное тестирование для фреймворков, таких как React, Vue и Svelte:
// Example for React component testing
import { test, expect } from '@playwright/experimental-ct-react';
import ProductCard from '../components/ProductCard';
test('ProductCard renders correctly', async ({ mount }) => {
const component = await mount(
<ProductCard
title="Test Product"
price="$19.99"
image="/test-image.jpg"
/>
);
await expect(component).toContainText('Test Product');
await expect(component).toContainText('$19.99');
await expect(component.locator('button')).toBeEnabled();
});
Часто задаваемые вопросы
Playwright предлагает кроссбраузерную поддержку из коробки и обрабатывает множественные вкладки и окна, с чем у Cypress возникают проблемы. Playwright также имеет меньше ограничений при тестировании между доменами. Однако у Cypress более зрелая экосистема и удобный интерфейс test runner.
Нет. Playwright предназначен для end-to-end и интеграционного тестирования. Unit-тесты с фреймворками типа Jest по-прежнему ценны для тестирования отдельных функций и компонентов в изоляции.
Playwright позволяет сохранять состояние аутентификации и повторно использовать его в тестах. Сначала запустите браузер, перейдите на страницу входа и выполните шаги входа, заполнив поля имени пользователя и пароля и отправив форму. После входа сохраните состояние хранилища браузера в файл, который содержит данные аутентификации. В ваших фактических тестах вы можете настроить Playwright для использования этого сохраненного состояния аутентификации, чтобы не нужно было входить в систему перед каждым тестом. Этот подход ускоряет выполнение тестов и обеспечивает согласованность между сессиями.
Да, Playwright имеет встроенные возможности сравнения скриншотов. Для более продвинутого визуального тестирования вы можете интегрировать со специализированными инструментами, такими как Percy или Applitools.
Вы можете ускорить выполнение ваших UI-тестов Playwright, запуская их параллельно, что включено по умолчанию. При разработке используйте флаг --project для запуска тестов только в конкретных браузерах. Повторное использование состояния аутентификации вместо входа в систему во время каждого теста также сокращает время выполнения. Кроме того, использование компонентного тестирования обеспечивает более быструю обратную связь для отдельных UI-компонентов.
Заключение
Включив Playwright в вашу стратегию тестирования, вы можете создавать более надежные frontend-приложения с уверенностью, что ваш UI работает правильно во всех браузерах и устройствах. Его механизмы автоматического ожидания, функции изоляции и мощные инструменты отладки решают многие распространенные проблемы UI-тестирования. Независимо от того, тестируете ли вы адаптивный дизайн, визуальное оформление или динамические взаимодействия, Playwright предоставляет комплексное решение, которое легко интегрируется с современными рабочими процессами разработки.