कठोर परीक्षण सिम्युलेटेड एंड-टू-एंड उपयोगकर्ता परीक्षणों के साथ वास्तविक दुनिया से मिलता है।

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

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

साइप्रस का उपयोग करके शुरू से अंत तक परीक्षण शुरू करना

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

उदाहरण के तौर पर एक लॉगिन फॉर्म लें। आदर्श रूप से, आप परीक्षण करेंगे कि क्या लॉगिन स्क्रीन उसी तरह से पॉप अप होती है जैसा उसे होना चाहिए और क्या वह वही करती है जो उसे करना चाहिए था। मूलतः, अंतर्निहित तकनीकी विवरण गैर-महत्वपूर्ण हैं। अंतिम लक्ष्य बस उपयोगकर्ता के स्थान पर कदम रखना और उनके संपूर्ण अनुभव का मूल्यांकन करना है।

instagram viewer

सरो एक बेहतरीन स्वचालन परीक्षण ढाँचा है जो इनमें से कुछ के साथ संगत है सबसे लोकप्रिय जावास्क्रिप्ट फ्रेमवर्क. ब्राउज़र में सीधे परीक्षण चलाने की इसकी क्षमता और परीक्षण सुविधाओं का व्यापक सूट परीक्षण को सहज और कुशल बनाता है। यह विभिन्न परीक्षण दृष्टिकोणों का भी समर्थन करता है जिनमें शामिल हैं:

  • यूनिट परीक्षण
  • एंड-टू-एंड टेस्ट
  • एकीकरण परीक्षण

रिएक्ट एप्लिकेशन के लिए एंड-टू-एंड परीक्षण लिखने के लिए, इन उपयोगकर्ता कहानियों पर विचार करें:

  • उपयोगकर्ता संबंधित सबमिट बटन के साथ एक इनपुट फ़ील्ड देख सकता है।
  • उपयोगकर्ता इनपुट फ़ील्ड में एक खोज क्वेरी दर्ज कर सकता है।
  • सबमिट बटन पर क्लिक करने के बाद, उपयोगकर्ता को इनपुट फ़ील्ड के ठीक नीचे प्रदर्शित वस्तुओं की एक सूची देखनी चाहिए।

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

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं GitHub कोष

एक रिएक्ट प्रोजेक्ट सेट करें

प्रारंभ करना, Vite का उपयोग करके एक रिएक्ट प्रोजेक्ट बनाएं या का उपयोग करें बुनियादी रिएक्ट एप्लिकेशन सेट करने के लिए create-react-app कमांड. एक बार इंस्टॉलेशन प्रक्रिया पूरी हो जाने पर, आगे बढ़ें और अपने प्रोजेक्ट में साइप्रस पैकेज को एक देव निर्भरता के रूप में इंस्टॉल करें:

npm install cypress --save-dev

अब, अपना अपडेट करें package.json इस स्क्रिप्ट को जोड़कर फ़ाइल करें:

"test": "npx cypress open"

एक कार्यात्मक घटक बनाएँ

में स्रोत निर्देशिका, एक फ़ोल्डर बनाएं और उसे नाम दें अवयव. इस फ़ोल्डर के अंदर, एक नया जोड़ें उत्पाद.जेएसएक्स फ़ाइल, और नीचे दिए गए कोड को शामिल करें।

import React, { useState, useEffect } from'react';
import"./style.component.css"
exportdefaultfunctionProducts(prop) {
const [products, setProducts] = useState([]);
const [error, setError] = useState(null); 
const { searchInput } = prop;
return (
"product-catalogue">
 {error? (
Product not found</p>
 ): (


"product-list">
 {products.slice(0, 6).map((product) => (
"product" key={product.id}>
Title: {product.title}</h2>




Price: ${product.price}</p>
 </div>
 ))}
 </div>
 )}
 </div>
 );
}

कार्यात्मक घटक के भीतर, परिभाषित करें उपयोगप्रभाव हुक, जो एक एसिंक्रोनस फ़ंक्शन निष्पादित करता है जो प्रदान की गई खोज क्वेरी के आधार पर उत्पाद डेटा लाता है।

 useEffect(() => {
const fetchProducts = async () => {
if (searchInput) {
const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
thrownewError('Error fetching products');
 }
const json = await response.json();
 setProducts(json.products);
 setError(null); 
 } catch (error) {
 setError(error.message);
 }
 }
 };
 fetchProducts();
 }, [searchInput]);

App.jsx फ़ाइल को अद्यतन करें

अब, अद्यतन करें App.jsx निम्नलिखित कोड के साथ फ़ाइल करें:

