Скриншотное тестирование со Storybook

Теперь для автоматического визуального тестирования ваших компонентов достаточно иметь Storybook с вашими компонентами и плагин @testplane/storybook. Больше не нужно писать тесты.

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

С помощью плагина @testplane/storybook предоставляется возможность автоматически проверять изменения ваших компонентов с помощью скриншотного тестирования без единой строчки кода теста. Вам достаточно описать ваш компонент в Storybook, а testplane при запуске автоматически сгенерит все необходимые тесты, прогонит их в нужных браузерах и предоставит визуальный отчет для обновления скриншотов. При этом, если для компонентов была задекларирована play-функция, то testplane перед началом теста выполнит ее, чтобы привести компонент в нужное состояние.

Но если и этих возможностей вам не хватит, то вы можете прямо в story-файле описать testplane-тест, который будет выполнен как дополнительный тест для компонента.

Как это использовать?

Узнайте больше об этом в нашей документации Скриншотное тестирование со Storybook. Пример проекта с настроенным скриншотным тестированием со Storybook можно посмотреть в нашем репозитории на GitHub.