Playwright Component Testing (CT) в реальных браузерах

+-----------------------------------------------------------------------------+
|                     Ограничения среды jsdom / happy-dom                     |
|                                                                             |
|  Node.js Memory -> Синтаксический парсер HTML -> Имитация дерева узлов      |
|  [Layout = 0px]  [CSS Grid = Игнорируется]  [Шрифты / GPU = Отсутствуют]    |
+-----------------------------------------------------------------------------+

+-----------------------------------------------------------------------------+
|              Playwright Component Testing (CT) в реальных браузерах         |
|                                                                             |
|  Test Runner (Node.js)                                                      |
|       │                                                                     |
|       ▼ (mount(<Button variant="primary" />))                               |
|  Локальный Vite CT Bundler                                                  |
|       │ (Компиляция компонента + Tailwind v4 CSS)                           |
|       ▼                                                                     |
|  Реальный браузерный движок (Chromium / Firefox / WebKit)                   |
|       │                                                                     |
|       ├──► 100% реальный Layout: CSS Grid, Flexbox, BoundingBox, z-index     |
|       ├──► Физический стек ввода: mousemove, hover, drag-and-drop, tab-фокус|
|       └──► Аппаратный рендеринг шрифтов и вычисление CSS-свойств            |
+-----------------------------------------------------------------------------+

+-----------------------------------------------------------------------------+
|                         Node.js Test Runner Process                         |
|   test('отображает активное состояние карточки', async ({ mount }) => { ... |
+-----------------------------------------------------------------------------+
                                       │
                                       ▼ (Команда монтирования)
+-----------------------------------------------------------------------------+
|                           Vite CT Dev-сервер                                |
|   - Хостовая страница: playwright/index.html                                |
|   - Подключение дизайн-системы: playwright/index.tsx (Tailwind v4)          |
|   - Динамический бандлинг монтируемого компонента                           |
+-----------------------------------------------------------------------------+
                                       │
                                       ▼ (WebSocket CDP / WebDriver BiDi)
+-----------------------------------------------------------------------------+
|                Реальный браузер (Chromium / WebKit / Firefox)               |
|                                                                             |
|   +---------------------------------------------------------------------+   |
|   |   HTML Shell (playwright/index.html)                                |   |
|   |   <div id="root">                                                   |   |
|   |     <!-- Смонтированный компонент React 19 -->                      |   |
|   |     <UserProfileCard user={mockUser} />                             |   |
|   |   </div>                                                            |   |
|   +---------------------------------------------------------------------+   |
|                                       │                                     |
|                                       ▼                                     |
|   Вычисление точных координат (BoundingBox) -> Проверка стилей getComputed  |
+-----------------------------------------------------------------------------+

import { defineConfig, devices } from '@playwright/experimental-ct-react';
import path from 'path';

export default defineConfig({
  testDir: './src',
  testMatch: /.*\.ct\.(ts|tsx)$/,
  timeout: 15_000,
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  use: {
    /* Порт для локального Vite-сервера монтирования */
    ctPort: 3100,
    /* Конфигурация Vite */
    ctViteConfig: {
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
        },
      },
    },
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

import '@/app/globals.css';
import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks';

// Регистрация глобальных хуков жизненного цикла компонентов
beforeMount(async ({ App }) => {
  // Например, принудительная установка темной темы для дизайн-системы
  document.documentElement.classList.add('dark');
  return <App />;
});

import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import { DataTable } from './DataTable';

const MOCK_ROWS = Array.from({ length: 40 }, (_, i) => ({
  id: `row-${i}`,
  name: `Элемент каталога #${i}`,
  value: `${(i + 1) * 100} ₽`,
}));

test.describe('<DataTable /> Sticky Layout in Real Browser', () => {
  test('заголовок таблицы сохраняет фиксированную позицию при вертикальном скролле', async ({
    mount,
    page,
  }) => {
    // Монтируем компонент в фиксированном контейнере с прокруткой
    const component = await mount(
      <div className="h-[300px] overflow-y-auto border border-border" id="scroll-container">
        <DataTable data={MOCK_ROWS} />
      </div>
    );

    const header = component.getByRole('rowheader', { name: 'Наименование' });

    // Проверяем начальное положение заголовка относительно вьюпорта
    const initialBox = await header.boundingBox();
    expect(initialBox).not.toBeNull();
    const initialY = initialBox!.y;

    // Скроллим контейнер вниз на 500 пикселей
    await page.locator('#scroll-container').evaluate((el) => {
      el.scrollTop = 500;
    });

    // Проверяем, что заголовок остался на той же Y-координате (сработал position: sticky)
    const scrolledBox = await header.boundingBox();
    expect(scrolledBox).not.toBeNull();
    expect(scrolledBox!.y).toBeCloseTo(initialY, 1);

    // Проверяем вычисленный стиль CSS
    await expect(header).toHaveCSS('position', 'sticky');
  });
});

import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import { ActionButton } from './ActionButton';

test.describe('<ActionButton /> Interactive Pseudo-classes', () => {
  test('кнопка применяет корректные стили Tailwind v4 при наведении мыши', async ({ mount }) => {
    let clickCount = 0;

    const component = await mount(
      <ActionButton
        variant="accent"
        onClick={() => {
          clickCount += 1;
        }}
      >
        Опубликовать
      </ActionButton>
    );

    // 1. Проверяем начальные стили (базовый фон)
    await expect(component).toHaveCSS('cursor', 'pointer');

    // 2. Физически наводим курсор мыши на кнопку
    await component.hover();

    // 3. Проверяем, что реальный браузер применил стиль hover
    // Значение rgb/hex вычисляется настоящим движком рендеринга
    await expect(component).toHaveCSS('transition-property', /background-color|all/);

    // 4. Физический клик
    await component.click();
    expect(clickCount).toBe(1);
  });
});

import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import { DropdownMenu } from './DropdownMenu';

test('навигация по элементам выпадающего списка с помощью стрелок клавиатуры', async ({
  mount,
  page,
}) => {
  const component = await mount(
    <DropdownMenu
      triggerLabel="Действия"
      items={[
        { id: 'edit', label: 'Редактировать запись' },
        { id: 'duplicate', label: 'Создать дубликат' },
        { id: 'delete', label: 'Удалить' },
      ]}
    />
  );

  const trigger = component.getByRole('button', { name: 'Действия' });

  // Фокусируемся на кнопке вызова через Tab
  await page.keyboard.press('Tab');
  await expect(trigger).toBeFocused();

  // Открываем меню клавишей Enter
  await page.keyboard.press('Enter');

  // Меню должно отобразить список вариантов
  const menuList = page.getByRole('menu');
  await expect(menuList).toBeVisible();

  // Перемещаемся стрелкой вниз на первый пункт
  await page.keyboard.press('ArrowDown');
  const firstItem = page.getByRole('menuitem', { name: 'Редактировать запись' });
  await expect(firstItem).toBeFocused();

  // Перемещаемся стрелкой вниз на второй пункт
  await page.keyboard.press('ArrowDown');
  const secondItem = page.getByRole('menuitem', { name: 'Создать дубликат' });
  await expect(secondItem).toBeFocused();
});