Монтирование компонентов

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

Подключение Playwright и настройка проекта

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

npm install --save-dev @playwright/test

В файле конфигурации playwright.config.js можно указать базовые параметры:

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

export default defineConfig({
  testDir: './tests',
  use: {
    headless: true,
    viewport: { width: 1280, height: 720 },
    actionTimeout: 5000,
  },
});

Ключевой момент: отдельная директория для тестов компонентов позволяет изолировать их от интеграционных и e2e тестов.

Создание контейнера для монтирования компонента

Playwright использует механизм page.evaluate или встроенные методы frame для внедрения HTML и JavaScript компонентов на страницу.

Пример монтирования React-компонента:

import { test, expect } from '@playwright/test';
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from '../src/MyComponent';

test('Монтирование компонента MyComponent', async ({ page }) => {
  await page.setContent('<div id="root"></div>');

  await page.evaluate(() => {
    const root = document.getElementById('root');
    window.renderComponent = (component) => {
      ReactDOM.render(component, root);
    };
  });

  await page.evaluate(() => {
    window.renderComponent(React.createElement(MyComponent, { text: 'Тест' }));
  });

  const content = await page.textContent('#root');
  expect(content).toContain('Тест');
});

Важные аспекты:

  • setContent позволяет создать минимальную страницу для монтирования.
  • Использование window для хранения функции рендеринга делает компонент доступным для повторного монтирования.
  • Проверка через textContent или innerHTML обеспечивает точное тестирование визуального результата.

Изоляция состояния компонентов

Для корректного тестирования компонентов важно, чтобы их состояние не зависело от других частей приложения. Это достигается с помощью:

  1. Очистки DOM перед каждым тестом:
test.beforeEach(async ({ page }) => {
  await page.setContent('<div id="root"></div>');
});
  1. Использования моков и фейковых данных для пропсов:
await page.evaluate(() => {
  const props = { text: 'Моковый текст', count: 5 };
  window.renderComponent(React.createElement(MyComponent, props));
});
  1. Сброса состояний и таймеров в компоненте перед тестом.

Работа с событиями

Тестирование интерактивных компонентов требует эмуляции действий пользователя:

await page.click('button#increment');
const count = await page.textContent('#counter');
expect(count).toBe('1');

Ключевой момент: Playwright автоматически ожидает завершения всех событий и обновления DOM после действий пользователя, что исключает необходимость ручного wait.

Проверка визуального состояния

Playwright поддерживает screenshot testing, что полезно для UI-компонентов:

await page.screenshot({ path: 'component.png', fullPage: true });

Для сравнения с эталонными изображениями можно использовать toMatchSnapshot:

expect(await page.screenshot()).toMatchSnapshot('MyComponent.png');

Такой подход позволяет фиксировать визуальные регрессии компонентов при изменении стилей или логики.

Монтирование с использованием фреймов

Если компонент зависит от контекста страницы, можно создавать отдельный iframe:

const frame = await page.frame({ name: 'component-frame' }) || 
              await page.addFrame({ name: 'component-frame', url: 'about:blank' });

await frame.setContent('<div id="root"></div>');
await frame.evaluate(() => {
  ReactDOM.render(React.createElement(MyComponent, { text: 'Внутри iframe' }), document.getElementById('root'));
});

Преимущества:

  • Изоляция стилей и скриптов
  • Возможность тестировать сторонние виджеты и интеграции

Практические рекомендации

  • Использовать компонентные контейнеры для повторного монтирования без полного перезагрузки страницы.
  • Проверять props и state компонентов через Playwright API (evaluate, getAttribute, textContent).
  • Разделять тесты на рендеринг, интерактивность и визуальное отображение.
  • Сохранять скриншоты и снапшоты для отслеживания регрессий при изменении компонентов.

Монтирование компонентов в Playwright позволяет строить детализированные, надежные и повторяемые тесты UI. Оно обеспечивает контроль над состоянием, интерактивностью и визуальным отображением без зависимости от полного приложения. Такой подход ускоряет разработку и повышает качество фронтенд-продукта.

Оглавление