E2E тесты с Playwright

SvelteKit предоставляет мощную платформу для разработки приложений на основе Svelte с поддержкой серверного рендеринга и современных фреймворков. Для обеспечения стабильности интерфейса и проверки сценариев пользовательского взаимодействия важно интегрировать E2E (end-to-end) тестирование. Одним из оптимальных инструментов для этого является Playwright — библиотека для автоматизированного управления браузером с возможностью тестирования на разных движках (Chromium, WebKit, Firefox).

Установка Playwright

Для начала необходимо установить Playwright как зависимость проекта:

npm install -D @playwright/test

После установки можно инициализировать конфигурацию тестов:

npx playwright install
npx playwright test --init

Эти команды создадут структуру тестов и необходимые конфигурационные файлы (playwright.config.ts), где можно указать браузеры, параметры запуска и пути к тестам.

Структура E2E тестов в SvelteKit

Рекомендуемая структура для E2E тестов в проекте SvelteKit:

project-root/
│
├─ src/
│  └─ routes/
│
├─ tests/
│  └─ e2e/
│     ├─ home.spec.ts
│     ├─ login.spec.ts
│     └─ dashboard.spec.ts
│
└─ playwright.config.ts

Каждый файл *.spec.ts содержит набор сценариев для конкретной страницы или функционала приложения.

Пример базового теста

import { test, expect } from '@playwright/test';

test('Главная страница отображается корректно', async ({ page }) => {
    await page.goto('/');
    await expect(page).toHaveTitle(/SvelteKit App/);
    await expect(page.locator('h1')).toHaveText('Добро пожаловать в SvelteKit');
});

Ключевые моменты:

  • page.goto('/') — переход на главную страницу.
  • expect(page).toHaveTitle() — проверка заголовка страницы.
  • locator('h1') — выбор элемента для проверки текста.

Работа с формами и взаимодействиями

Playwright позволяет эмулировать действия пользователя, включая ввод текста, клики и выбор элементов:

test('Форма авторизации работает корректно', async ({ page }) => {
    await page.goto('/login');
    await page.fill('input[name="email"]', 'user@example.com');
    await page.fill('input[name="password"]', 'password123');
    await page.click('button[type="submit"]');
    await expect(page).toHaveURL('/dashboard');
    await expect(page.locator('h2')).toHaveText('Панель управления');
});

Особенности:

  • fill() — заполняет текстовое поле.
  • click() — выполняет клик по элементу.
  • toHaveURL() — проверка изменения адреса после действия.

Использование тестовых данных и фикстур

Для стабильности E2E тестов важно использовать предсказуемые данные. Playwright позволяет создавать фикстуры с помощью test.extend():

import { test as base } from '@playwright/test';

export const test = base.extend({
    user: async ({}, use) => {
        const user = { email: 'user@example.com', password: 'password123' };
        await use(user);
    },
});

test('Вход с фикстурным пользователем', async ({ page, user }) => {
    await page.goto('/login');
    await page.fill('input[name="email"]', user.email);
    await page.fill('input[name="password"]', user.password);
    await page.click('button[type="submit"]');
    await expect(page).toHaveURL('/dashboard');
});

Преимущество такого подхода — повторное использование данных без дублирования кода.

Параллельное выполнение тестов

Playwright поддерживает параллельное выполнение тестов, что ускоряет проверку больших проектов:

import { defineConfig } from '@playwright/test';

export default defineConfig({
    testDir: './tests/e2e',
    workers: 4, // число параллельных воркеров
    use: {
        headless: true,
        viewport: { width: 1280, height: 720 },
        actionTimeout: 5000,
        ignoreHTTPSErrors: true,
    },
});

Настройка воркеров и глобальных параметров позволяет контролировать производительность и стабильность E2E тестов.

Снимки экрана и видео

Playwright может автоматически создавать скриншоты и записи видео при падении тестов:

use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
}

Это помогает быстрее выявлять причины ошибок в интерфейсе и анализировать пользовательские сценарии.

Проверка UI на разных браузерах

В SvelteKit часто важно гарантировать кросс-браузерную совместимость. В playwright.config.ts можно указать несколько проектов:

projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
    { name: 'firefox', use: { browserName: 'firefox' } },
    { name: 'webkit', use: { browserName: 'webkit' } },
]

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

Тестирование API и интеграция с сервером

SvelteKit активно использует endpoints и server-side actions. Для проверки таких взаимодействий Playwright можно комбинировать с page.request:

test('API возвращает список пользователей', async ({ request }) => {
    const response = await request.get('/api/users');
    expect(response.status()).toBe(200);
    const data = await response.json();
    expect(data).toHaveLength(10);
});

Это обеспечивает комплексное покрытие как UI, так и backend-логики.

Лучшие практики

  • Изолировать тесты: каждый тест должен быть независимым, чтобы падение одного не влияло на другие.
  • Использовать селекторы с data-testid вместо классов, чтобы минимизировать ломку тестов при изменении стилей.
  • Параметризовать тесты для разных сценариев, чтобы избежать дублирования кода.
  • Включать ожидания (waits) для асинхронных процессов: Playwright автоматически ждет рендеринга, но явные ожидания иногда ускоряют дебаг.

Эта методология обеспечивает надежное, масштабируемое и воспроизводимое E2E тестирование SvelteKit-приложений, сочетая возможности Playwright с особенностями реактивной архитектуры Svelte.

Оглавление