HTML Academy · पाठ

HTML Snapshot परीक्षण

snapshot tests से अनचाहे HTML बदलाव पकड़ें

पाठ 4, कुल 4 में से14 चरण

HTML Snapshot परीक्षण, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्नैपशॉट परीक्षण क्या है

स्नैपशॉट परीक्षण पहली बार चलने पर किसी घटक या पृष्ठ के रेंडर किए गए परिणाम को दर्ज करता है, फिर बाद की बारों में नए परिणाम की तुलना सहेजे गए स्नैपशॉट से करता है। HTML परिणाम में कोई भी बदलाव होने पर परीक्षण विफल हो जाता है, जब तक कि स्नैपशॉट को जानबूझकर अपडेट न किया जाए।

जेस्ट स्नैपशॉट परीक्षण

जेस्ट का toMatchSnapshot() मिलानकर्ता किसी मान (जिसमें HTML में रेंडर किया गया JSX भी शामिल है) को क्रमबद्ध करके सहेजी गई फ़ाइल से उसकी तुलना करता है। जानबूझकर बदलाव होने पर स्नैपशॉट अपडेट करने के लिए npx jest -u चलाइए। आकस्मिक रेंडरिंग बदलावों के विरुद्ध परीक्षण प्रतिगमन-जाल का काम करते हैं।

import { render } from "@testing-library/react";
import Button from "./Button";

test("Button renders consistently", () => {
  const { container } = render(<Button>Save</Button>);
  expect(container.innerHTML).toMatchSnapshot();
});

स्टोरीबुक परीक्षण रनर

स्टोरीबुक परीक्षण रनर हर स्टोरी को चलाता है और ऐक्स (अभिगम्यता) तथा DOM क्रमबद्धता के माध्यम से उसके परिणाम का स्नैपशॉट बनाता है। क्रोमैटिक के साथ मिलकर यह इसके ऊपर दृश्य प्रतिगमन भी जोड़ता है — DOM अंतरों के अलावा पिक्सेल-स्तरीय अंतर।

पर्सी या क्रोमैटिक के साथ दृश्य प्रतिगमन

पर्सी और क्रोमैटिक रेंडर किए गए पृष्ठों का चित्रों के रूप में स्नैपशॉट लेते हैं और दृश्य अंतर सामने लाते हैं। ये उन CSS प्रतिगमनों को पकड़ते हैं जिन्हें DOM स्नैपशॉट नहीं पकड़ पाते (फ़ॉन्ट बदलना, मार्जिन में छोटा बदलाव या रंग में परिवर्तन)। DOM स्नैपशॉट (कम लागत वाले, तेज़) को दृश्य स्नैपशॉट (महँगे, व्यापक) के साथ मिलाइए।

स्नैपशॉट का रखरखाव

जो स्नैपशॉट "बहुत आसानी से" बदलते हैं, वे शोर बन जाते हैं। अस्थिर मानों (तारीखों, पहचानों, यादृच्छिक कुंजियों) का स्नैपशॉट लेने से बचिए। उन मानों के लिए जेस्ट के प्रॉपर्टी मिलानकर्ताओं (expect.any(String)) का उपयोग कीजिए जो हर बार स्वाभाविक रूप से बदलते हैं। स्नैपशॉट छोटे और केंद्रित रखिए।

स्नैपशॉट की कोड समीक्षा

पुल अनुरोधों में स्नैपशॉट फ़ाइलों के अंतर प्राथमिक समीक्षा सामग्री होते हैं। समीक्षक यह जाँचते हैं कि DOM में बदलाव जानबूझकर किए गए और उपयोगी हैं — इससे "सरल" CSS बदलाव के आकस्मिक क्रमिक प्रभाव पकड़े जाते हैं। स्नैपशॉट के अंतरों को किसी भी अन्य अंतर की तरह समझिए।

हर चीज़ का स्नैपशॉट न लें

बहुत बड़े शीर्ष-स्तरीय पृष्ठ रेंडरिंग का स्नैपशॉट लेना नाज़ुक होता है — हर छोटा बदलाव एक बहुत बड़े अंतर में बदल जाता है। घटक स्तर पर स्नैपशॉट लें: हर बटन, हर कार्ड, हर FormField। पृष्ठ-स्तरीय रेंडरिंग के लिए इसके बजाय दृश्य प्रतिगमन परीक्षण उचित हैं।

