कैनवस पर परीक्षण अनुप्रयोगों: Yandex.Maps एपीआई परीक्षण के उदाहरण से व्यंजनों

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

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



बिल्ली के नीचे, Yandex.Maps API परीक्षण स्वचालन उदाहरण का उपयोग करते हुए, मैं आपको बताऊंगा कि कैसे हमने इस समस्या को Yandex में हल किया।

वेब इंटरफेस का परीक्षण कैसे किया जा रहा है

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

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

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

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

पृष्ठ पर तत्वों के साथ सहभागिता

जैसा कि मैंने ऊपर कहा, हम Yandex.Maps API के संदर्भ में इंटरफ़ेस का परीक्षण करने पर विचार करेंगे। इसलिए, आइए देखें कि वास्तव में, हमें परीक्षणों में क्या करना है।



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

इस "पाई" में हम ग्राफिक्स परत के साथ बातचीत करने में रुचि रखते हैं, क्योंकि बाकी इंटरफ़ेस को अलग-अलग DOM तत्वों के रूप में प्रस्तुत किया गया है और वेबड्राइवर का उपयोग करके उन पर क्लिक करना आसान है। Yandex.Maps API के उपयोगकर्ता कह सकते हैं: "तो आपके पास सभी ग्राफिक ऑब्जेक्ट्स के लिए एक API है, इसके माध्यम से कैनवास पर तत्वों के साथ बातचीत करें।"

और यह बिल्कुल ऐसा दृष्टिकोण है जो कई इंजीनियर कैनवस पर वस्तुओं के साथ काम करने के लिए उपयोग करते हैं। लेकिन उसकी एक समस्या है - वह उपयोगकर्ता की वास्तविक क्रियाओं से बहुत दूर है। औसत व्यक्ति नक्शे पर मार्ग प्रदर्शित करने के लिए उत्तरदायी जावास्क्रिप्ट ऑब्जेक्ट पर कंसोल click() को कॉल नहीं करता है। वह छवि में केवल माउस को लेता और क्लिक करता है। click() विधि की दक्षता वास्तविक क्लिक की सही प्रक्रिया की गारंटी नहीं देती है। इसलिए, हम अपने स्वयं के, वैकल्पिक तरीके से चले गए।

कैनवस के साथ बेहतर तरीके से बातचीत करने के तरीके को समझने के लिए, आपको यह जानना होगा कि प्रोग्राम खुद कैसे समझता है कि उपयोगकर्ता ने किस ऑब्जेक्ट पर क्लिक किया है। Yandex.Maps API के मामले में, सक्रिय क्षेत्रों की तकनीक का उपयोग किया जाता है । कुछ ऐसा ही उपयोग किया जाता है जहां भी कैनवस पर इंटरैक्टिव तत्व होते हैं।

सक्रिय क्षेत्रों की प्रौद्योगिकी का सामान्य एल्गोरिथ्म:

1. कार्यक्रम कैनवस पर खींचे गए सभी तत्वों के बारे में उनके पिक्सेल निर्देशांक के बारे में जानकारी संग्रहीत करता है।
2. यह ग्राफिक ऑब्जेक्ट्स पर होने वाली माउस घटनाओं को पकड़ता है। यह सीधे कैनवास पर किया जा सकता है। हमारे मामले में, ग्राफिक्स परत के ऊपर घटनाओं की एक विशेष पारदर्शी परत है जो इसे कवर करती है।
3. माउस घटना के निर्देशांक वस्तुओं के निर्देशांक के साथ सहसंबद्ध होते हैं, और यदि घटना किसी वस्तु पर हुई है, तो संबंधित हैंडलर को इसके लिए बुलाया जाता है।

यह पता चला है कि हमें एक विशिष्ट ग्राफिक ऑब्जेक्ट की आवश्यकता नहीं है - हमें केवल इवेंट के निर्देशांक का चयन करने और इसे कैनवस या घटनाओं की कुछ परत पर फेंकने की आवश्यकता है। लेकिन यह इतना सरल नहीं है। मान लें कि हमें लेबल पर क्लिक करने की आवश्यकता है। आंख से इसके निर्देशांक निर्धारित करना कोई आसान काम नहीं है।



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



