Storybook के लिए Percy और Chromatic

Percy क्लाउड-आधारित VRT प्लेटफ़ॉर्म है, जो CI कार्यप्रवाहों के साथ एकीकृत होता है। यह वेब पृष्ठों और Storybook स्टोरीज़ के स्क्रीनशॉट लेता है, क्लाउड में बेसलाइन संग्रहीत करता है और वेब इंटरफ़ेस के माध्यम से उपलब्ध दृश्य अंतर समीक्षाएँ बनाता है। यह Playwright, Cypress, Selenium और Storybook का समर्थन करता है।

Chromatic विशेष रूप से Storybook के लिए बनाया गया VRT प्लेटफ़ॉर्म है। यह क्लाउड ब्राउज़र में सभी स्टोरीज़ के स्क्रीनशॉट लेता है, उनकी तुलना बेसलाइन से करता है और अंतर समीक्षा इंटरफ़ेस बनाता है। Chromatic Storybook को होस्ट की गई घटक दस्तावेज़ीकरण साइट के रूप में भी प्रकाशित करता है।

Percy और Chromatic दोनों हर Storybook स्टोरी को स्वचालित रूप से खोजकर उसका स्नैपशॉट लेते हैं। किसी अतिरिक्त परीक्षण कोड की आवश्यकता नहीं होती—अपने घटकों के लिए स्टोरीज़ लिखें, CLI चलाएँ और हर दृश्य अवस्था का स्वचालित परीक्षण हो जाएगा। इससे मौजूदा Storybook प्रोजेक्ट्स में इन्हें अपनाना तेज़ हो जाता है।

@percy/cli और @percy/storybook इंस्टॉल करें, CI में PERCY_TOKEN परिवेश चर जोड़ें और CI कार्यप्रवाह में percy storybook ./storybook-static जोड़ें। Percy सभी स्टोरीज़ के स्नैपशॉट लेता है और Percy डैशबोर्ड पर VRT बिल्ड अपने-आप पोस्ट करता है।

chromatic इंस्टॉल करें, CI में CHROMATIC_PROJECT_TOKEN जोड़ें और chromatic --project-token=... चलाएँ। पहली बार चलाने पर बेसलाइन स्थापित होती हैं। इसके बाद के रन बेसलाइन से तुलना करते हैं और GitHub PR जाँचों में समीक्षा लिंक पोस्ट करते हैं।

दोनों उपकरण एक PR जाँच जोड़ते हैं, जो “X बदलाव मिले हैं।” दिखाती है। इस पर क्लिक करने से साथ-साथ या ओवरले अंतर वाली समीक्षा इंटरफ़ेस खुलती है। समीक्षक जानबूझकर किए गए बदलावों को स्वीकार करते हैं, जिससे नई बेसलाइन स्थापित होती हैं, या अनजाने प्रतिगमन के लिए सुधार का अनुरोध करते हैं।

एकाधिक स्टोरी वैरिएंट बनाने के लिए Storybook args (कंट्रोल्स) का उपयोग करें: डिफ़ॉल्ट, लोडिंग, त्रुटि, अक्षम, LongText, SmallViewport। हर वैरिएंट एक अलग VRT स्नैपशॉट बन जाता है—अलग-अलग परीक्षण फ़ाइलें लिखे बिना अवस्थाओं का व्यापक कवरेज।

Chromatic और Percy हर स्नैपशॉट के लिए एकाधिक व्यूपोर्ट चौड़ाइयों का समर्थन करते हैं। स्टोरी में या विश्व स्तर पर .storybook/preview.js व्यूपोर्ट में इन्हें कॉन्फ़िगर करें। प्रतिक्रियाशीलता और थीम से जुड़े प्रतिगमन एक साथ पकड़ने के लिए हर व्यूपोर्ट और हर थीम (उजली/गहरी) पर VRT चलाएँ।

प्रमुख संस्करण बढ़ाने या जानबूझकर किए गए नए डिज़ाइन के समय सभी बदलाव स्वीकार करें। दोनों उपकरण एक साथ कई बदलाव स्वीकार करने की सुविधा देते हैं। किसी बड़े डिज़ाइन सिस्टम अपडेट के बाद सभी अंतरों को एक साथ स्वीकार करें; नए स्क्रीनशॉट भविष्य के क्रमिक बदलावों के लिए बेसलाइन बन जाएँगे।

Storybook के play() फ़ंक्शन (इंटरैक्शन परीक्षण) को VRT के साथ मिलाएँ: play() उपयोगकर्ता की इंटरैक्शन का अनुकरण करता है (बटन पर क्लिक करना, मोडल खोलना), फिर VRT स्नैपशॉट परिणामी अवस्था को कैप्चर करता है। इससे जटिल इंटरैक्टिव घटकों के दृश्य आउटपुट का परीक्षण होता है।

Percy और Chromatic हर स्नैपशॉट के आधार पर शुल्क लेते हैं। सैकड़ों स्टोरीज़, कई व्यूपोर्ट और थीम वाले बड़े Storybook सूट, हर PR पर हज़ारों स्नैपशॉट बना सकते हैं। उपयोग पर नज़र रखें, स्टोरी डेकोरेटर का कुशलता से उपयोग करें और केवल लॉजिक पर केंद्रित स्टोरीज़ के लिए VRT छोड़ने पर विचार करें।

Percy और Chromatic क्लाउड ब्राउज़र में सभी स्टोरीज़ को खोजकर उनके स्नैपशॉट लेते हैं, PR के लिए अंतर समीक्षाएँ बनाते हैं और बेसलाइन का प्रबंधन करते हैं, जिससे Storybook के लिए VRT स्वचालित हो जाता है। अवस्था कवरेज के लिए स्टोरी args और इंटरैक्शन परीक्षण के लिए play() के साथ मिलकर, ये घटक लाइब्रेरीज़ के लिए व्यापक दृश्य गुणवत्ता आश्वासन प्रदान करते हैं।