E2E тестирование

SkateJS — это библиотека для создания веб-компонентов на JavaScript с упором на декларативность и реактивность. Одним из критически важных аспектов работы с веб-компонентами является их End-to-End (E2E) тестирование, которое позволяет проверять поведение компонентов в реальных условиях браузера, включая взаимодействие с DOM, события и асинхронные процессы.

Выбор инструментов для E2E тестирования

Для тестирования компонентов на SkateJS чаще всего используют:

Playwright — современный инструмент для автоматизации браузера, поддерживает многобраузерное тестирование и позволяет работать с элементами Shadow DOM.
Cypress — удобен для быстрого создания тестов, обладает мощными средствами для работы с DOM и таймерами.
Web Test Runner — интеграция с современными веб-компонентами, поддержка модульных тестов и Shadow DOM.

Выбор инструмента зависит от требований проекта. Для проектов с глубоким использованием Shadow DOM Playwright или Web Test Runner будут предпочтительнее.

Структура E2E теста для веб-компонента

E2E тест должен имитировать поведение пользователя и проверять итоговый результат. Основные шаги:

Подготовка окружения Настройка браузера, запуск тестового сервера, загрузка HTML-страницы с компонентом.
Инициализация компонента Создание экземпляра SkateJS компонента на странице через <my-component></my-component> или программно через createElement.
Взаимодействие с компонентом Эмуляция действий пользователя: клики, ввод текста, выбор элементов, события мыши.
Проверка состояния Ассерты должны проверять:
- отображение элементов,
- значения атрибутов,
- внутреннее состояние компонента (если возможно),
- реакции на события.
Очистка окружения Закрытие браузера или сброс DOM для повторяемости тестов.

Работа с Shadow DOM

SkateJS по умолчанию использует Shadow DOM для инкапсуляции стилей и структуры компонентов. При E2E тестировании это требует дополнительных методов поиска элементов:

const shadowRoot = await page.$('my-component').shadowRoot();
const button = await shadowRoot.$('button');
await button.click();

Playwright и Web Test Runner поддерживают прямой доступ к Shadow DOM через специальные селекторы (>>> в Playwright).

Пример:

await page.locator('my-component >>> button').click();

Это обеспечивает корректное взаимодействие с внутренними элементами компонента, которые не видны в обычном DOM.

Асинхронные операции и ожидания

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

await expect(page.locator('my-component >>> .status')).toHaveText('Loaded');

Использование явных ожиданий (await) и встроенных методов Playwright или Cypress предотвращает гонки и обеспечивает стабильность тестов.

Совет: нельзя опираться на setTimeout или произвольные задержки — это снижает надежность тестов.

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

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

await page.locator('my-component >>> input').fill('SkateJS');
await page.locator('my-component >>> form').dispatchEvent(new Event('submit'));
await expect(page.locator('my-component >>> .message')).toHaveText('Submitted: SkateJS');

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

использование .fill(), .click(), .dispatchEvent() для имитации действий пользователя,
проверка итоговых изменений DOM и атрибутов,
отслеживание пользовательских событий через addEventListener внутри тестов при необходимости.

Сниппет полной структуры E2E теста

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

test('SkateJS компонент реагирует на ввод', async ({ page }) => {
  await page.goto('http://localhost:3000');

  const component = page.locator('my-component');

  const input = component.locator('>>> input');
  await input.fill('Test Value');

  const submitButton = component.locator('>>> button');
  await submitButton.click();

  const message = component.locator('>>> .message');
  await expect(message).toHaveText('Submitted: Test Value');
});