अब यह स्पष्ट रूप से दिखाई दे रहा है: निशान पर क्लिक करने के लिए, आपको निर्देशांक [11, 11] के साथ वर्ग के केंद्र पर क्लिक करना होगा। वर्ग के पक्ष के आकार को जानते हुए, ये निर्देशांक आसानी से साधारण पिक्सेल निर्देशांक में बदल जाते हैं, जिसके साथ कैनवास पर एक क्लिक कहा जाएगा।

 x = 11 * 32 + 32 / 2; y = 11 * 32 + 32 / 2; click(x, y); // click(368, 368); 

यह ध्यान देने योग्य है कि हम मैप कंट्रोल के साथ बातचीत के लिए भी इस दृष्टिकोण का उपयोग करते हैं, हालांकि उन्हें DOM ट्री के माध्यम से भी एक्सेस किया जा सकता है। ऐसा इसलिए किया जाता है ताकि मानचित्र पर सभी तत्वों की अपील उसी शैली में हो। दुर्भाग्य से, WebDriver घटनाओं को खिड़की में एक मनमाना बिंदु पर नहीं फेंक सकता है, लेकिन केवल DOM पेड़ के एक विशिष्ट तत्व पर। इसलिए, एक घटना को बढ़ाने से पहले, हम बातचीत के लिए एक तत्व को परिभाषित करते हैं। यह document ऑब्जेक्ट के elementFromPoint(x, y) विधि के माध्यम से किया जाता है। यदि इस बिंदु पर एक बटन है, तो उस पर घटना को फेंक दिया जाएगा, अगर ग्राफिक कैनवस पर है।

सहभागिता परिणाम सत्यापित करें

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

एक ओर, आप कैनवस पर प्रदर्शित जावास्क्रिप्ट वस्तुओं का उल्लेख करके रंग और स्थिति का अनुरोध कर सकते हैं। लेकिन, जैसा कि आप याद करते हैं, कोई भी गारंटी नहीं देता है कि एपीआई हमारे लिए झूठ नहीं है। कोड में कोई गलती हो सकती है, और जावास्क्रिप्ट हमें बताएगा कि लाइन लाल है, और हमारी आँखों से हम देखेंगे कि यह नीला है।

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

1. एक समय में, इंटरफ़ेस के दोनों संस्करणों को खोलें;
2. दोनों संस्करण एक ही ब्राउज़र संस्करण में, अलग-अलग विंडो में खुलते हैं;
3. हम दोनों विंडो में इंटरफ़ेस पर समान कार्य करते हैं;
4. सही समय पर, खिड़कियों की तस्वीरें लें और पिक्सेल द्वारा उनकी तुलना करें।

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

जावास्क्रिप्ट त्रुटि ट्रैकिंग

हमारे परीक्षण दृष्टिकोण का अंतिम बिंदु जावास्क्रिप्ट त्रुटियों को पकड़ना है। यहां, पहली नज़र में, सब कुछ सरल है: हम विंडो ऑब्जेक्ट के ऑनरोर विधि को लेते हैं और उपयोग करते हैं। सिद्धांत रूप में सब कुछ ठीक है, लेकिन व्यवहार में इस दृष्टिकोण में एक बड़ी समस्या है । यदि ब्राउज़र में एक के अलावा किसी अन्य होस्ट पर त्रुटि हुई है, तो हम उसका पाठ नहीं पढ़ पाएंगे। क्या करें?

दो विकल्प हैं:

• सर्वर प्रतिक्रिया के लिए एक विशिष्ट हेडर जोड़ें ( सभी ब्राउज़रों में काम नहीं करता है )।
• फ़ायरफ़ॉक्स के लिए एक प्लगइन का उपयोग करें जो ब्राउज़र कंसोल स्तर पर त्रुटियों को एकत्र करता है।

आप में से किसे चुनना है। दोनों विकल्पों में जीवन का अधिकार है।

परिणाम क्या है?

जैसा कि यह निकला, एक वेब इंटरफ़ेस का परीक्षण करने का काम जो कैनवस का उपयोग करके काम करता है, एक नियमित वेबड्राइवर का उपयोग करके काफी सफलतापूर्वक हल किया जाता है। लेकिन फिलहाल, हमने वहाँ रुकने का फैसला नहीं किया और इंटरफेस के साथ परीक्षणों की बातचीत में सुधार करने की दिशा में देखा। यदि अब हम DOM इवेंट्स पर JavaScript इवेंट्स को फेंकते हैं, तो भविष्य में हम इसे उसी तरह करना चाहेंगे जैसे यूजर करते हैं। हम माउस और कीबोर्ड के वास्तविक नियंत्रण की योजना बनाते हैं। इसके लिए Awt.Robot का उपयोग किया जाएगा। खबर का पालन करें!