Storybook için Percy ve Chromatic

Percy, sürekli entegrasyon işlem hatlarıyla bütünleşen bulut tabanlı bir VRT platformudur. Web sayfalarının ve Storybook hikâyelerinin ekran görüntülerini alır, referans görüntüleri bulutta saklar ve web arayüzü üzerinden erişilebilen görsel fark incelemeleri oluşturur. Playwright, Cypress, Selenium ve Storybook'u destekler.

Chromatic, özellikle Storybook için tasarlanmış bir VRT platformudur. Tüm hikâyeleri bulut tarayıcılarında görüntüler, bunları referans görüntülerle karşılaştırır ve bir fark inceleme arayüzü oluşturur. Chromatic ayrıca Storybook'u barındırılan bir bileşen dokümantasyon sitesi olarak yayımlar.

Percy ve Chromatic, her Storybook hikâyesini otomatik olarak keşfeder ve görüntüler. Ek sınama kodu gerekmez — bileşenleriniz için hikâyeler yazın, CLI'yi çalıştırın; her görsel durum otomatik olarak sınanır. Bu, mevcut Storybook projelerinde kullanıma geçişi hızlandırır.

@percy/cli ve @percy/storybook paketlerini yükleyin, PERCY_TOKEN ortam değişkenini sürekli entegrasyon ortamına ekleyin ve sürekli entegrasyon işlem hattına percy storybook ./storybook-static komutunu ekleyin. Percy, tüm hikâyelerin görüntülerini otomatik olarak alır ve Percy panosuna bir VRT derlemesi gönderir.

chromatic paketini yükleyin, CHROMATIC_PROJECT_TOKEN değerini sürekli entegrasyon ortamına ekleyin ve chromatic --project-token=... komutunu çalıştırın. İlk çalıştırma referans görüntüleri oluşturur. Sonraki çalıştırmalar referans görüntülerle karşılaştırma yapar ve inceleme bağlantılarını GitHub PR denetimlerine gönderir.

Her iki araç da "X değişiklik algılandı" iletisini gösteren bir PR denetimi ekler. Tıklamak, farkların yan yana veya üst üste bindirilmiş olarak gösterildiği inceleme arayüzünü açar. İnceleyenler, amaçlanan değişiklikleri onaylayarak yeni referans görüntüler oluşturur veya yanlışlıkla oluşan gerilemeler için düzeltme ister.

Birden çok hikâye çeşidi oluşturmak için Storybook argümanlarını (denetimleri) kullanın: Varsayılan, Yükleniyor, Hata, Devre dışı, LongText, SmallViewport. Her çeşit ayrı bir VRT görüntüsü olur; böylece ayrı sınama dosyaları yazmadan kapsamlı durum kapsamı elde edilir.

Chromatic ve Percy, her görüntü için birden çok görüntü alanı genişliğini destekler. Görüntü alanlarını hikâyede veya genel olarak .storybook/preview.js içinde yapılandırın. Duyarlı tasarım ve tema gerilemelerini aynı anda yakalamak için her görüntü alanında ve her temada (açık/koyu) VRT çalıştırın.

Ana sürüm yükseltmesinde veya amaçlanan bir yeniden tasarım sonrasında tüm değişiklikleri kabul edin. Her iki araç da toplu kabulü destekler. Büyük bir tasarım sistemi güncellemesinden sonra tüm farkları tek seferde kabul edin; yeni ekran görüntüleri gelecekteki artımlı değişiklikler için referans görüntü olur.

Storybook'un play() işlevini (etkileşim sınamalarını) VRT ile birleştirin: play(), kullanıcı etkileşimlerini (bir düğmeye tıklama, bir iletişim penceresi açma) taklit eder; ardından VRT görüntüsü ortaya çıkan durumu yakalar. Bu yöntem, karmaşık etkileşimli bileşenlerin görsel çıktısını sınar.

Percy ve Chromatic her görüntü için ücret alır. Yüzlerce hikâye, birden çok görüntü alanı ve tema içeren büyük Storybook paketleri, her PR için binlerce görüntü oluşturur. Kullanımı izleyin, hikâye dekoratörlerini verimli kullanın ve yalnızca mantığa odaklanan hikâyeler için VRT'yi atlamayı değerlendirin.

Percy ve Chromatic, bulut tarayıcılarında tüm hikâyeleri keşfedip görüntüleyerek, PR fark incelemeleri oluşturarak ve referans görüntüleri yöneterek Storybook için VRT'yi otomatikleştirir. Durum kapsamı için hikâye argümanları ve etkileşim sınaması için play() ile birlikte kullanıldıklarında, bileşen kitaplıkları için kapsamlı görsel kalite güvencesi sağlarlar.