हमने HTML5 में ड्रैग एंड ड्रॉप का परीक्षण कैसे किया

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



एक ऐसी परियोजना की कल्पना करें जो तकनीकी रूप से पिछले एक के समान है (हमारी राय में, यह समस्या को सही ढंग से समझने और विश्लेषण करने के मामले में एक छोटा सा नकारात्मक प्रभाव था), लेकिन परियोजनाओं के बीच कोणीय का संस्करण 1.x से 5.x में बदल गया और यूआई ऑटो-परीक्षणों के लिए सेलेनाइड लाइब्रेरी को जोड़ा गया। ।

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

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

सामान्य तौर पर, परीक्षण वातावरण काम कर रहा है, परीक्षण विधियों को सही ढंग से लिखा गया है, "हाथ से काम करता है" खींचें और छोड़ें, लेकिन ऑटोटेस्ट काम नहीं करता है। और पहली नज़र में इसके लिए कोई कारण नहीं हैं।

अंत में, हमने समस्या के तथ्य को रखा और इंटरनेट पर एक समाधान की तलाश में चले गए। जब हम खुला मुद्दा क्रोम वेबड्राइवर # 3604 को 03/04/2016 से ढूंढ रहे थे तो हमारा आश्चर्य क्या था। जरा सोचो, 2016 के वसंत के बाद से, आधिकारिक तौर पर क्रोम वेबड्राइवर में टूटी हुई ड्रैग एंड ड्रॉप के साथ एक समस्या है, अन्य ब्राउज़रों का उल्लेख नहीं करने के लिए। नहीं, यह निश्चित रूप से काम करता है, लेकिन HTML5 का उपयोग करते समय नहीं। और जैसा कि यह समस्या का विश्लेषण करने की प्रक्रिया में निकला था, हमारे आवेदन ने HTML5 का उपयोग करके ड्रैग एंड ड्रॉप कार्यान्वयन का उपयोग किया।

HTML5 में परीक्षण के लिए ड्रैग एंड ड्रॉप कार्यान्वयन क्या हैं? इंटरनेट पर, दो समाधान पाए गए:

  • जावा लाइब्रेरी awt.Robot (या कुछ तृतीय-पक्ष क्लिकर) का उपयोग करें;
  • जावास्क्रिप्ट का उपयोग करें।

हमने शायद थोड़ा पैसा कमाया या समस्या में दफन हो गए, लेकिन अभी मैं एक आरक्षण करता हूं कि जो पहला समाधान चुना गया है वह केवल मेरे लिए उपयुक्त नहीं है :)

रोबोट पर कार्यान्वयन के बारे में क्या कहा जा सकता है:

  • हम माउस को रोकते हैं, पूर्ण उपयोगकर्ता क्रियाओं का अनुकरण करते हैं;
  • हम तत्वों के निर्देशांक को निर्धारित करने के लिए सेलेनियम का उपयोग करते हैं;
  • चूंकि सेलेनियम तत्वों का उपयोग किया जाता है, इसलिए आपको स्थानीय लोगों को बदलने की आवश्यकता नहीं है। हम xpath का उपयोग करने के लिए परियोजना पर प्रयास कर रहे हैं;
  • यह जावा में लिखा गया है, वाक्यविन्यास सहज ज्ञान युक्त, अच्छा प्रलेखन है।

