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-компонентов. Но для визуального тестирования изолированных компонентов недостаточно.

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

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

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

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

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

Delta-QA тестирует целые страницы в продакшене, Chromatic — изолированные компоненты Storybook: что покрывает каждый подход и где его слепые зоны.

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

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

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

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