फ्रंट एंड टेस्टिंग क्या है?

फ्रंट एंड टेस्टिंग क्या है?

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

उदाहरण के लिए, यदि आप किसी फॉर्म फ़ील्ड में अपना नाम टाइप करते हैं, तो उसमें संख्याएँ स्वीकार नहीं की जानी चाहिए। ग्राफिकल यूजर इंटरफेस (GUI) तत्वों के संरेखण की जाँच करना भी एक सामान्य उदाहरण है।

इसके अलावा, फ्रंट-एंड टेस्टिंग निम्नलिखित के लिए भी की जाती है:

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

फ्रंटएंड वेबसाइट परीक्षण योजना कैसे बनाएं?

फ्रंट-एंड टेस्टिंग प्लान बनाना एक सरल चार-चरणीय प्रक्रिया है।

चरण 1) अपने टेस्ट प्लान को प्रबंधित करने के लिए टूल खोजें।

चरण 2) फ्रंट-एंड टेस्टिंग के लिए बजट तय करें।

चरण 3) पूरी प्रक्रिया के लिए समयसीमा निर्धारित करें।

चरण 4) परियोजना का दायरा निर्धारित करें। दायरे में निम्नलिखित शामिल हैं:

• Operaआपके उपयोगकर्ताओं द्वारा उपयोग किए जाने वाले ऑपरेटिंग सिस्टम और ब्राउज़र
• दर्शकों द्वारा उपयोग किए जाने वाले लोकप्रिय उपकरण
• दर्शकों की तकनीकी दक्षता
• दर्शकों के इंटरनेट कनेक्शन की गति

फ्रंट-एंड टेस्टिंग प्लान क्यों बनाएं?

नीचे दिया गया आरेख उन दो आयामों को दर्शाता है जिन्हें एक योजना में निर्धारित करना आवश्यक है।

एक योजना यह निर्धारित करती है कि कौन से ब्राउज़र और ऑपरेटिंग सिस्टम परियोजना में निम्नलिखित पहलुओं को शामिल किया जाना चाहिए। संभावित संयोजन अनगिनत हैं, इसलिए एक योजना प्रयास और लागत दोनों को कम करती है।

इस योजना से दो स्पष्ट लाभ मिलते हैं:

• इससे परियोजना के दायरे के बारे में पूरी स्पष्टता मिलती है।
• इससे परियोजना के क्रियान्वयन के समय आत्मविश्वास मिलता है।

बेहतर फ्रंट-एंड टेस्टिंग के लिए टिप्स

बेहतर फ्रंट-एंड टेस्टिंग प्लान बनाने के लिए कुछ सुझाव:

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

फ्रंट-एंड परीक्षण उपकरण

कोई भी एक टूल स्क्रिप्टिंग, स्टाइलशीट और विजुअल्स को कवर नहीं करता है, इसलिए टीमें कई टूल्स को मिलाकर काम करती हैं।

जेएस परीक्षण उपकरण: जैस्मिन

चमेली यह परीक्षण के लिए व्यवहार-आधारित विकास ढांचा है। Javaलिपि यह कोड तकनीकी विवरण के बजाय व्यावसायिक मूल्य पर केंद्रित है, इसकी वाक्य संरचना स्पष्ट है और यह किसी अन्य फ्रेमवर्क पर निर्भर नहीं है। इसने JSSpec, ScrewUnit, JSpec और RSpec जैसे यूनिट टेस्टिंग फ्रेमवर्क का उपयोग किया। Jest और Vitest आज व्यापक रूप से उपयोग किए जाने वाले विकल्प हैं।

कार्यात्मक परीक्षण उपकरण: Selenium

Selenium यह ब्राउज़र और प्लेटफ़ॉर्म जैसे कि पर एंड-टू-एंड परीक्षण करता है। Windows, macOS और लिनक्स, और आपको इसमें परीक्षण लिखने की अनुमति देता है। Java, Pythonसी# और अन्य भाषाएँ। Selenium आईडीई इसमें रिकॉर्डिंग और प्लेबैक की सुविधा जोड़ी गई है, इसलिए पहली स्क्रिप्ट के लिए किसी कोड की आवश्यकता नहीं है। Cypress और नाटककार अंतर्निहित प्रतीक्षा के साथ समान विषय को कवर करते हैं और tracआईएनजी.

CSS और विज़ुअल टूल्स: CSSLint और BackstopJS

सीएसलिंट यह एक ओपन-सोर्स लिंटर है जिसे लिखा गया है Javaयह स्क्रिप्ट ब्राउज़र और कमांड लाइन दोनों से चलती है। अब इसका सक्रिय रूप से रखरखाव नहीं किया जाता है, इसलिए टीमें अब स्टाइललिंट या ईएसएलिंट के सीएसएस समर्थन का उपयोग करके स्टाइलशीट की जांच करती हैं।

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

किसी भी फ्रंट-एंड टेस्टिंग टूल के लिए दो चुनौतियाँ लागू होती हैं:

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

फ्रंट-एंड प्रदर्शन अनुकूलन

फ्रंट-एंड परफॉर्मेंस टेस्टिंग एक ही सवाल का जवाब देती है: पेज कितनी तेज़ी से लोड होता है और इस्तेमाल के लायक बनता है? एप्लिकेशन पर ज़्यादा लोड पड़ने से पहले, किसी एक यूज़र के लिए इसे ट्यून करना एक अच्छी प्रैक्टिस है। प्रदर्शन का परीक्षण.

फ्रंट-एंड प्रदर्शन अनुकूलन क्यों महत्वपूर्ण है?

पहले परफॉर्मेंस ऑप्टिमाइजेशन का मतलब सर्वर को ट्यून करना होता था, क्योंकि ज्यादातर वेबसाइटें स्टैटिक होती थीं और प्रोसेसिंग सर्वर साइड पर होती थी।

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

फ्रंट-एंड प्रदर्शन अनुकूलन का क्या लाभ है?

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

फ्रंट-एंड प्रदर्शन परीक्षण उपकरण

1. पेजस्पीड इनसाइट्स

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

2. Pingdom

Pingdom यह एक वेबसाइट और परफॉर्मेंस मॉनिटरिंग सेवा है। यह पेज धीमा होने या ऑफलाइन होने पर ग्राहकों को अलर्ट करती है, जिससे समस्याएँ उपयोगकर्ताओं द्वारा रिपोर्ट किए जाने से पहले ही सामने आ जाती हैं।

विशेषताएं:

• यह वेब पेज के सभी भागों की जांच करता है।
• प्रदर्शन का अवलोकन प्रदान करता है
• Tracयह आपके प्रदर्शन का इतिहास है
• आपको कई स्थानों से परीक्षण करने की सुविधा देता है

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