व्यायाम: विजुअल स्टूडियो कोड में नाटककार का उपयोग करना
पिछले भाग में, हम नाटककार टेस्ट कॉन्फ़िगरेशन और नाटककार परीक्षण विशिष्टता से संबंधित मुख्य अवधारणाओं के माध्यम से चले गए, लेकिन हमने अपने परीक्षणों को निष्पादित करने और रिपोर्ट देखने के लिए प्लेराइट कमांडलाइन (सीएलआई) का उपयोग किया।
क्या होगा यदि हम इसे अपने विजुअल स्टूडियो कोड वातावरण में कर सकते हैं और हमारे परीक्षणों को संलेखन, चलाने और डिबगिंग के लिए अधिक दृश्य इंटरैक्शन प्रक्रिया कर सकते हैं?
विजुअल स्टूडियो कोड एक्सटेंशन के लिए नाटककार टेस्ट के साथ, आपको एक बेहतर डेवलपर अनुभव और कुछ अनूठी टूलिंग विशेषताएं मिलती हैं जो इसे नाटककार टेस्ट धावक के साथ बातचीत करने का आपका पसंदीदा तरीका बना सकती हैं। चलो अंदर कूदते हैं और भ्रमण करते हैं।
आइए शुरू करते हैं
नाटककार प्रलेखन में वीडियो वॉकथ्रू के साथ एक व्यापक ट्यूटोरियल है जिसे हम आपको अपने समय में देखने की सलाह देते हैं। इस पाठ में, हम आपको उपयोग से परिचित कराने के लिए इन अभ्यासों के एक सबसेट के माध्यम से चलने की कोशिश करते हैं।
]
Playwright एक्सटेंशन इंस्टॉल करें
Visual Studio कोड मार्केटप्लेस से एक्सटेंशन स्थापित करें। एक बार स्थापित, आप स्क्रीनशॉट में दिखाया गया के रूप में अपने विजुअल स्टूडियो कोड विंडो के बाईं ओर एक बीकर आइकन हाजिर करना चाहिए. ध्यान दें कि एक्सटेंशन स्वचालित रूप से कैसे आपके प्रोजेक्ट में परीक्षण विनिर्देशों का पता लगाता है और एकत्र करता है।
रन टेस्ट (हेडलेस)
हेडलेस तरीके से परीक्षण चलाने के लिए (कोई ब्राउज़र विंडो नहीं), सुनिश्चित करें कि ब्राउज़र दिखाएँ और ट्रेस व्यूअर दिखाएँ विकल्प अनचेक किए गए हैं. पहला परीक्षण चलाने के लिए example.spec.ts फ़ाइल की पंक्ति 3 पर हरे रंग के प्ले बटन का चयन करें। आप फ़ाइल में सभी परीक्षण चलाने या किसी विशिष्ट परीक्षण को चलाने के लिए परीक्षण एक्सप्लोरर साइडबार में ग्रे प्ले बटन का चयन भी कर सकते हैं।
एक बार जब आप अपने परीक्षण चला लेते हैं, तो परीक्षण परिणाम टैब एक विंडो खोलता है जहां आप परीक्षण निष्पादन का पूरा इतिहास देख सकते हैं। आप परीक्षण में ड्रिल डाउन भी कर सकते हैं और उस विशिष्ट परीक्षण को फिर से चलाने के लिए परीक्षण चलाएँ का चयन कर सकते हैं.
ब्राउज़र दिखाएँ (शीर्षक वाला)
यदि आप हेडेड मोड में चलाना चाहते हैं, जिसका अर्थ है कि ब्राउज़र विंडो खोलकर अपने परीक्षण चलाना, तो आप परीक्षण चलाने से पहले ब्राउज़र दिखाएँ बॉक्स को चेक कर सकते हैं।
नाटककार एक बहुत तेज़ उपयोगकर्ता है, जो शो ब्राउज़र का उपयोग करते समय परीक्षण में क्या हो रहा है, इसका ट्रैक रखना मुश्किल बना सकता है। डीबगिंग के लिए, हम ट्रेस व्यूअर दिखाएँ विकल्प का उपयोग करने की सलाह देते हैं.
ट्रेस व्यूअर दिखाएँ (शीर्षक वाला)
ट्रेस व्यूअर दिखाएं बॉक्स को चेक करें और दूसरे टेस्ट के लिए ग्रीन प्ले बटन पर चुनें। यह ट्रेस व्यूअर विंडो लॉन्च करता है, जो आपको परीक्षण निष्पादन का एक दृश्य प्रतिनिधित्व दिखाता है।
शीर्ष पर, आपको परीक्षण की एक टाइमलाइन दिखाई देगी जिस पर आप ब्राउज़र की स्थिति देखने के लिए होवर कर सकते हैं। फ़ोकस करने के लिए कोई विशिष्ट समय सीमा चुनने के लिए, टाइमलाइन चुनें और खींचें.
बाएं साइडबार में, आप परीक्षण निष्पादन के दौरान किए गए कार्यों को देख सकते हैं। यदि आप locator.click क्रिया का चयन करते हैं, तो आपको DOM स्नैपशॉट में Get Started बटन पर एक लाल बिंदु दिखाई देगा।
इसके बाद, expect.toBeVisible अभिकथन का चयन करें, और आप देखेंगे कि हमारे DOM स्नैपशॉट को इंस्टॉलेशन पेज को दिखाने के लिए बदल दिया गया है, जिस शीर्षक पर हम जोर दे रहे हैं। DOM स्नैपशॉट के ऊपर, आप कार्रवाई करने से पहले और बाद में DOM की स्थिति देखने के लिए पहले और बाद में बटन का चयन कर सकते हैं।
आप ऊपरी दाएं कोने में पॉप आउट आइकन का चयन करके DOM स्नैपशॉट को एक अलग विंडो में पॉप आउट कर सकते हैं। यदि आप अपने परीक्षण को डीबग करते समय DOM का निरीक्षण करना चाहते हैं तो यह उपयोगी हो सकता है।
डिबगिंग की बात करें तो, आप नीचे पैनल में पिक लोकेटर बटन का चयन करके DOM स्नैपशॉट से एक लोकेटर भी चुन सकते हैं। फिर, उस तत्व के लोकेटर को देखने के लिए DOM स्नैपशॉट पर तत्वों पर होवर करें। एक तत्व का चयन करना यह ट्रेस व्यूअर के निचले भाग में लोकेटर बॉक्स में जोड़ता है, जहां आप इसे अपने क्लिपबोर्ड पर कॉपी करने से पहले संपादित कर सकते हैं।
ट्रेस व्यूअर की बाकी विशेषताओं जैसे कॉल, कंसोल, नेटवर्क और सोर्स टैब को स्वयं एक्सप्लोर करने के लिए स्वतंत्र महसूस करें।
डीबग परीक्षण
डीबगिंग के लिए, हम अनुशंसा करते हैं कि आप अपने परीक्षण ट्रेस व्यूअर दिखाएँ विकल्प के साथ चलाएँ और जो हो रहा है उसे बेहतर ढंग से समझने के लिए अपने परीक्षण के ट्रेस का उपयोग करें.
हालाँकि, Visual Studio कोड एक्सटेंशन के साथ, आप Visual Studio कोड में अपने परीक्षणों को डीबग भी कर सकते हैं, त्रुटि संदेश देख सकते हैं, ब्रेकपॉइंट बना सकते हैं और अपने परीक्षणों को लाइव डीबग कर सकते हैं। दस्तावेज़ीकरण से अधिक जानें या डिबगिंग समर्थन की भावना प्राप्त करने के लिए निम्न वीडियो देखें।
परीक्षण उत्पन्न करें
जब आप ब्राउज़र में कार्रवाइयाँ करते हैं, तो CodeGen आपके लिए आपके परीक्षण जनरेट करता है, जिससे यह जटिल कार्यप्रवाहों के लिए लेखन परीक्षण शुरू करने का सबसे आसान तरीका बन जाता है.
परीक्षण जनरेट करने के लिए, Visual Studio कोड में परीक्षण साइडबार में नया रिकॉर्ड करें बटन का चयन करें. यह एक ब्राउज़र विंडो खोलता है जहां आप ऐसी क्रियाएं कर सकते हैं जिन्हें रिकॉर्ड किया जाएगा और परीक्षण में बदल दिया जाएगा। आप यह भी देखेंगे कि फ़ोल्डर में tests एक नई फ़ाइल उत्पन्न परीक्षण के साथ बनाई गई है।
ब्राउज़र विंडो में एक URL टाइप करें और उपयोगकर्ता की तरह क्रियाएं करना शुरू करें। आप वीएस कोड में परीक्षण फ़ाइल में दर्ज की जा रही क्रियाओं को देखेंगे।
आइए उस सरल परीक्षण को फिर से बनाएं जिसे हमने पहले नाटककार वेबसाइट पर जाकर और गेट स्टार्टेड बटन का चयन करके चलाया था। फिर हम कोडजेन टूलबार से Assert Visibility आइकन का चयन कर सकते हैं और यह दावा करने के लिए इंस्टॉलेशन हेडिंग का चयन कर सकते हैं कि यह दृश्यमान है।
निम्न वीडियो में परीक्षण जनरेट करने के बारे में अधिक जानें.
में परीक्षण कैसे उत्पन्न करें पर एक यूट्यूब वीडियो
अगले कदम
इस खंड में, आप ढूँढें और परीक्षण को चलाने के लिए Visual Studio कोड एक्सटेंशन का उपयोग करने के लिए, और परीक्षण डीबगिंग के लिए एक और दृश्य अनुभव प्राप्त करने के लिए ट्रेस व्यूअर के साथ काम करने के लिए कैसे जानें।
आपने यह भी सीखा कि कैसे Visual Studio Code रिकॉर्ड एक नया परीक्षण, पिक लोकेटर और रिकॉर्ड पर कर्सर सुविधाओं का उपयोग करके परीक्षण उत्पन्न करने के लिए समृद्ध उपकरण प्रदान करता है। अब, यह हमारे नमूना अनुप्रयोग के लिए एक अंत करने के लिए अंत करने के लिए अंत परीक्षण विनिर्देश का निर्माण करने के लिए एक निर्देशित परियोजना में अपने नाटककार बुनियादी बातों सीख लागू करने के लिए समय है.