यैंडेक्स में परीक्षण। HTML एलिमेंट्स फ्रेमवर्क: पेज ऑब्जेक्ट में क्या गायब है और इसे कैसे ठीक करें

यदि आप वेब इंटरफेस का परीक्षण कर रहे हैं, तो आपने संभवत: इस बात पर विचार किया कि कैसे संभव के रूप में परीक्षण में वेब पृष्ठों के साथ बातचीत करना आसान हो। परीक्षकों के बीच, पृष्ठ वस्तु डिजाइन पैटर्न बहुत व्यापक रूप से जाना जाता है। लेकिन, कई लाभों के बावजूद, इस दृष्टिकोण में कुछ कमियां हैं जो इसके आवेदन को बहुत जटिल करती हैं।

उनमें से सबसे महत्वपूर्ण:

• समान तत्वों वाले पृष्ठों के लिए पृष्ठ-वस्तुओं के कोड का पुन: उपयोग करने में असमर्थता;
• खराब पठनीयता और तत्वों की एक बड़ी संख्या वाले पृष्ठों के लिए कोड की दृश्यता की कमी;
• तत्वों के टंकण की कमी।

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

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

कोड का पुन: उपयोग

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






यह अन्य Yandex सेवाओं पर भी पाया जाता है: उदाहरण के लिए, Yandex.Auto, Yandex.Market और Yandex.Work।

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



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

@Block(@FindBy(className = "b-head-search")) public class SearchArrow extends HtmlElement { @FindBy(name = "text") private WebElement requestInput; @FindBy(xpath = "//input[@type='submit']") private WebElement searchButton; public void search(String request) { requestInput.sendKeys(request); searchButton.click(); } } 

साथ ही प्राधिकरण फॉर्म:

 @Block(@FindBy(className = "b-domik__form")) public class AuthorizationForm extends HtmlElement { @FindBy(id = "b-domik-username") WebElement loginField; @FindBy(id = "b-domik-password") WebElement passwordField; @FindBy(xpath = "//input[@type='submit']") WebElement submitButton; public void login(String login, String password) { loginField.sendKeys(login); passwordField.sendKeys(password); submitButton.click(); } } 

फिर यैंडेक्स मुख्य पृष्ठ के लिए पृष्ठ-वस्तु इस तरह दिखाई देगी:

 public class SearchPage { private SearchArrow searchArrow; private AuthorizationForm authorizationForm; // Other blocks and elements here public SearchPage(WebDriver driver) { HtmlElementLoader.populatePageObject(this, driver); } public void search(String request) { searchArrow.search(request); } public void login(String login, String password) { authorizationForm.login(login, password); } // Other methods here } 

वैसे, क्या आपने देखा है कि ब्लॉक एलिमेंट सिलेक्टर्स ब्लॉक सिलेक्टर के सापेक्ष सेट होते हैं? यह बहुत सुविधाजनक है, क्योंकि ब्लॉक अलग-अलग चयनकर्ताओं द्वारा विभिन्न पृष्ठों पर हो सकता है। इस मामले में, ब्लॉक की आंतरिक संरचना नहीं बदलेगी। इस स्थिति में, जब आप ब्लॉक को पेज-ऑब्जेक्ट में शामिल करते हैं, तो यह ब्लॉक के चयनकर्ता को अधिभारित करने के लिए पर्याप्त है। उदाहरण के लिए, Yandex.Auto सेवा के पृष्ठों पर, खोज फ़ॉर्म को मुख्य पृष्ठ की तुलना में अलग तरीके से खोजा जाना चाहिए:

 public class AutoHomePage { @FindBy(className = "b-search") private SearchArrow searchArrow; // Other blocks and elements here public AutoHomePage(WebDriver driver) { HtmlElementLoader.populatePageObject(this, driver); } public void search(String request) { searchArrow.search(request); } // Other methods here } 

पठनीयता और दृश्यता

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



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

लेकिन अगर आपके पास अलग से तत्वों के ब्लॉक बनाने का अवसर है, तो यह समस्या भी हल हो गई है। एक पृष्ठ ऑब्जेक्ट में केवल कुछ ब्लॉक होंगे, और उनकी संरचना और उनके साथ बातचीत के तर्क को अलग-अलग वर्णित किया जाएगा।

टाइपिंग तत्व

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

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

दोनों ही मामलों में, एक ही समाधान स्वयं का सुझाव देता है: टाइप किए गए तत्वों को पेश करने के लिए, जो पहले मामले में वेबएलेमेंट के इंटरफ़ेस को संकीर्ण करेगा, और दूसरे में - अधिक जटिल तत्वों के साथ बातचीत को लागू करेगा। यह हमने HTML एलिमेंट्स फ्रेमवर्क में किया है।

उदाहरण के लिए, टाइप किए गए तत्वों का उपयोग करके खोज फ़ॉर्म का विवरण इस तरह दिखेगा:

 @Block(@FindBy(className = "b-head-search")) public class SearchArrow extends HtmlElement { @FindBy(name = "text") private TextInput requestInput; @FindBy(xpath = "//input[@type='submit']") private Button searchButton; public void search(String request) { requestInput.sendKeys(request); searchButton.click(); } } 

और इसलिए खोज सेटिंग में भाषा चुनने के लिए फ़ॉर्म का विवरण, जहां ड्रॉप-डाउन सूची है, इस तरह दिखेगा:

 @Block(@FindBy(id = "lang")) public class LanguageSelectionForm extends HtmlElement { @FindBy(className = "b-form__select") private Select listOfLanguages; @FindBy(xpath = "//input[@type='submit']") private Button saveButton; @FindBy(xpath = "//input[@type='button']") private Button returnButton; public void selectLanguage(String language) { listOfLanguages.selectByValue(language); saveButton.click(); } } 

हमने पहले से ही TextInput, Button, CheckBox, Select, Radio और Link जैसे मूल तत्वों के लिए समर्थन लागू कर दिया है। आप भी, आसानी से अपने स्वयं के टाइप किए गए तत्वों को लिख सकते हैं और मौजूदा लोगों का विस्तार कर सकते हैं।

***

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

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