हेडलेस क्रोम से डरो मत! जानें कि एम्बर परीक्षण के लिए इसका उपयोग क्यों और कैसे करें

अंतिम अद्यतन 9/1/17, एम्बर सीएलआई 2.15। स्कॉट नवागंतुक और बेन डिम्बोस्की को डीबग करने में मेरी मदद करने के लिए विशेष धन्यवाद, संपादन के लिए कार्ल बेकर, और कुछ सीएलआई युक्तियों के लिए टोबीस बिएनेक!

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

यहां तक ​​कि हेडलेस क्रोम भी क्या है?

एम्बर डेवलपर्स के पास विकल्प हैं कि वे किस ब्राउज़र का उपयोग अपने परीक्षण सूट को चलाने के लिए करते हैं, और हेडलेस क्रोम उनमें से एक है। लेकिन यह क्या हैं? Google ब्लॉग कहता है:

यह क्रोम ब्राउज़र को हेडलेस वातावरण में चलाने का एक तरीका है। अनिवार्य रूप से, क्रोम के बिना क्रोम चल रहा है!
(Alt: यह क्या है, मैं यहाँ तक नहीं ...)

सही। यहाँ विकिपीडिया से एक बेहतर परिभाषा है:

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

Ember CLI 2.15 से शुरू होकर, हेडलेस क्रोम, EmberJS में परीक्षण के लिए डिफ़ॉल्ट है। यदि आप एक पुराने एम्बर ऐप के साथ काम कर रहे हैं, तो मेरे पास अच्छी खबर है - आपको हेडलेस क्रोम आज़माने के लिए अपने ऐप को अपग्रेड करने की आवश्यकता नहीं है। तथ्य की बात के रूप में, आप लगभग किसी भी पुराने एम्बर ऐप संस्करण के साथ नवीनतम सीएलआई रिलीज़ का उपयोग कर सकते हैं।

"हेडलेस" वातावरण की आवश्यकता क्यों है?

एक नियमित ब्राउज़र की तरह, एक बिना सिर वाला ब्राउज़र HTML और सीएसएस को समझता है। यह AJAX अनुरोधों की तरह जावास्क्रिप्ट को निष्पादित कर सकता है। एम्बर में स्वीकृति परीक्षणों के बारे में सोचो। यदि कोई परीक्षण छिपा हुआ बटन क्लिक करने का प्रयास करता है, तो उसे क्लिक करने योग्य नहीं होना चाहिए, और परीक्षण विफल होना चाहिए। लेकिन यह कैसे जाना जाता है? क्योंकि ब्राउज़र सभी HTML, सीएसएस, और जावास्क्रिप्ट को किसी उपयोगी चीज के संयोजन के भारी उठाने का काम करता है। और, चूंकि कोई चित्र प्रदर्शित होने के लिए नहीं हैं, परीक्षण बिना सिर के वातावरण में तेज है। कई अलग-अलग प्रकार के हेडलेस ब्राउज़र हैं। Chrome और PhantomJS केवल दो उदाहरण हैं।

तो, क्यों न केवल सामान्य क्रोम ब्राउज़र में सीधे परीक्षण चलाएं? यदि आपके पास एक एम्बर ऐप है, तो एम्बर सर्व करें, और http: // localhost: 4200 / परीक्षण पर जाएं, आप वास्तव में अपने परीक्षणों को वास्तविक समय में देख सकते हैं, या उन्हें रोक सकते हैं और ऐप स्टेट को नेत्रहीन देख सकते हैं। हालांकि, जहां हेडलेस ब्राउज़र वास्तव में चमकते हैं, जब वे निरंतर एकीकरण परीक्षण के लिए उपयोग किए जाते हैं, आमतौर पर सीआई के रूप में संदर्भित किया जाता है। उत्पादन एप्लिकेशन में, एक सेवा का उपयोग करना आम है जो कोड के प्रतिबद्ध होते ही अपने परीक्षण सूट को स्वचालित रूप से चलाता है। और अधिकांश भाग के लिए, वे परीक्षण एक सर्वर पर चलते हैं, न कि "सामान्य" ब्राउज़रों में। उदाहरण के लिए, एम्बर वेबसाइट के हिस्से के लिए खुले पुल अनुरोधों की जांच करें, विशेष रूप से उनके बगल में लाल x के साथ। जब भी गिटहब पर एक पुल अनुरोध खोला जाता है, तो आप देख सकते हैं कि क्या यह परीक्षण पास करता है।

यह मेरा पुल अनुरोध नहीं है। में कसम खाता हूँ। (Alt: GitHub पुल अनुरोध पर कई परीक्षण विफलताओं को दिखाने वाली छवि)

क्यों नहीं PhantomJS का उपयोग करें?

PhantomJS एक हेडलेस ब्राउज़र का एक और उदाहरण है। इसे बनाना और बनाए रखना एक हेरलियन कार्य था, और इसकी सफलता यह है कि हमारे पास अच्छी चीजें क्यों हैं। बिल्डिंग ऐप्स कठिन है ... क्या आप एक संपूर्ण ब्राउज़र बनाने की कल्पना कर सकते हैं ??? लेकिन ऐसा लगता है कि यह अपने रास्ते पर है। एक अनुचर ने अप्रैल 2017 में कहा, "

हेडलेस क्रोम आ रहा है। मुझे लगता है कि लोग इसे बदल देंगे, आखिरकार। PhantomJS की तुलना में Chrome अधिक तेज़ और अधिक स्थिर है। और यह पागल की तरह स्मृति को नहीं खा रहा है। मैं PhantomJS को विकसित करने में कोई भविष्य नहीं देखता।

