साइप्रेस के साथ स्थिर उत्पाद वितरण

Apache APISIX डैशबोर्ड को उपयोगकर्ताओं के लिए एक फ्रंट-एंड इंटरफेस के माध्यम से Apache APISIX को संचालित करने में यथासंभव आसान बनाने के लिए डिज़ाइन किया गया है, और प्रोजेक्ट की शुरुआत से अब तक 552 कमिट और 10 रिलीज़ हो चुके हैं। इस तेज़ उत्पाद पुनरावृत्ति के साथ, ओपन-सोर्स उत्पाद की गुणवत्ता सुनिश्चित करना महत्वपूर्ण है। इस कारण से, हमने स्थिर उत्पाद वितरण सुनिश्चित करने के लिए एक E2E टेस्टिंग मॉड्यूल शुरू किया है।

फ्रंट-एंड E2E क्या है?

E2E, जो "End to End" का संक्षिप्त रूप है, को "एंड-टू-एंड" टेस्टिंग के रूप में अनुवादित किया जा सकता है। यह उपयोगकर्ता व्यवहार की नकल करता है, एक प्रवेश बिंदु से शुरू होकर और कार्यों को चरण-दर-चरण निष्पादित करता है जब तक कि एक कार्य पूरा नहीं हो जाता। सही टेस्टिंग कोड परिवर्तनों को मूल तर्क को तोड़ने से रोकती है।

Cypress क्यों?

हमने चयन अनुसंधान अवधि के दौरान रूट बनाने के लिए टेस्ट केस लिखने के लिए Taiko, Puppeteer, TestCafe, और Cypress का उपयोग किया, और हमने प्रत्येक टेस्टिंग फ्रेमवर्क का उपयोग करके केस लिखकर उनकी विशेषताओं का अनुभव किया।

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

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

TestCafe आश्चर्यजनक रूप से स्थापित करने में आसान है, इसमें एक अंतर्निहित प्रतीक्षा तंत्र है ताकि उपयोगकर्ताओं को पृष्ठ इंटरैक्शन के लिए सक्रिय रूप से प्रतीक्षा करने की आवश्यकता नहीं है, और यह समवर्ती मल्टी-ब्राउज़र टेस्टिंग का समर्थन करता है, जो मल्टी-ब्राउज़र संगतता टेस्टिंग के लिए सहायक है। नुकसान यह है कि इसका डिबगिंग प्रक्रिया इतनी उपयोगकर्ता के अनुकूल नहीं है, और आपको प्रत्येक टेस्ट केस परिवर्तन के बाद एक नया उपयोग केस चलाना होगा। डेवलपर्स के लिए, उन्हें कुछ बुनियादी Javascript सिंटैक्स की आवश्यकता होती है। दूसरा, इसकी चलने की गति कई अन्य फ्रेमवर्क की तुलना में अपेक्षाकृत धीमी है, खासकर जब withText() का उपयोग करके तत्वों को ढूंढते समय।

एक व्यापक तुलना के बाद, हमने अंततः Cypress को अपने फ्रंट-एंड E2E फ्रेमवर्क के रूप में चुना, जिसके चार मुख्य कारण हैं:

सरल सिंटैक्स

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

आसान डिबगिंग

जब टेस्ट केस डिबग करते हैं, तो हम Cypress के टेस्ट रनर का उपयोग कर सकते हैं, जो बहुआयामी डेटा प्रस्तुत करता है जो हमें समस्या को जल्दी से पहचानने की अनुमति देता है।

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

सक्रिय समुदाय

Cypress का एक बड़ा उपयोगकर्ता समुदाय है, और समुदाय के अंदर हमेशा कई लोग अपने अनुभव और विचार साझा करते हैं।

