Storybook — Все статьи и туториалы

4 статей

Storybook утвердился как референсная среда для разработки, документирования и тестирования изолированных UI-компонентов. Для команд, поддерживающих design system, каждая story становится естественной целью визуального тестирования: компонент, отрисованный в точно заданном состоянии, без прикладной зависимости, идеально воспроизводимый. Эта тонкая гранулярность позволяет обнаруживать визуальную регрессию на уровне кнопки или карточки ещё до того, как она распространится на собранную страницу.

Статьи на этой странице рассматривают экосистему Storybook под углом визуального тестирования: интеграция с Chromatic (нативный инструмент команды Storybook), альтернативы вроде Loki, Storyshots или Playwright component testing, управление декораторами и состояниями (hover, focus, dark mode), хорошие практики по приведению story к детерминизму. Также затрагивается повторяющийся вопрос: тестировать ли только компоненты в story или ещё и реальные страницы, которые их собирают? Оба подхода дополняют друг друга, и именно сюда вписывается Delta-QA — на тестирование веб-страниц, отрисованных в реальных условиях, в дополнение к компонентному покрытию, обеспеченному Storybook. Эта страница помогает выстроить согласованную стратегию между двумя уровнями.

Storybook и визуальное тестирование: почему тестирования изолированных компонентов недостаточно
автор Gulben BINGOL

Storybook и визуальное тестирование: почему тестирования изолированных компонентов недостаточно

Storybook стал стандартом для документирования и тестирования UI-компонентов. Но для визуального тестирования изолированных компонентов недостаточно. Узнайте, как сочетать Storybook с визуальным тестированием полных страниц для реального покрытия.

Читать далее →
Delta-QA vs Lost Pixel: десктоп без кода или Open Source для Storybook?
автор Malloum LAYA

Delta-QA vs Lost Pixel: десктоп без кода или Open Source для Storybook?

Lost Pixel — open source инструмент визуальной регрессии для Storybook, Ladle и веб-страниц. Delta-QA — no-code и доступен всем. Полное сравнение двух подходов.

Читать далее →
Delta-QA vs Chromatic: изолированные компоненты или полные страницы?
автор Malloum LAYA

Delta-QA vs Chromatic: изолированные компоненты или полные страницы?

Chromatic отлично тестирует компоненты Storybook визуально. Delta-QA тестирует полные страницы в продакшне, без кода. Детальное сравнение: компоненты vs страницы, Storybook vs no-code, взаимодополняемость.

Читать далее →
Визуальное тестирование Storybook без Chromatic: no-code
автор Gulben BINGOL

Визуальное тестирование Storybook без Chromatic: no-code

Визуальное тестирование Storybook без Chromatic: сравните Percy, Playwright и Delta-QA. No-code ревью, без оплаты за снапшот, скриншоты — локально.

Читать далее →