An introduction to frontend testing

Sep 14, 2025
कैसे करना है
  • [2 9] एक परीक्षण संस्कृति को गले लगाना और लागू करना

    • परीक्षण फ्रंटेंड कोड अभी भी कई डेवलपर्स के लिए एक भ्रमित अभ्यास है। लेकिन फ्रंटेंड विकास के साथ और अधिक जटिल हो रहा है और स्थिरता और स्थिरता के लिए जिम्मेदार डेवलपर्स के साथ पहले कभी नहीं, फ्रंटेंड परीक्षण को आपके कोडबेस के बराबर नागरिक के रूप में गले लगाया जाना चाहिए। हम आपके विभिन्न परीक्षण विकल्पों को तोड़ते हैं और समझाते हैं कि जिन स्थितियों के लिए उनका सबसे अच्छा उपयोग किया जाता है।

    फ्रंटेंड परीक्षण एक कंबल शब्द है जिसमें विभिन्न प्रकार की स्वचालित परीक्षण रणनीतियों को शामिल किया गया है। इनमें से कुछ, यूनिट और एकीकरण परीक्षण की तरह, वर्षों से बैकएंड विकास समुदाय के भीतर एक स्वीकृत सर्वोत्तम अभ्यास रहे हैं। अन्य रणनीतियों नए हैं, और अब बैकएंड और फ्रंटेंड विकास में बदलावों से स्टेम का उपयोग किया जाता है।

    इस लेख के अंत तक, आपको इस बात का आकलन करना चाहिए कि कौन सी परीक्षण रणनीतियों आपकी टीम और कोडबास के साथ सबसे अच्छी तरह से फिट हो। निम्नलिखित कोड उदाहरण जैस्मीन ढांचे का उपयोग करके लिखे जाएंगे, लेकिन नियम और प्रक्रिया अधिकांश परीक्षण ढांचे में समान हैं।

    • [2 9] उपयोगकर्ता परीक्षण सॉफ्टवेयर के सर्वश्रेष्ठ टुकड़े

    01. यूनिट परीक्षण

    यूनिट परीक्षण, परीक्षण दिग्गजों में से एक, सभी परीक्षण प्रकारों के निम्नतम स्तर पर है। इसका उद्देश्य यह सुनिश्चित करना है कि आपके कोड (बुलाए गए इकाइयों) के सबसे छोटे बिट्स को उम्मीद के रूप में स्वतंत्र रूप से समारोह सुनिश्चित करना है।

    कल्पना कीजिए कि आपके पास एक घर के लिए एक लेगो सेट है। निर्माण शुरू करने से पहले, आप यह सुनिश्चित करना चाहते हैं कि प्रत्येक व्यक्तिगत टुकड़ा (पांच लाल वर्ग, तीन पीले आयताकार) के लिए जिम्मेदार है। यूनिट परीक्षण यह सुनिश्चित कर रहा है कि कोड के व्यक्तिगत सेट - इनपुट सत्यापन और गणना जैसी चीजें - बड़ी सुविधा बनाने से पहले इरादे से काम कर रही हैं।

    यह 'एक चीज अच्छी तरह से' मंत्र के साथ यूनिट परीक्षणों के बारे में सोचने में मदद करता है। यदि आपके पास एक जिम्मेदारी के साथ कोड का एक टुकड़ा है, तो आप इसके लिए एक इकाई परीक्षण लिखना चाहते हैं।

    आइए निम्नलिखित कोड स्निपेट देखें, जिसमें हम एक साधारण कैलकुलेटर के लिए एक इकाई परीक्षण लिख रहे हैं:

    [6 9] वर्णन ("कैलकुलेटर ऑपरेशंस", फ़ंक्शन () { यह ("दो नंबर जोड़ना चाहिए", फ़ंक्शन () { कैलकुलेटर O.INIT (); var परिणाम = calculator.addnumbers (7,3); उम्मीद (परिणाम) .tobe (10); }); });

    हमारे में [2 9] कैलकुलेटर

    आवेदन, हम यह सुनिश्चित करना चाहते हैं कि गणना हमेशा स्वतंत्र रूप से काम करती है जिस तरह से हम उम्मीद करते हैं। उदाहरण में, हम यह सुनिश्चित करना चाहते हैं कि हम हमेशा एक साथ दो संख्याओं को सटीक रूप से जोड़ सकें।

    पहली चीज जो हम करते हैं वह परीक्षण की श्रृंखला का वर्णन करता है जिन्हें हम जैस्मीन का उपयोग करके चलाने जा रहे हैं [2 9] वर्णन

    । यह एक परीक्षण सूट बनाता है - आवेदन के एक विशेष क्षेत्र से संबंधित परीक्षणों का एक समूह। हमारे कैलकुलेटर के लिए, हम अपने स्वयं के सूट में प्रत्येक गणना परीक्षण समूह करेंगे।

    सूट न केवल कोड संगठन के लिए महान हैं, बल्कि इसलिए कि वे आपको स्वीट चलाने में सक्षम बनाता है। यदि आप किसी एप्लिकेशन के लिए एक नई सुविधा पर काम कर रहे हैं, तो आप सक्रिय विकास के दौरान हर परीक्षा को चलाने के लिए नहीं चाहते हैं, क्योंकि यह बहुत समय लेने वाला होगा। परीक्षण सूट व्यक्तिगत रूप से आपको अधिक तेज़ी से विकसित करने देता है।

    इसके बाद, हम अपने वास्तविक परीक्षण लिखते हैं। का उपयोग [2 9] यह

    समारोह, हम परीक्षण की सुविधा या टुकड़ा लिखते हैं जो हम परीक्षण कर रहे हैं। हमारा उदाहरण अतिरिक्त फ़ंक्शन का परीक्षण करता है, इसलिए हम परिदृश्य चलेंगे जो पुष्टि करते हैं कि यह सही तरीके से काम कर रहा है।

    फिर हम अपना परीक्षण दावा लिखते हैं, जहां हम परीक्षण करते हैं कि अगर हम उम्मीद करते हैं तो हमारा कोड कार्य करता है। हम अपने कैलकुलेटर को प्रारंभ करते हैं, और हमारे चलाते हैं [2 9] ऐडनम्बर्स

    दो संख्याओं के साथ कार्य हम जोड़ना चाहते हैं। हम परिणाम के रूप में संख्या संग्रहीत करते हैं, और फिर जोर देते हैं कि यह हमारी संख्या के बराबर है (हमारे मामले में, 10)।

    अगर [2 9] ऐडनम्बर्स

    सही आंकड़ों को वापस करने में विफल रहता है, हमारा परीक्षण विफल हो जाएगा। हम अपनी अन्य गणनाओं के लिए समान परीक्षण लिखेंगे - घटाव, गुणा, आदि।

    02. स्वीकृति परीक्षण

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

    स्वीकृति परीक्षण आपके चल रहे एप्लिकेशन के माध्यम से जाते हैं और निर्दिष्ट कार्यों को सुनिश्चित करते हैं, उपयोगकर्ता इनपुट और उपयोगकर्ता प्रवाह पूर्ण और कार्य कर रहे हैं।

    सिर्फ इसलिए कि हमारे आवेदन के [2 9] ऐडनम्बर्स

    फ़ंक्शन सही संख्या देता है, इसका मतलब यह नहीं है कि कैलकुलेटर इंटरफ़ेस निश्चित रूप से सही परिणाम देने की उम्मीद के रूप में कार्य करेगा। क्या होगा यदि हमारे बटन अक्षम हैं, या गणना परिणाम प्रदर्शित नहीं होता है? स्वीकृति परीक्षण हमें इन सवालों के जवाब देने में मदद करते हैं। [6 9] वर्णन करें ("विफलता स्थिति साइन अप करें", फ़ंक्शन () { यह ("अमान्य जानकारी के साथ साइनअप की अनुमति नहीं देना चाहिए", फ़ंक्शन () { वार पेज = विज़िट ("/ होम"); पेज.फिल_इन ("इनपुट [नाम = 'ईमेल']", "एक ईमेल नहीं"); पेज.क्लिक ("बटन [टाइप = सबमिट]"); पेज.क्लिक ("बटन [टाइप = सबमिट]"); अपेक्षा (page.find ("# signuperror")। Hasclass ("छुपा"))। tobefalysy (); }); });

    संरचना हमारे यूनिट परीक्षण के समान ही दिखती है: हम एक स्वीट को परिभाषित करते हैं [2 9] वर्णन

    , फिर हमारे परीक्षण के भीतर लिखें [2 9] यह फ़ंक्शन, फिर कुछ कोड निष्पादित करें और इसके परिणाम की जांच करें।

    विशिष्ट कार्यों और मूल्यों के आसपास परीक्षण करने के बजाय, हालांकि, यहां हम यह देखने के लिए परीक्षण कर रहे हैं कि क्या कोई विशेष वर्कफ़्लो (एक साइन-अप प्रवाह) अपेक्षित के रूप में व्यवहार करता है जब हम कुछ बुरी जानकारी भरते हैं। यहां हो रहा है कि यहां हो रहा है, जैसे फॉर्म सत्यापन जो यूनिट परीक्षण किए जा सकते हैं, साथ ही साथ किसी भी हैंडलिंग के लिए कोई भी हैंडलिंग, आईडी के साथ एक तत्व द्वारा प्रदर्शित किया जाता है [2 9] साइन्योरर

    ।

    स्वीकृति परीक्षण यह सुनिश्चित करने के लिए एक शानदार तरीका है कि महत्वपूर्ण अनुभव प्रवाह हमेशा सही ढंग से काम कर रहे हैं। किनारे के मामलों के आसपास परीक्षण जोड़ना भी आसान है, और अपनी क्यूए टीमों को आपके आवेदन में ढूंढने में मदद करने के लिए।

    जब स्वीकृति परीक्षण लिखना चाहते हैं, तो आपकी उपयोगकर्ता की कहानियां शुरू करने के लिए एक महान जगह हैं। आपका उपयोगकर्ता आपकी वेबसाइट के साथ कैसे इंटरैक्ट करता है, और उस बातचीत का अपेक्षित परिणाम क्या है? यह यूनिट परीक्षण के लिए अलग है, जो कि फ़ंक्शन आवश्यकताओं की तरह कुछ मेल खाता है, जैसे एक मान्य क्षेत्र के आसपास की आवश्यकताओं।

    03. विजुअल रिग्रेशन परीक्षण

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

    यह आमतौर पर एक हेडलेस ब्राउज़र के भीतर ली गई स्क्रीनशॉट की तुलना करके किया जाता है (एक ब्राउज़र जो सर्वर पर चलता है)। छवि तुलना उपकरण फिर दो शॉट्स के बीच किसी भी अंतर का पता लगाते हैं।

    Phantomcss जैसे एक उपकरण का उपयोग करके, आपके परीक्षण निर्दिष्ट करते हैं कि टेस्ट रनर को कैसे नेविगेट करना चाहिए, स्क्रीनशॉट लें, और ढांचा आपको उन विचारों में आने वाले मतभेदों को दिखाता है।

    [6 9] कैस्पर.स्टार्ट ("/ होम")। फिर (फ़ंक्शन () { // प्रपत्र की प्रारंभिक स्थिति phantomcss.screenshot ("# साइनअपफॉर्म", "साइन अप फॉर्म"); // साइन अप बटन दबाएं (त्रुटि को ट्रिगर करना चाहिए) कैस्पर.क्लिक ("बटन # साइनअप"); // यूआई घटक का एक स्क्रीनशॉट लें Phantomcss.screenshot ("# साइनअपफॉर्म", "साइन अप फॉर्म त्रुटि"); // नाम विशेषताओं द्वारा फ़ॉर्म भरें & amp; प्रस्तुत कैस्पर। फील ("# साइनअपफॉर्म", { नाम: "एलिसिया सेडलॉक", ईमेल: "[email protected]" }, सच); // सफलता की स्थिति का दूसरा स्क्रीनशॉट लें phantomcss.screenshot ("# साइनअपफॉर्म", "साइन अप फॉर्म सफलता"); });

    This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development

    यह दृश्य प्रतिगमन ढांचा आपके आवेदन में निर्णय पेड़ों को दर्शाता है, विकास के बाहर जटिलता को उजागर करता है

    स्वीकृति और इकाई परीक्षण के विपरीत, यदि आप कुछ नया निर्माण कर रहे हैं तो दृश्य प्रतिगमन परीक्षण को लाभ उठाना मुश्किल है। चूंकि आपका यूआई सक्रिय विकास के दौरान तेजी से और कठोर परिवर्तन दिखाई देगा, आप संभवतः इन परीक्षणों को सहेज लेंगे जब इंटरफ़ेस के टुकड़े दृष्टि से पूर्ण हों। इसलिए, विजुअल रिग्रेशन टेस्ट अंतिम परीक्षण हैं जिन्हें आप लिखना चाहिए।

    वर्तमान में, कई विजुअल रिग्रेशन टूल्स को मैन्युअल प्रयास की आवश्यकता होती है। आपको अपनी शाखा पर विकास शुरू करने से पहले अपने स्क्रीनशॉट कैप्चर को चलाने के लिए हो सकता है, या मैन्युअल रूप से बेसलाइन स्क्रीनशॉट अपडेट करना पड़ सकता है क्योंकि आप इंटरफ़ेस में परिवर्तन करते हैं।

    यह केवल विकास की प्रकृति के कारण है - में परिवर्तन [2 9] यूआई

    जानबूझकर हो सकता है, लेकिन परीक्षण केवल 'हां, यह वही है' या 'नहीं, यह अलग है'। हालांकि, यदि दृश्य प्रतिगमन आपके आवेदन के भीतर एक दर्द बिंदु है, तो यह दृष्टिकोण लगातार फिक्सिंग रिग्रेशन की तुलना में आपकी टीम के समय और प्रयास को सहेज सकता है।

    04. अभिगम्यता और प्रदर्शन परीक्षण

    चूंकि अग्रणी परीक्षण के आसपास संस्कृति और जागरूकता बढ़ती है, इसलिए पारिस्थितिक तंत्र के विभिन्न पहलुओं का परीक्षण करने की हमारी क्षमता भी होती है। पर ध्यान केंद्रित किया [15 9] पहुँच

    और हमारी तकनीकी संस्कृति में प्रदर्शन, आपके परीक्षण सूट में इसे एकीकृत करने से यह सुनिश्चित करने में सहायता मिलती है कि इन अवधारणाएं प्राथमिकता बनी रहें।

    यदि आपको प्रदर्शन बजट या अभिगम्यता मानकों को लागू करने में समस्याएं हैं, तो यह इन आवश्यकताओं को लोगों के दिमाग में सबसे आगे रखने का एक तरीका है।

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

    हालांकि, यदि आप किसी कार्य धावक का उपयोग नहीं कर रहे हैं, तो आप Perfbudget को एक स्टैंडअलोन एनपीएम मॉड्यूल के रूप में भी पकड़ सकते हैं और परीक्षणों को मैन्युअल रूप से चला सकते हैं।

    टर्मिनल के माध्यम से इसे चलाने के लिए यह कैसा दिखता है:

    [6 9] Perfbudget - Http://www.aliecibial.com --key [वेबपैगेटेस्ट एपीआई कुंजी] - स्पीड इंडेक्स 2000 - डेडर 400 और इसी तरह, ग्रंट के माध्यम से स्थापित: perfbudget: { चूक: { विकल्प: { URL: 'http://alicibial.com', कुंजी: 'वेबपैगेटेस्ट एपी कुंजी', बजट: { SpeedIndex: '2000', प्रस्तुत करें: '400' } } } } [...] grunt.registertask ('डिफ़ॉल्ट', ['jshint', 'perfbudget']);

    एक ही विकल्प अभिगम्यता परीक्षण के लिए उपलब्ध हैं। तो PA11Y के लिए, आप या तो चला सकते हैं [2 9] Pa11Y

    आउटपुट के लिए अपने ब्राउज़र में कमांड या इस चरण को स्वचालित करने के लिए एक कार्य सेट अप करें। टर्मिनल में: [6 9] Pa11y aliecibial.com // एनपीएम इंस्टॉल के बाद एक जावास्क्रिप्ट कमांड के रूप में var pa11y = आवश्यकता ('PA11Y'); // PA11Y की आवश्यकता है var test = pa11y (); // सेट करने के लिए PA11Y तैयार करें test.run ('alicipial.com', फ़ंक्शन (त्रुटि, परिणाम) { // हमारे परिणामों को पार्स करें });

    इन श्रेणियों में अधिकांश उपकरण काफी प्लग-एंड-प्ले हैं, लेकिन आपको यह भी अनुकूलित करने का विकल्प भी प्रदान करते हैं कि परीक्षण कैसे चलते हैं - उदाहरण के लिए, आप उन्हें कुछ डब्ल्यूसीएजी मानकों को अनदेखा करने के लिए सेट कर सकते हैं।

    Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation

    Layemble.js एक लोकप्रिय छवि तुलना पुस्तकालय है, और आपको दृश्य भेदभाव को ट्रिगर करने के बारे में बहुत नियंत्रण देता है

    [2 9] अगला पृष्ठ: अपने वर्कफ़्लो में परीक्षण कैसे पेश करें

    • 1
    • [2 9] 2

    वर्तमान पृष्ठ: विभिन्न प्रकार के फ्रंटएंड परीक्षण (और उनका उपयोग कब करें)

    [21 9] अगला पृष्ठ एक परीक्षण संस्कृति को गले लगाना और लागू करना

    कैसे करना है - सर्वाधिक लोकप्रिय लेख

    Adobe XD: How to use the Auto-Animate feature

    कैसे करना है Sep 14, 2025

    (छवि क्रेडिट: एडोब) [1 9] प्रोटोटाइपिंग गेम में ..

    घटक को एनिमेट करने के लिए प्रतिक्रिया वसंत का उपयोग कैसे करें

    कैसे करना है Sep 14, 2025

    (छवि क्रेडिट: मैट क्राउच) [1 9] प्रतिक्रिया वसं�..

    एक बिल्ली कैसे आकर्षित करें

    कैसे करना है Sep 14, 2025

    एक बिल्ली को आकर्षित करने के बारे में जानना चाहते..

    Convert Flash games to HTML5

    कैसे करना है Sep 14, 2025

    एचटीएमएल 5 और जावास्क्रिप्ट के पक्ष में एडोब द्वा..

    Paint a mischievous hare in watercolour

    कैसे करना है Sep 14, 2025

    प्राणीशास्त्र, जानवरों और वन्यजीवन का अध्ययन करने के बाद हमेशा मेरे लिए �..

    Sharpen your hard-surface modelling in 3ds Max

    कैसे करना है Sep 14, 2025

    इस ट्यूटोरियल में, मैं उन तकनीकों और विधियों को स�..

    वी-रे के साथ बड़े पैमाने पर विस्फोट कैसे करें

    कैसे करना है Sep 14, 2025

    3 डी विस्फोटों को बनाना और संकुचित करना आम तौर पर द..

    5 ways to manage cashflow effectively

    कैसे करना है Sep 14, 2025

    अपने कैशफ्लो को नियंत्रित करना फ्रीलांस सफलता क�..

    श्रेणियाँ