लेकिन जावास्क्रिप्ट कार्यान्वयन के बारे में कुछ समझ में आया:

  • ब्राउज़र के अंदर जावास्क्रिप्ट पर सब कुछ होता है (परीक्षक की आंखों से कार्य छिपाए जाते हैं और ये क्रियाएं कोड के साथ हस्तक्षेप करती हैं);
  • इंटरनेट पर ड्रैग एंड ड्रॉप के परीक्षण के लिए जेएस पुस्तकालयों में से एक को ढूंढ लिया गया, जिसका स्रोत ढूंढना इतना आसान नहीं था;
  • अपनी आवश्यकताओं को पूरा करने के लिए मिली लाइब्रेरी को एक फाइल के साथ समाप्त करना होगा, क्योंकि यह केवल ड्रैग एंड ड्रॉप को लागू करता है। और हम, उदाहरण के लिए, ड्रैग -> मूव -> होल्ड -> ड्रॉप;
  • लाइब्रेरी को jQuery ऐड-ऑन के रूप में लागू किया गया है, और इसलिए jQuery संरचना को समझना आवश्यक होगा;
  • हमें लोकेटर को css में डालना होगा (jquery xpath के साथ काम नहीं करता है);
  • सेलेनियम तत्वों की खोज का उपयोग करना असंभव है, आपको "पेन" के साथ लोकेटर्स को गोंद करना होगा।

पहली नज़र में, पहला समाधान बहुत अधिक सुविधाजनक था और इसका परीक्षण किया गया था।

//Setup robot Robot robot = new Robot(); robot.setAutoDelay(50); //Fullscreen page so selenium coordinates work robot.keyPress(KeyEvent.VK_F11); Thread.sleep(2000); //Get size of elements Dimension fromSize = dragFrom.getSize(); Dimension toSize = dragTo.getSize(); //Get centre distance int xCentreFrom = fromSize.width / 2; int yCentreFrom = fromSize.height / 2; int xCentreTo = toSize.width / 2; int yCentreTo = toSize.height / 2; //Get x and y of WebElement to drag to Point toLocation = dragTo.getLocation(); Point fromLocation = dragFrom.getLocation(); //Make Mouse coordinate centre of element toLocation.x += xOffset + xCentreTo; toLocation.y += yCentreTo; fromLocation.x += xCentreFrom; fromLocation.y += yCentreFrom; //Move mouse to drag from location robot.mouseMove(fromLocation.x, fromLocation.y); //Click and drag robot.mousePress(InputEvent.BUTTON1_MASK); //Move to final position robot.mouseMove(toLocation.x, toLocation.y); //Drop robot.mouseRelease(InputEvent.BUTTON1_MASK); 

सामान्य तौर पर, समाधान काम कर रहा है ... हालांकि, इसके विकास की प्रक्रिया में, इसकी समस्या क्षेत्र स्पष्ट हो गए।

  • माउस की गति या परीक्षण के निष्पादन के दौरान ब्राउज़र को कम करने से परीक्षणों के दौरान हस्तक्षेप होता है और उनका पतन होता है;
  • JUnit / TestNG का उपयोग करके समानांतर में परीक्षण नहीं चला सकते। सीआई में अलग-अलग कार्यों के माध्यम से समानांतर करने के लिए।
  • सेलेनियम ग्रिड / सेलेनॉइड के माध्यम से रिमोट मशीन पर माउस को नियंत्रित करने में असमर्थ;
  • ब्राउज़र क्रैश होने की स्थिति में, रोबोट डेस्कटॉप पर या किसी अन्य खुले एप्लिकेशन में आसानी से कुछ क्लिक / ड्रैग कर सकता है।

अंत में, हालांकि, जावास्क्रिप्ट कार्यान्वयन ...

मैं तुरंत कहना चाहूंगा कि हम jquery.xpath.js jQuery प्लगइन का उपयोग करके xpath लोकेटर का उपयोग करने की समस्या को हल करने में कामयाब रहे।

और drag_and_drop_helper.js लाइब्रेरी ( यहाँ स्रोत) खींचें और ड्रॉप संचालन को नियंत्रित करने वाले js का मुख्य उपकरण बन गया। उसके काम को छाँटने में कोई समझदारी नहीं है, लेकिन इस बारे में कि हमने इस पर थोड़ा बाद में कैसे काम किया।

