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 Engine: CSS Grid, Flexbox, BoundingBox      |
|       ├──► Фізичний стек вводу: 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: 'Найменування' });

    // Отримуємо початковий bounding box відносно в'юпорту
    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
    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();
});