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

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

Что такое 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}`);
});

Этот тест:

1. Открывает демо-сайт магазина
2. Находит карточку товара
3. Проверяет, что ключевые элементы видимы и доступны
4. Извлекает название товара (показывая, как можно извлекать информацию)

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