अब सीधे परीक्षणों में कार्यान्वयन पर। सेलेनाइड में, सब कुछ सरल है। ड्रैग एंड ड्रॉप का उपयोग करने से पहले, आपको उपयोग किए गए JS पुस्तकालयों को लोड करना होगा:

 StringBuilder sb = new StringBuilder(); sb.append(readFile("jquery-3.3.1.min.js")); sb.append(readFile("jquery.xpath.min.js")); sb.append(readFile("drag_and_drop_helper.js")); executeJavaScript(sb.toString()); 

स्वाभाविक रूप से, jQuery को लोड करने की आवश्यकता है यदि यह पहले से ही एप्लिकेशन में नहीं है।

पुस्तकालय के मूल संस्करण में, यह निम्नलिखित लिखने के लिए पर्याप्त है:

 executeJavaScript("$('" + source + "') .simulateDragDrop({ dropTarget: '" + target + "'});"); 

स्रोत और लक्ष्य खींचें और ड्रॉप तत्वों के सीएसएस लोकेटर हैं।

जैसा कि ऊपर कहा गया है, हम अक्सर परियोजना में xpath- लोकेटर का उपयोग करते हैं, इसलिए थोड़ा शोधन के बाद, पुस्तकालय ने स्वीकार करना शुरू कर दिया:

 executeJavaScript("$(document).xpath('" + source + "').simulateDragDrop({ dropTarget: '" + target + "'});"); 

अब, वास्तव में, drag_and_drop_helper.js लाइब्रेरी के बारे में। SimulateEvent कोड ब्लॉक में कुछ टुकड़े हैं जो कुछ माउस घटनाओं के लिए जिम्मेदार हैं। HTML5 में ड्रैग एंड ड्रॉप ऑपरेशन की संभावित घटनाओं को सूचीबद्ध करने का कोई मतलब नहीं है; यह जानकारी आसानी से मिल जाती है।

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

सादृश्य से, हमने ड्रैगेंटर इवेंट को लाइब्रेरी (ड्रैगस्टार्ट और ड्रॉप के बीच) में जोड़ा।

 /*Simulating dragenter*/ type = 'dragenter'; var dragenterEvent = this.createEvent(type, {}); dragenterEvent.dataTransfer = event.dataTransfer; this.dispatchEvent($(options.dropTarget)[0], type, dragenterEvent); 

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

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

हम ऊपर संक्षेप में बताना चाहते हैं। हैरानी की बात है, एक तथ्य! एचटीएमएल 5 को 2013 में वापस जारी किया गया था, ब्राउज़र कई सालों से इसका समर्थन कर रहे हैं, इसके लिए एप्लिकेशन विकसित किए गए हैं, लेकिन वेबड्राइवर, अफसोस, अभी भी यह नहीं जानता है कि इसकी क्षमताओं का उपयोग कैसे किया जाए। और ड्रैग एंड ड्रॉप ऑपरेशन का परीक्षण तीसरे पक्ष के उपकरण के साथ लागू किया जाना है, वास्तुकला को जटिल करना और सभी प्रकार की चाल में जाना है। हां, ऐसे उपकरण हैं और "डांसिंग विद द टैम्बॉरिन" केवल हमें मजबूत बनाता है, लेकिन मैं अभी भी बॉक्स से बाहर काम कर समाधान करना चाहता हूं।

अपने अनुभव में, हम कह सकते हैं कि ऐसी समस्याएं आज इतनी सामान्य नहीं हैं, हालांकि हर जगह ड्रैग एंड ड्रॉप का उपयोग किया जाता है। संभवतः मामला वेब एप्लिकेशन डेवलपमेंट टेक्नोलॉजी का विकल्प है। हालांकि, एचटीएमएल 5 का उपयोग करने वाले अनुप्रयोगों का प्रतिशत लगातार बढ़ रहा है, फ्रेमवर्क विकसित हो रहे हैं, और यह बहुत अच्छा होगा यदि उनके लिए ब्राउज़रों और ड्राइवरों के डेवलपर्स भी पीछे नहीं रहे।

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

Source: https://habr.com/ru/post/hi437200/


All Articles