स्नैपशॉट का क्रमांकन

क्रमांकन का तरीका चुनें: पूर्ण HTML, सरलीकृत DOM, केवल प्रॉप्स या अभिगम्यता ट्री। हर प्रारूप अलग-अलग प्रतिगमन पकड़ता है। यूआई घटकों के लिए पूर्ण HTML सबसे विस्तृत है; प्रॉप्स-आधारित तर्क के लिए केवल प्रॉप्स वाला तरीका कम खर्चीला है और इसमें गलत-सकारात्मक परिणाम बहुत कम आते हैं।

स्नैपशॉट कब टूटते हैं

सबसे सामान्य कारण ऐसा पुनर्गठन है, जिससे समान परिणाम देने वाला लेकिन अलग संरचना वाला HTML बनता है। अंतर की जाँच करें: यदि बदलाव जानबूझकर किया गया है और अच्छा है, तो स्नैपशॉट अपडेट करें। यदि बदलाव अप्रत्याशित है, तो मूल कोड ठीक करें। जाँच किए बिना कभी भी आँख मूँदकर jest -u न चलाएँ।

विभिन्न ब्राउज़र के स्नैपशॉट

दृश्य प्रतिगमन उपकरण कई ब्राउज़र में रेंडर करके ब्राउज़र-विशिष्ट अंतरों की जानकारी देते हैं। इनका उपयोग सफ़ारी और क्रोम में अलग-अलग रेंडर होने वाले CSS को पकड़ने के लिए करें — शुरुआती अपनाने के चरण में नई लेआउट सुविधाओं के साथ ऐसा अक्सर होता है। विभिन्न ब्राउज़र के स्नैपशॉट के बिना ऐसे प्रतिगमन केवल मैन्युअल QA से ही पकड़े जाते हैं।

अन्य परीक्षणों के साथ संयोजन

स्नैपशॉट परीक्षण आवश्यक हैं, लेकिन पर्याप्त नहीं। वे अनजाने रेंडरिंग बदलाव पकड़ते हैं, पर तर्क संबंधी त्रुटियाँ नहीं पकड़ते — जैसे बटन क्लिक करने पर सही काम होना। व्यवहार के लिए इकाई परीक्षणों और उपयोगकर्ता प्रवाह के लिए एंड-टू-एंड परीक्षणों के साथ इनका संयोजन करें — हर स्तर अलग-अलग विफलताएँ पकड़ता है।

प्रदर्शन

स्नैपशॉट परीक्षण तेज़ होते हैं — वे स्ट्रिंग और फ़ाइलों की तुलना करते हैं। दृश्य प्रतिगमन परीक्षण धीमे होते हैं, क्योंकि वे पिक्सेल रेंडर करते हैं और छवियों की तुलना करते हैं, अक्सर कई ब्राउज़र में। हर CI बिल्ड पर स्नैपशॉट चलाएँ; हर PR पर दृश्य प्रतिगमन चलाएँ, लेकिन CI बजट के अनुसार हर कमिट पर चलाना आवश्यक नहीं हो सकता।

ज्ञान जाँच

DOM स्नैपशॉट परीक्षणों को आमतौर पर Percy या Chromatic जैसे दृश्य प्रतिगमन परीक्षणों के साथ क्यों जोड़ा जाता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

स्नैपशॉट परीक्षण पहली बार चलने पर रेंडर किए गए HTML को कैप्चर करता है और बाद की बारियों में किसी भी बदलाव को चिह्नित करता है। घटक DOM के लिए Jest toMatchSnapshot, स्टोरीबुक की कहानियों के लिए स्टोरीबुक परीक्षण रनर और पिक्सेल स्तर पर दृश्य प्रतिगमन के लिए Percy/Chromatic का उपयोग करें। पृष्ठ स्तर के बजाय घटक स्तर पर स्नैपशॉट लें, अस्थिर मानों को बाहर रखें और PR में अंतरों की सावधानीपूर्वक समीक्षा करें। पूर्ण कवरेज के लिए इन्हें इकाई और एंड-टू-एंड परीक्षणों के साथ मिलाएँ।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “HTML Snapshot परीक्षण” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “HTML Snapshot परीक्षण” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“HTML Snapshot परीक्षण” में मैं क्या सीखूँगा?

snapshot tests से अनचाहे HTML बदलाव पकड़ें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“HTML Snapshot परीक्षण” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