Percy и Chromatic для Storybook

Percy — облачная платформа VRT, интегрируемая с конвейерами непрерывной интеграции. Она захватывает снимки веб-страниц и историй Storybook, хранит эталонные снимки в облаке и создаёт проверки визуальных различий, доступные через веб-интерфейс. Платформа поддерживает Playwright, Cypress, Selenium и Storybook.

Chromatic — платформа VRT, специально созданная для Storybook. Она захватывает все истории в облачных браузерах, сравнивает их с эталонными снимками и создаёт веб-интерфейс для проверки различий. Chromatic также публикует Storybook как размещённый сайт документации компонентов.

Percy и Chromatic автоматически находят и сохраняют снимки каждой истории Storybook. Дополнительный код тестов не нужен: создайте истории для своих компонентов, запустите CLI — и каждое визуальное состояние будет автоматически протестировано. Это ускоряет внедрение в существующих проектах Storybook.

Установите @percy/cli и @percy/storybook, добавьте переменную окружения PERCY_TOKEN в систему непрерывной интеграции и добавьте percy storybook ./storybook-static в конвейер непрерывной интеграции. Percy автоматически сохраняет снимки всех историй и отправляет сборку VRT на панель Percy.

Установите chromatic, добавьте CHROMATIC_PROJECT_TOKEN в систему непрерывной интеграции и запустите chromatic --project-token=.... Первый запуск создаёт эталонные снимки. Последующие запуски сравнивают результаты с эталонами и публикуют ссылки на проверку в проверках PR в GitHub.

Оба инструмента добавляют проверку PR с сообщением «Обнаружено X изменений». Нажатие на него открывает интерфейс проверки с различиями, показанными рядом или поверх друг друга. Проверяющие подтверждают намеренные изменения, создавая новые эталонные снимки, или запрашивают исправления случайных регрессий.

Используйте аргументы Storybook (элементы управления), чтобы создавать несколько вариантов истории: «По умолчанию», «Загрузка», «Ошибка», «Отключено», LongText, SmallViewport. Каждый вариант становится отдельным снимком VRT, обеспечивая полное покрытие состояний без создания отдельных файлов тестов.

Chromatic и Percy поддерживают несколько ширин области просмотра для каждого снимка. Настройте области просмотра в истории или глобально в .storybook/preview.js. Запускайте VRT для каждой области просмотра и каждой темы (светлой/тёмной), чтобы одновременно выявлять регрессии адаптивности и темы.

Принимайте все изменения при повышении основной версии или после намеренного редизайна. Оба инструмента поддерживают пакетное принятие изменений. После крупного обновления дизайн-системы примите все различия одновременно — новые снимки станут эталоном для будущих постепенных изменений.

Объединяйте функцию play() Storybook (тесты взаимодействий) с VRT: play() имитирует действия пользователя (нажатие кнопки, открытие модального окна), после чего снимок VRT фиксирует получившееся состояние. Так проверяется визуальный результат работы сложных интерактивных компонентов.

Percy и Chromatic взимают плату за каждый снимок. Большие наборы историй Storybook с сотнями историй, несколькими областями просмотра и темами создают тысячи снимков для каждого PR. Следите за использованием, эффективно применяйте декораторы историй и рассмотрите возможность не запускать VRT для историй, посвящённых исключительно логике.

Что делает Chromatic особенно подходящим для проектов Storybook по сравнению с универсальными инструментами VRT?

Percy и Chromatic автоматизируют VRT для Storybook: находят и сохраняют снимки всех историй в облачных браузерах, создают проверки различий для PR и управляют эталонными снимками. В сочетании с аргументами историй для покрытия состояний и play() для тестирования взаимодействий они обеспечивают комплексное визуальное обеспечение качества библиотек компонентов.