Percy dan Chromatic untuk Storybook

Percy adalah platform VRT berbasis awan yang terintegrasi dengan alur integrasi berkelanjutan. Percy mengambil tangkapan layar halaman web dan cerita Storybook, menyimpan acuan di awan, serta menghasilkan peninjauan perbedaan visual yang dapat diakses melalui antarmuka web. Percy mendukung Playwright, Cypress, Selenium, dan Storybook.

Chromatic adalah platform VRT yang dibuat khusus untuk Storybook. Chromatic mengambil tangkapan semua cerita di peramban awan, membandingkannya dengan acuan, dan menghasilkan antarmuka peninjauan perbedaan. Chromatic juga menerbitkan Storybook sebagai situs dokumentasi komponen yang dihosting.

Percy dan Chromatic secara otomatis menemukan dan mengambil tangkapan setiap cerita Storybook. Tidak diperlukan kode pengujian tambahan—tulis cerita untuk komponen Anda, jalankan CLI, dan setiap keadaan visual akan diuji secara otomatis. Hal ini mempercepat penerapan pada proyek Storybook yang sudah ada.

Pasang @percy/cli dan @percy/storybook, tambahkan variabel lingkungan PERCY_TOKEN ke integrasi berkelanjutan, lalu tambahkan percy storybook ./storybook-static ke alur integrasi berkelanjutan. Percy secara otomatis mengambil tangkapan semua cerita dan mengirimkan hasil VRT ke dasbor Percy.

Pasang chromatic, tambahkan CHROMATIC_PROJECT_TOKEN ke integrasi berkelanjutan, lalu jalankan chromatic --project-token=.... Proses pertama menetapkan acuan. Proses berikutnya membandingkan hasil dengan acuan dan mengirimkan tautan peninjauan ke pemeriksaan PR GitHub.

Kedua alat menambahkan pemeriksaan PR yang menampilkan "X perubahan terdeteksi." Mengekliknya akan membuka antarmuka peninjauan dengan perbedaan berdampingan atau berlapis. Peninjau menyetujui perubahan yang disengaja, sehingga menetapkan acuan baru, atau meminta perbaikan untuk regresi yang tidak disengaja.

Gunakan argumen Storybook (kontrol) untuk membuat beberapa varian cerita: Bawaan, Memuat, Kesalahan, Dinonaktifkan, LongText, SmallViewport. Setiap varian menjadi tangkapan VRT terpisah—cakupan keadaan yang menyeluruh tanpa menulis berkas pengujian terpisah.

Chromatic dan Percy mendukung beberapa lebar area tampilan untuk setiap tangkapan. Konfigurasikan area tampilan dalam cerita atau secara global di .storybook/preview.js. Jalankan VRT untuk setiap area tampilan dan setiap tema (terang/gelap) agar regresi responsif dan tema dapat ditangkap secara bersamaan.

Terima semua perubahan saat menaikkan versi utama atau menerapkan desain ulang yang disengaja. Kedua alat mendukung penerimaan secara massal. Setelah pembaruan besar pada sistem desain, terima semua perbedaan sekaligus agar tangkapan layar baru menjadi acuan untuk perubahan bertahap berikutnya.

Gabungkan fungsi play() Storybook (pengujian interaksi) dengan VRT: play() menyimulasikan interaksi pengguna (mengeklik tombol, membuka modal), lalu tangkapan VRT mengambil keadaan yang dihasilkan. Dengan demikian, keluaran visual komponen interaktif yang kompleks dapat diuji.

Percy dan Chromatic mengenakan biaya untuk setiap tangkapan. Rangkaian Storybook yang besar dengan ratusan cerita, beberapa area tampilan, dan berbagai tema dapat menghasilkan ribuan tangkapan untuk setiap PR. Pantau penggunaan, gunakan dekorator cerita secara efisien, dan pertimbangkan untuk melewati VRT pada cerita yang hanya berfokus pada logika.

Apa yang membuat Chromatic secara khusus cocok untuk proyek Storybook dibandingkan alat VRT umum?

Percy dan Chromatic mengotomatiskan VRT untuk Storybook dengan menemukan dan mengambil tangkapan semua cerita di peramban awan, menghasilkan peninjauan perbedaan untuk PR, serta mengelola acuan. Jika digabungkan dengan argumen cerita untuk cakupan keadaan dan play() untuk pengujian interaksi, keduanya menyediakan jaminan mutu visual yang menyeluruh untuk pustaka komponen.