import React, { useState, useRef } from'react'
import'./App.css'
import Products from'./components/Products'
functionApp() {
const [searchInput, setSearchInput] = useState('')
const searchInputRef = useRef('');


const handleSubmit = (e) => {
 setSearchInput(searchInputRef.current.value);
 }


return (




Cypress Testing Library tutorial</h1>






exportdefault App

आगे बढ़ें और विकास सर्वर शुरू करें।

npm run dev

महान! आपको डमी JSON API से विशिष्ट उत्पाद डेटा प्राप्त करने में सक्षम होना चाहिए।

परीक्षण वातावरण स्थापित करें

सबसे पहले, अपने टर्मिनल पर परीक्षण स्क्रिप्ट कमांड चलाएँ:

npm run test

यह कमांड साइप्रस क्लाइंट को ट्रिगर और खोलेगा। आगे बढ़ें और क्लिक करें E2E परीक्षण बटन।

अगला, क्लिक करें जारी रखना साइप्रस कॉन्फ़िगरेशन फ़ाइलें जोड़ने के लिए।

एक बार यह प्रक्रिया पूरी हो जाने पर, आपको अपने प्रोजेक्ट में एक नई साइप्रस परीक्षण निर्देशिका देखनी चाहिए। इसके अलावा, साइप्रस का क्लाइंट स्वचालित रूप से cypress.config.js फ़ाइल जोड़ता है। आप अपने परीक्षण वातावरण, व्यवहार और सेटअप के विभिन्न पहलुओं को और अधिक अनुकूलित करने के लिए इस फ़ाइल को अपडेट कर सकते हैं।

साइप्रस का उपयोग करके एंड-टू-एंड टेस्ट लिखें

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

साइप्रस आपके द्वारा चुने गए ब्राउज़र का एक सरलीकृत संस्करण लॉन्च करेगा, जो परीक्षण चलाने के लिए एक नियंत्रित वातावरण तैयार करेगा।

का चयन करें नई विशिष्टता बनाएं अपनी परीक्षण फ़ाइल बनाने का विकल्प।

अपने कोड संपादक पर जाएँ, खोलें cypress/e2e/App.spec.cy.js फ़ाइल, और उस फ़ाइल की सामग्री को निम्नलिखित कोड के साथ अद्यतन करें।

describe('App Tests', () => {
 beforeEach(() => {
 cy.visit('http://127.0.0.1:5173/'); 
 });
 it('Renders input field and submit button', () => { 
 cy.get('#text').should('exist').should('be.visible');
 cy.get('#btn').should('exist').should('be.visible').contains('Submit');
 });
 it('Enters a search query', () => {
const searchQuery = 'laptops';
 cy.get('#text').type(searchQuery);
 });
});

ऊपर हाइलाइट की गई उपयोगकर्ता कहानियों पर वापस जाते हुए, यह विशिष्ट परीक्षण सूट दो पहलुओं की पुष्टि करता है:

  • ब्राउज़र पृष्ठ पर एक इनपुट फ़ील्ड और एक सबमिट बटन प्रदर्शित करता है।
  • कि प्रयोग एक खोज क्वेरी दर्ज कर सकते हैं.

जेस्ट और सुपरटेस्ट जैसे अन्य जावास्क्रिप्ट परीक्षण उपकरणों की तरह, साइप्रस परीक्षण मामलों को परिभाषित करने के लिए एक घोषणात्मक वाक्यविन्यास और भाषा का उपयोग करता है।

परीक्षण चलाने के लिए, साइप्रस द्वारा प्रबंधित सरलीकृत ब्राउज़र संस्करण पर वापस लौटें और वह विशिष्ट परीक्षण फ़ाइल चुनें जिसे आप चलाना चाहते हैं।

साइप्रस परीक्षण चलाएगा और परीक्षण खेल के मैदान के बाईं ओर के पैनल में परिणाम प्रदर्शित करेगा।

अनुप्रयोग प्रक्रियाओं का अनुकरण

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

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

आगे बढ़ें और एक नया बनाएं उत्पाद.spec.cy.js फ़ाइल में e2e फ़ोल्डर. इस फ़ाइल के अंदर, निम्नलिखित कोड शामिल करें।

describe('Products Tests', () => {
 it(' fetches and displays the data', () => {
const searchQuery = 'laptops';
 cy.visit('http://127.0.0.1:5173'); 

 cy.get('#text').type(searchQuery);
 cy.get('#btn').contains('Submit').click();

 cy.get('.product').should('have.length.greaterThan', 0);

 cy.get('.product').first().should('contain', 'Title'); 
 cy.get('.product').first().should('contain', 'Price: $');
 });
 });

यह परीक्षण सूट जांचता है कि, एक बार जब कोई उपयोगकर्ता एक विशेष खोज आइटम सबमिट करता है, तो ऐप ब्राउज़र पेज पर डेटा लाता है और प्रदर्शित करता है।

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

त्रुटियों और प्रतिक्रियाओं का अनुकरण

आप अपने साइप्रस परीक्षणों में विभिन्न त्रुटि परिदृश्यों और प्रतिक्रियाओं का अनुकरण भी कर सकते हैं।

कोई नया बनाएं त्रुटि.spec.cy.js फ़ाइल में e2e निर्देशिका और निम्नलिखित कोड शामिल करें।

describe('Error Handling Tests', () => {
 it('Displays error message for incorrect search query', () => {

 cy.intercept('GET', /https:\/\/dummyjson\.com\/products\/category\/.*/, {
 statusCode: 404, // Not Found
 body: 'Product not found'
 }).as('fetchProducts');
 cy.visit('http://127.0.0.1:5173');


const incorrectSearchQuery = 'rocket';
 cy.get('#text').type(incorrectSearchQuery);
 cy.get('#btn').click();


 cy.wait('@fetchProducts');
 cy.contains('Product not found').should('be.visible');
 });
 });

यह परीक्षण सूट जाँचता है कि जब कोई उपयोगकर्ता गलत खोज क्वेरी दर्ज करता है तो एक त्रुटि संदेश प्रदर्शित होता है।

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

यह परिणाम इंगित करता है कि त्रुटि-हैंडलिंग तंत्र अपेक्षा के अनुरूप कार्य कर रहा है।

परीक्षण-संचालित विकास में साइप्रस का उपयोग करना

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

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