Playwright v1.62.0

Вышел релиз Playwright 1.62. Обычно я не пишу про релизы Playwright, но тут важное событие — допилили component testing. Текущее решение чем-то похоже на описание компонентов для Storybook.

Забавно, что инструкция по установке начинается с «запустите LLM». Буквально.

> Step 1: Point your coding agent at the skill

npx playwright init-skills

Set up component testing using the playwright-component-testing skill.

Затем надо немного сконфигурировать конфиг Playwright.

Затем создать давно знакомые нам stories-файлы
src/components/Button.story.tsx

import { Button } from './Button';

export const Primary = () => <Button title='Submit' />;

export const Disabled = () => <Button title='Submit' disabled />;

Т.е. по сути один в один истории Storybook. Интересно, не будет ли конфликтов? Пока выглядит, что Playwright-сборка должна будет уметь обрабатывать и исполнять все плагины и декораторы Storybook, либо придётся как-то делить истории Storybook и истории Playwright.

Затем пишем тесты

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

test('renders primary button', async ({ mount }) => {
  const component = await mount('components/Button/Primary');
  await expect(component.getByRole('button')).toHaveText('Submit');
});

test('disabled button is disabled', async ({ mount }) => {
  const component = await mount('components/Button/Disabled');
  await expect(component.getByRole('button')).toBeDisabled();
});

Затем запускаем

npx playwright test --project=components

В доке также описаны ещё основные паттерны для тестирования. На них останавливаться не буду.

Надо будет попробовать в своём пет-проекте.

https://github.com/microsoft/playwright/releases/tag/v1.62.0

#development #playwright #testing #component-testing #releaseNotes