Percy dan Chromatic untuk Storybook

Percy ialah platform VRT berasaskan awan yang berintegrasi dengan saluran paip penyepaduan berterusan. Ia menangkap tangkapan skrin halaman web dan cerita Storybook, menyimpan garis dasar dalam awan dan menghasilkan semakan perbezaan visual yang boleh diakses melalui antara muka web. Ia menyokong Playwright, Cypress, Selenium dan Storybook.

Chromatic ialah platform VRT yang dibina khusus untuk Storybook. Ia menangkap semua cerita dalam pelayar awan, membandingkannya dengan garis dasar dan menghasilkan antara muka semakan perbezaan. Chromatic juga menerbitkan Storybook sebagai tapak dokumentasi komponen yang dihoskan.

Percy dan Chromatic secara automatik menemui serta menangkap setiap cerita Storybook. Tiada kod pengujian tambahan diperlukan — tulis cerita untuk komponen anda, jalankan CLI dan setiap keadaan visual akan diuji secara automatik. Hal ini mempercepat penggunaan dalam projek Storybook sedia ada.

Pasang @percy/cli dan @percy/storybook, tambahkan pemboleh ubah persekitaran PERCY_TOKEN pada penyepaduan berterusan dan tambahkan percy storybook ./storybook-static pada saluran paip penyepaduan berterusan. Percy menangkap semua cerita dan menyiarkan binaan VRT ke papan pemuka Percy secara automatik.

Pasang chromatic, tambahkan CHROMATIC_PROJECT_TOKEN pada penyepaduan berterusan dan jalankan chromatic --project-token=.... Jalankan pertama menetapkan garis dasar. Jalankan seterusnya membandingkan hasil dengan garis dasar dan menyiarkan pautan semakan kepada semakan PR GitHub.

Kedua-dua alat menambahkan semakan PR yang memaparkan "X perubahan dikesan." Apabila diklik, semakan itu membuka antara muka semakan dengan perbezaan sebelah menyebelah atau tindanan. Penyemak meluluskan perubahan yang disengajakan, sekali gus menetapkan garis dasar baharu, atau meminta pembaikan bagi regresi yang tidak disengajakan.

Gunakan argumen Storybook (kawalan) untuk mencipta beberapa variasi cerita: Lalai, Memuatkan, Ralat, Dilumpuhkan, LongText dan SmallViewport. Setiap variasi menjadi tangkapan VRT yang berasingan — liputan keadaan yang menyeluruh tanpa menulis fail pengujian yang berasingan.

Chromatic dan Percy menyokong berbilang lebar ruang pandang bagi setiap tangkapan. Konfigurasikan ruang pandang dalam cerita atau secara global dalam ruang pandang .storybook/preview.js. Jalankan VRT bagi setiap ruang pandang dan setiap tema, sama ada cerah atau gelap, untuk mengesan regresi responsif dan regresi tema secara serentak.

Terima semua perubahan apabila versi utama dinaik taraf atau reka bentuk diubah secara sengaja. Kedua-dua alat menyokong penerimaan secara berkumpulan. Selepas kemas kini besar sistem reka bentuk, terima semua perbezaan sekali gus dan tangkapan skrin baharu akan menjadi garis dasar untuk perubahan berperingkat pada masa hadapan.

Gabungkan fungsi play() Storybook (pengujian interaksi) dengan VRT: play() mensimulasikan interaksi pengguna, seperti mengklik butang atau membuka modal, kemudian tangkapan VRT menangkap keadaan yang terhasil. Hal ini menguji hasil visual komponen interaktif yang kompleks.

Percy dan Chromatic mengenakan caj bagi setiap tangkapan. Set Storybook yang besar dengan ratusan cerita, berbilang ruang pandang dan tema boleh menghasilkan ribuan tangkapan bagi setiap PR. Pantau penggunaan, gunakan penghias cerita dengan cekap dan pertimbangkan untuk melangkau VRT bagi cerita yang berfokus sepenuhnya pada logik.

Percy dan Chromatic mengautomatikkan VRT untuk Storybook dengan menemui serta menangkap semua cerita dalam pelayar awan, menghasilkan semakan perbezaan PR dan mengurus garis dasar. Digabungkan dengan argumen cerita untuk liputan keadaan dan play() untuk pengujian interaksi, kedua-duanya menyediakan jaminan kualiti visual yang menyeluruh bagi pustaka komponen.