यह समस्याओं का सामना करते समय सहायक होता है, और आपको संभवतः उन समस्याओं का सामना करना पड़ सकता है जो पहले दूसरों ने सामना किया है। साथ ही, जब नई सुविधाओं का अनुरोध किया जाता है, तो हम समुदाय में भाग ले सकते हैं और Cypress में उन सुविधाओं को जोड़ सकते हैं जिन्हें हम जोड़ना चाहते हैं, जैसे हम APISIX समुदाय में करते हैं: समुदाय को सुनना और उसे वापस फीड करना।

स्पष्ट दस्तावेज़ीकरण

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

Cypress और APISIX डैशबोर्ड

वर्तमान में APISIX डैशबोर्ड के लिए 49 टेस्ट केस लिखे गए हैं। हमने GitHub Action में संबंधित CI को कॉन्फ़िगर किया है ताकि यह सुनिश्चित किया जा सके कि प्रत्येक विलय से पहले कोड पास हो, जिससे कोड की गुणवत्ता सुनिश्चित हो। हम Cypress के सर्वोत्तम अभ्यासों का संदर्भ लेकर और उन्हें अपने प्रोजेक्ट के साथ जोड़कर APISIX डैशबोर्ड में Cypress के उपयोग को आपके साथ साझा करते हैं।

सामान्यतः उपयोग किए जाने वाले कार्यों को कमांड में संकलित किया गया है।

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

Cypress.Commands.add("login", () => {
  cy.request(
    "POST",
    'http://127.0.0.1/apisix/admin/user/login',
    {
      username: "user",
      password: "user",
    }
  ).then((res) => {
    expect(res.body.code).to.equal(0);
    localStorage.setItem("token", res.body.data.token);
  });
});

beforeEach(() => {
   // init login
   cy.login();
})

सेलेक्टर और डेटा को सार्वजनिक चर के रूप में निकालें।

उपयोगकर्ता को टेस्ट कोड का अर्थ समझने में अधिक सहज बनाने के लिए, हम सेलेक्टर और डेटा को सार्वजनिक चर के रूप में निकालते हैं।

  const data = {
    name: 'hmac-auth',
    deleteSuccess: 'Delete Plugin Successfully',
  };
  const domSelector = {
    tableCell: '.ant-table-cell',
    empty: '.ant-empty-normal',
    refresh: '.anticon-reload',
    codemirror: '.CodeMirror',
    switch: '#disable',
    deleteBtn: '.ant-btn-dangerous',
  };

cy.wait(someTime) को हटाएं

हमने Cypress के शुरुआती दिनों में cy.wait(someTime) का उपयोग किया, लेकिन पाया कि cy.wait(someTime) नेटवर्क वातावरण और टेस्ट मशीन के प्रदर्शन पर बहुत अधिक निर्भर करता है, जो नेटवर्क वातावरण या मशीन प्रदर्शन खराब होने पर टेस्ट केस को त्रुटि रिपोर्ट कर सकता है। अनुशंसित अभ्यास यह है कि इसे cy.intercept() के साथ संयोजित करके उपयोग किया जाए ताकि स्पष्ट रूप से निर्दिष्ट किया जा सके कि किस नेटवर्क संसाधन की प्रतीक्षा करनी है।

cy.intercept("https://apisix.apache.org/").as("fetchURL");
cy.wait("@fetchURL");

सारांश

वर्तमान में, APISIX डैशबोर्ड ने 49 टेस्ट केस लिखे हैं। भविष्य में, हम फ्रंट-एंड E2E कवरेज को बढ़ाना जारी रखेंगे, और समुदाय से अनुरोध करेंगे कि प्रत्येक नई सुविधा या बगफिक्स सबमिशन के लिए टेस्ट केस लिखने पर सहमति दें ताकि उत्पाद की स्थिरता सुनिश्चित हो सके।

हमारे साथ जुड़कर विश्व-स्तरीय गेटवे उत्पाद को पॉलिश करने के लिए आपका स्वागत है।

प्रोजेक्ट पता: https://github.com/apache/apisix-dashboard