जैसा कि उल्लेख किया गया है, फैंटमजेएस में कुछ समस्याएं हैं। मेरा अपना एक था: मेरी कोई भी परीक्षा नहीं चलेगी। एक ताजा ऐप में सब कुछ ठीक था, लेकिन कुछ अच्छी तरह से स्थापित निर्भरताएं पेश करने के बाद मेरे असली ऐप का कुछ अज्ञात हिस्सा संगत नहीं था। मैं अंगारा परीक्षण चला, लेकिन इससे पहले कि कोई भी परीक्षण शुरू हो गया, मुझे इन त्रुटियों के साथ बधाई दी गई:

ठीक नहीं 1 फैंटमजस 2.1 - वैश्विक त्रुटि: सिंटैक्सएर्रर: अप्रत्याशित टोकन ‘} http: // localhost: 7357 / संपत्ति / विक्रेता.जेएस, लाइन 120177
ठीक नहीं है 2 फैंटमजस 2.1 - वैश्विक त्रुटि: त्रुटि: मॉड्यूल एम्बर-मेटल की आवश्यकता नहीं पा सकता है: http: // localhost पर एम्बर-परीक्षण / समर्थन: 7357 / संपत्ति / परीक्षण-समर्थन। जेएस, लाइन 58
ठीक नहीं है 3 फैंटमजस 2.1 - वैश्विक त्रुटि: संदर्भ: पता नहीं मिल सकता है: http: // localhost: 7357 / संपत्ति / एम्बर-बायो-ब्राइट.ज, लाइन 5
ठीक नहीं है 4 PhantomJS 2.1 - वैश्विक त्रुटि: संदर्भ: पता नहीं चल सकता है: http: // localhost: 7357 / संपत्ति / परीक्षण में परिभाषित करें। js, पंक्ति 3
ठीक नहीं है ५ फैंटमजस २.१ - वैश्विक त्रुटि: संदर्भ: पता नहीं चल पा रहा है: EmberENV http: // localhost: 7३५ / / ४२१५ / परीक्षण / index.html? Hidepassed, पंक्ति ३om

मैंने इस त्रुटि पर सब कुछ फेंक दिया। नोड मॉड्यूल को उड़ाने, सभी को हटाने, लेकिन सरलतम परीक्षण, EmberCLI को पुनर्स्थापित करना, PhantomJS को स्थापित / अनइंस्टॉल करना, विक्रेता बंडल में खुदाई करना, गुस्सा बिल्ली GIFs साझा करना, कुछ धूप जलाना ... कुछ भी नहीं।

कुछ अन्य डेवलपर्स के साथ क्यू एंड ए के एक छोटे से बाद, यह सुझाव दिया गया था कि मैं हेडलेस क्रोम को देखने की कोशिश करता हूं कि क्या त्रुटियों को डीबग करना आसान हो गया है।

त्रुटियों को डीबग करना आसान नहीं था।

त्रुटियां बस गायब हो गईं।

स्विच कैसे करें

Ember ऐप्स में एक फ़ाइल होती है, जिसे testem.js कहा जाता है, और यह कि आप एम्बर टेस्ट या एम्बर टेस्ट टाइप करते समय उपयोग करने के लिए कौन से परीक्षण टूल कॉन्फ़िगर करते हैं- यहाँ testem.js सामग्री का एक लिंक है, जिसे मैंने रायन टोरंटो के लेख से प्रयोग, कॉपी और पेस्ट किया है। आप EmberCLI GitHub पर इस लिंक पर EmberCLI के साथ शिप की गई टेस्टम फाइल देख सकते हैं।

टेस्टेम क्या है?

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

यह देखो? एक्शन टेस्टम, जिसके परिणामस्वरूप `एम्बर टेस्ट - सर्वर` होता है। जैसा कि आप देख सकते हैं, ember-api-docs पर मेरा नवीनतम कार्य GREAT हो रहा है। सबकुछ ठीक हो जाएगा और मुझे निश्चित रूप से पता है कि मैं क्या कर रहा हूं। नहीं। (Alt: टर्मिनल विंडो जहां वृषण धावक 175 परीक्षण विफलताओं को दिखाता है)

Headless Chrome के क्या नकारात्मक प्रभाव हो सकते हैं?

खैर, एक बात के लिए, हेडलैम्प क्रोम प्रेत स्रोत की तरह खुला स्रोत नहीं है। उस के पेशेवरों और विपक्षों का अपना लेख हो सकता है।

यह नया-ईश भी है इसे Chrome 59 के साथ भेज दिया गया था, लेकिन इससे पहले डेवलपर्स के पास Chrome का उपयोग करने के तरीके थे। बड़ा सवाल यह है कि यदि आप पहले से ही सीआई परीक्षण कर रहे हैं, तो आपका विक्रेता कितना अच्छा समर्थन करता है? बहुत सारे बड़े खिलाड़ियों को इसे लागू करने की जल्दी है, लेकिन यह संभव है कि आप कुछ मुद्दों में भाग लें।

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

कब स्विच करना है

यदि आप अटक रहे हैं, या बस यह जानना चाहते हैं कि एम्बर परीक्षण के लिए नवीनतम और सबसे बड़ा क्या है, तो इसे आज़माएं!

हैप्पी हेडलेस टेस्टिंग!

IrenHorrors द्वारा कलाकृति, क्रिएटिव कॉमन्स एट्रीब्यूशन-गैर-वाणिज्यिक-कोई व्युत्पन्न वर्क्स 3.0 लाइसेंस के तहत साझा की गई