कैसे हेडलेस क्रोम काम करता है

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

हेडलेस क्रोम के कट घटकों और सुविधाओं के तहत, हेडलेस क्रोम का उपयोग करने के लिए दिलचस्प परिदृश्य। Puppeteer के बारे में दूसरा भाग Google Chrome और Chromium में Headless मोड के प्रबंधन के लिए एक सुविधाजनक Node.js लाइब्रेरी है।


वक्ता के बारे में: विटाली स्लोबोडिन - फैंटमजेएस का एक पूर्व डेवलपर - जिसने इसे बंद कर दिया और उसे दफन कर दिया। कभी-कभी यह QstWebKit के "पुनर्जीवित" संस्करण में कोंस्टेंटिन टोकरेव ( annulen ) की मदद करता है - बहुत QtWebKit, जहां ES6, फ्लेक्सबॉक्स और कई अन्य आधुनिक मानकों के लिए समर्थन है।

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

एक सिर रहित ब्राउज़र क्या है?

नाम से पहले से ही यह स्पष्ट है कि यह बिना सिर के कुछ है। एक ब्राउज़र संदर्भ में, इसका मतलब निम्नलिखित है।

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

यह एक विशिष्ट WebKit- आधारित ब्राउज़र है। आप घटकों की समझ प्राप्त नहीं कर सकते हैं - यह सिर्फ एक दृश्य छवि है।



हम केवल ब्राउज़र UI के शीर्ष घटक में रुचि रखते हैं। यह वही यूजर इंटरफेस है - विंडोज़, मेनू, पॉप-अप नोटिफिकेशन और बाकी सब।



यह वह है जो बिना सिर वाला ब्राउज़र दिखता है। अंतर नोटिस? हम उपयोगकर्ता इंटरफ़ेस को पूरी तरह से हटा देते हैं। वह और नहीं है। केवल ब्राउज़र ही रहता है ।

आज हम हेडलेस क्रोम () के बारे में बात करेंगे। उनमें क्या अंतर है? वास्तव में, क्रोम क्रोमियम का एक ब्रांडेड संस्करण है, जिसमें मालिकाना कोडेक्स, समान एच .264, Google सेवाओं के साथ एकीकरण और सब कुछ है। क्रोमियम केवल एक खुला स्रोत कार्यान्वयन है।



2016 की हेडलेस क्रोम जन्म तिथि: 2016 यदि आप उसके पार आते हैं, तो आप मुझसे एक मुश्किल सवाल पूछ सकते हैं: "ऐसा कैसे है, मुझे 2017 की खबर याद है?" तथ्य यह है कि Google के इंजीनियरों की एक टीम ने 2016 में वापस फैंटमज डेवलपर्स से संपर्क किया, जब वे क्रोम में हेडलेस मोड को लागू करना शुरू कर रहे थे। हमने पूरे Google डॉक्स को लिखा, हम इंटरफ़ेस को कैसे लागू करेंगे आदि। तब Google एक इंटरफ़ेस को पूरी तरह से PhantomJS के साथ संगत बनाना चाहता था। यह केवल तब था जब इंजीनियरों की टीम इस तरह की संगतता नहीं करने का फैसला करने के लिए आई थी।

हम प्रबंधन इंटरफ़ेस (एपीआई) के बारे में बात करेंगे, जो कि क्रोम देवटूल प्रोटोकॉल है, बाद में और देखें कि आप इसके साथ क्या कर सकते हैं।

यह लेख Puppeteer पिरामिड (अंग्रेजी कठपुतली से) के सिद्धांत पर बनाया जाएगा। एक अच्छा नाम चुना गया है - कठपुतली वह है जो हर किसी को नियंत्रित करता है!



पिरामिड के आधार पर हेडलेस क्रोम - हेडलेस क्रोम - क्या है?

बिना सिर का क्रोम

केंद्र में - हेडलेस ब्राउज़र - समान क्रोमियम या क्रोम (आमतौर पर क्रोमियम)। इसमें तथाकथित रेंडरर्स (RENDERER) - प्रक्रियाएं हैं जो पृष्ठ की सामग्री (आपकी खिड़की) को खींचती हैं। इसके अलावा, प्रत्येक टैब को अपने स्वयं के रेंडरर की आवश्यकता होती है, इसलिए यदि आप कई टैब खोलते हैं, तो क्रोम रेंडरिंग के लिए कई प्रक्रियाओं को शुरू करेगा।

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

आपके एप्लिकेशन में हेडलेस क्रोम एम्बेड करने के 2 तरीके हैं (या इसका उपयोग करें):

1. स्टैंडर्ड जब आप प्यूपीटर लेते हैं और हेडलेस क्रोम का उपयोग करते हैं।
   
2. जब आप हेडलेस लाइब्रेरी कंपोनेंट लेते हैं, यानी एक लाइब्रेरी जो हेडलेस मोड को लागू करता है, और इसे आपके एप्लिकेशन में एम्बेड करता है, उदाहरण के लिए, C ++ में।
   

आप पूछ सकते हैं, सामने के छोर पर C ++ क्यों है? इसका उत्तर DevTools C ++ API है। आप हेडलेस क्रोम की विशेषताओं को विभिन्न तरीकों से कार्यान्वित और उपयोग कर सकते हैं। यदि आप Puppeteer का उपयोग करते हैं, तो हेडलेस ब्राउज़र के साथ संचार वेब सॉकेट के माध्यम से किया जाएगा। यदि आप डेस्कटॉप एप्लिकेशन में हेडलेस लाइब्रेरी एम्बेड करते हैं, तो आप मूल इंटरफ़ेस का उपयोग करेंगे, जो C ++ में लिखा गया है।

लेकिन इन सबके अलावा, आपके पास अभी भी अतिरिक्त चीजें हैं, जिनमें शामिल हैं:

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

क्रोमियम घटक

फिर से मैं एक मुश्किल सवाल सुनता हूं: “मुझे इस भयानक योजना की आवश्यकता क्यों है? मैं नीचे लिखता हूं (अपने पसंदीदा ढांचे का नाम डालें)

मेरा मानना ​​है कि एक डेवलपर को पता होना चाहिए कि उसका टूल कैसे काम करता है। यदि आप React के नीचे लिखते हैं, तो आपको पता होना चाहिए कि रिएक्ट कैसे काम करता है। यदि आप कोणीय के नीचे लिखते हैं, तो आपको पता होना चाहिए कि कोणीय हुड के नीचे क्या है।

क्योंकि किसी चीज के मामले में, उदाहरण के लिए, एक घातक त्रुटि या उत्पादन में बहुत गंभीर बग, आपको "हिम्मत" से निपटना होगा, और आप बस वहां खो सकते हैं - जहां, क्या और कैसे। यदि आप, उदाहरण के लिए, परीक्षण लिखें या हेडलेस क्रोम का उपयोग करें, तो आप भी इसके कुछ अजीब व्यवहार और बग का सामना कर सकते हैं। इसलिए, मैं संक्षेप में आपको बताऊंगा कि क्रोमियम में क्या घटक हैं। जब आप एक बड़े स्टैक ट्रेस देखते हैं, तो आपको पहले से ही पता चल जाएगा कि किस तरह से खुदाई करना है और इसे कैसे ठीक करना है।

प्लेटफ़ॉर्म परत का निम्नतम स्तर। इसके घटक:

• क्रोम में अमूर्त विंडो मैनेजर ओजोन , ऑपरेटिंग सिस्टम के विंडो मैनेजर के साथ बातचीत करता है। लिनक्स पर, यह एक एक्स-सर्वर या वेलैंड है। विंडोज पर, यह विंडोज विंडो मैनेजर है।
• शेड्यूलर वही शेड्यूलर है जिसके बिना हम कहीं नहीं हैं, क्योंकि हम सभी जानते हैं कि क्रोम एक बहु-प्रक्रिया अनुप्रयोग है, और हमें किसी तरह सभी थ्रेड्स, प्रक्रियाओं और अन्य सभी चीजों को हल करने की आवश्यकता है।
• नेट - ब्राउज़र में हमेशा नेटवर्क के साथ काम करने के लिए एक घटक होना चाहिए, उदाहरण के लिए, HTTP को पार्स करना, हेडर बनाना, संपादन, आदि।

सामग्री परत क्रोम का सबसे बड़ा घटक है। इसमें शामिल हैं:

• पलक वेबकिट से वेबकोर आधारित वेब इंजन है। यह HTML को एक स्ट्रिंग, पार्स के रूप में ले सकता है, जावास्क्रिप्ट को निष्पादित कर सकता है - और वह यह है। वह अब कुछ भी नहीं करना जानता है: न तो नेटवर्क के साथ काम करता है, न ही ड्रा - यह सब पलक के ऊपर होता है।
  ब्लिंक में शामिल हैं: वेबकोर का एक अत्यधिक संशोधित संस्करण - एचटीएमएल और सीएसएस के साथ काम करने के लिए एक वेब इंजन; वी 8 (जावास्क्रिप्ट इंजन); Chrome में हमारे द्वारा उपयोग किए जाने वाले सभी एक्सटेंशन के लिए एक API, जैसे कि एक विज्ञापन अवरोधक। इसमें DevTools प्रोटोकॉल भी शामिल है।
  
• कंटेंट एपीआई एक इंटरफ़ेस है जिसके साथ आप बहुत आसानी से वेब इंजन की सभी सुविधाओं का उपयोग कर सकते हैं। चूंकि ब्लिंक (शायद एक मिलियन से अधिक इंटरफेस) के अंदर बहुत सारी चीजें हैं, इन सभी तरीकों और कार्यों में खो जाने के लिए नहीं, आपको सामग्री एपीआई की आवश्यकता है। आप HTML दर्ज करते हैं, इंजन स्वचालित रूप से इसे संसाधित करेगा, DOM को पार्स करेगा, CSS OM का निर्माण करेगा, जावास्क्रिप्ट निष्पादित करेगा, टाइमर, हैंडलर चलाएगा, और बाकी सब कुछ।
  

बिना स्तर की परत का स्तर - बिना सिर का ब्राउज़र स्तर:

• बिना पुस्तकालय के ।
• एंबेडडर एपीआई इंटरफेस आवेदन में हेडलेस लाइब्रेरी एम्बेड करने के लिए।
• क्लाइंट एपीआई एक इंटरफ़ेस है जिसका उपयोग प्यूपेएटर करता है।

आवेदन परत आवेदन परत :

• आपका आवेदन ( एंबेडिंग ऐप );
• गैजेट्स, उदाहरण के लिए, हेडलेस शेल ।

अब गहराई से थोड़ा ऊपर उठें, सक्रिय हों - अब फ्रंटेंड जाएगा।

क्रोम DevTools प्रोटोकॉल

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



वास्तव में, DevTools प्रोटोकॉल में ही बड़ी संख्या में विधियां हैं। आपके डेवलपर टूल तक पहुंच नहीं है, शायद उनमें से 80% तक। वास्तव में, आप वहां सब कुछ कर सकते हैं!

आइए देखें कि यह प्रोटोकॉल क्या है। वास्तव में, यह बहुत सरल है। इसके 2 घटक हैं:

1. DevTools का लक्ष्य - वह टैब जिसका आप निरीक्षण कर रहे हैं;
   
2. DevTools क्लाइंट - मान लें कि यह एक डेवलपर पैनल है जिसे दूरस्थ रूप से लॉन्च किया गया है।
   

वे साधारण JSON का उपयोग करके संवाद करते हैं:

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

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

कठपुतली चलानेवाला

आप अपने पसंदीदा पैकेज मैनेजर का उपयोग करके पुप्तेर को स्थापित कर सकते हैं - यह यार्न, एनपीएम या कोई अन्य हो।

इसका उपयोग करना भी आसान है - बस इसे अपनी Node.js स्क्रिप्ट में अनुरोध करें, और आप पहले से ही इसका उपयोग कर सकते हैं।



Https://try-puppeteer.appspot.com लिंक का उपयोग करके , आप साइट पर सीधे एक स्क्रिप्ट लिख सकते हैं, इसे निष्पादित कर सकते हैं और सीधे ब्राउज़र में परिणाम प्राप्त कर सकते हैं। यह सब हेडलेस क्रोम का उपयोग करके लागू किया जाएगा।

Node.js के अंतर्गत सबसे सरल लिपि पर विचार करें:

const puppeteer = require('puppeteer'); (async() => { const browser = await puppeteer.launch() ; const page = await browser.newPage(); await page.goto('http://devconf.ru/') ; await page.emulateMedia('screen') ; await page.pdf({ path: './devconf.pdf, printBackground: true }); await browser.close() ; })(); 

यहां हम बस पेज को खोलते हैं और इसे पीडीएफ में प्रिंट करते हैं। आइए वास्तविक समय में इस लिपि का संचालन देखें:


सब कुछ शांत होगा, लेकिन यह स्पष्ट नहीं है कि अंदर क्या है। बेशक, हमारे पास एक हेडलेस ब्राउज़र है, लेकिन हम कुछ भी नहीं देखते हैं। इसलिए, Puppeteer के पास एक विशेष ध्वज है जिसे हेडलेस कहा जाता है: असत्य:

 const browser = await puppeteer.launch({ headless: false }); 

हेडलेस मोड में हेडलेस ब्राउजर को लॉन्च करना आवश्यक है, जब आप कुछ विंडो देख सकते हैं और देख सकते हैं कि वास्तविक समय में आपके पेज के साथ क्या होता है, यानी आपकी स्क्रिप्ट आपके पेज के साथ कैसे इंटरैक्ट करती है।



जब हम इस ध्वज को जोड़ेंगे तो यह एक ही स्क्रिप्ट दिखाई देगी। बाईं ओर एक ब्राउज़र विंडो दिखाई देती है - अधिक स्पष्ट रूप से।


कठपुतली के पेशेवरों:

+ यह क्रोम हेडलेस के लिए Node.js लाइब्रेरी है।
+ Node.js> = 6 की विरासत संस्करणों के लिए समर्थन।
+ आसान स्थापना।
+ इस संपूर्ण विशाल मशीन के प्रबंधन के लिए उच्च-स्तरीय एपीआई।

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

दुर्भाग्य से, नुकसान भी हैं, अगर हम सिर्फ मूल स्थापना लेते हैं।

विपक्ष Puppeteer :

- शीर्ष स्तर के कार्य नहीं : बुकमार्क और पासवर्ड का सिंक्रनाइज़ेशन; प्रोफ़ाइल समर्थन; हार्डवेयर त्वरण आदि।
- सॉफ्टवेयर रेंडरिंग सबसे महत्वपूर्ण माइनस है। सभी गणना और प्रतिपादन आपके सीपीयू पर होते हैं। लेकिन यहां, Google इंजीनियर जल्द ही हमें आश्चर्यचकित करेंगे - हार्डवेयर त्वरण के कार्यान्वयन पर काम पहले से ही चल रहा है। पहले से ही अब आप इसका उपयोग करने की कोशिश कर सकते हैं यदि आप बहादुर और साहसी हैं।
- हाल तक तक, एक्सटेंशन के लिए कोई समर्थन नहीं था - अब वहाँ है! यदि आप एक चालाक डेवलपर हैं, तो आप अपना पसंदीदा AdBlock ले सकते हैं, निर्दिष्ट करें कि Puppeteer इसका उपयोग कैसे करेगा, और सभी विज्ञापन अवरुद्ध हो जाएंगे।
- कोई ऑडियो / वीडियो समर्थन नहीं । क्योंकि, ठीक है, हेडलेस-ब्राउज़र ऑडियो और वीडियो क्यों।

कठपुतली क्या कर सकते हैं:

• अलगाव सत्र।
• आभासी टाइमर।
• नेटवर्क अनुरोधों का अवरोधन।

और कुछ शांत चीजें जो मैं थोड़ा आगे दिखाऊंगा।

सत्र अलगाव

यह क्या है, यह किसके साथ खाया जाता है, और क्या हम नहीं घुटेंगे? - चौंकिए मत!

सत्र अलगाव प्रत्येक टैब के लिए एक अलग "रिपॉजिटरी" है । जब आप Puppeteer शुरू करते हैं, तो आप एक नया पृष्ठ बना सकते हैं, और प्रत्येक नए पृष्ठ का अपना भंडार हो सकता है, जिसमें शामिल हैं:

• Cookes;
  
• स्थानीय भंडारण;
  
• कैश।
  

सभी पृष्ठ एक दूसरे से स्वतंत्र रूप से रहेंगे। यह आवश्यक है, उदाहरण के लिए, परीक्षणों की परमाणुता बनाए रखने के लिए।

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

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

आभासी टाइमर

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

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

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

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

नीचे आभासी टाइमर का एक योजनाबद्ध दृश्य।



शीर्ष पंक्ति में दो नियमित टाइमर हैं: पहली समय की पहली इकाई में शुरू होती है और एक समय में एक इकाई में चलती है, दूसरी समय की तीसरी इकाई में शुरू होती है और समय की तीन इकाइयों में चलती है।

तेजी से टाइमर - वे एक के बाद एक शुरू करते हैं। जब हम उन्हें रोकते हैं, तो हमारे पास समय की अवधि होती है जिसके बाद सभी टाइमर शुरू होते हैं।

इसे एक उदाहरण के रूप में देखें। नीचे एक कट-ऑफ कोड है जो अनिवार्य रूप से कोड पेज से एनीमेशन पेज को लोड करता है और इंतजार करता है:

 (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); const url = 'https ://codepen.o/ajerez/full/EaEEOW/'; // # 1 await page.goto(url, { waitUnitl: 'load' }); // # 2 })(); 

प्रस्तुति के दौरान कार्यान्वयन का यह प्रदर्शन सिर्फ एनीमेशन है।

अब, क्रोम DevTools प्रोटोकॉल का उपयोग करते हुए, हम एनिमेशन नामक एक विधि भेजते हैं। PlaybackRate, पैरामीटर के रूप में 12 के मान के साथ इसे प्लेबैकरेट पास करें:

 const url = 'https://codepen.o/ajerez/full/EaEEOW/'; // # 1 await page._client.send('Animation.setPlaybackRate', { playbackRate: 12 }); // # 3 await page.goto(url, { waitUntil: 'load' }); // # 2 

हम उसी लिंक को लोड करते हैं, और एनिमाका बहुत तेजी से काम करना शुरू कर देता है। यह इस तथ्य के कारण है कि हमने एक आभासी टाइमर का उपयोग किया और 12 बार एनीमेशन के प्लेबैक को तेज किया।

चलिए अब एक प्रयोग करते हैं - प्लेबैक करें पास: 0 - और देखें क्या होता है। और यहां यह होगा: कोई भी एनीमेशन नहीं है, यह नहीं खेलता है। शून्य और नकारात्मक मान पूरे एनीमेशन को पूरी तरह से रोक देते हैं।

नेटवर्क अनुरोधों के साथ काम करें

आप निम्न ध्वज को सेट करके नेटवर्क अनुरोधों को रोक सकते हैं:

 await page.setRequestlnterception(true); 

इस मोड में, एक अतिरिक्त घटना दिखाई देती है जो नेटवर्क अनुरोध भेजने या प्राप्त होने पर आग लग जाती है।

आप मक्खी पर अनुरोध बदल सकते हैं । इसका मतलब है कि आप इसकी सभी सामग्री (निकाय) और इसके हेडर को पूरी तरह से बदल सकते हैं, निरीक्षण कर सकते हैं, यहां तक ​​कि अनुरोध भी रद्द कर सकते हैं।

HTTP के माध्यम से मूल प्रमाणीकरण सहित प्राधिकरण या प्रमाणीकरण को संसाधित करने के लिए यह आवश्यक है।

आप कोड कवरेज (JS / CSS) भी कर सकते हैं। Puppeteer के साथ, आप यह सब स्वचालित कर सकते हैं। हम सभी उपयोगिताओं को जानते हैं जो एक पृष्ठ लोड कर सकते हैं, दिखा सकते हैं कि इसमें कौन सी कक्षाएं उपयोग की जाती हैं, आदि। लेकिन क्या हम उनसे संतुष्ट हैं? मुझे नहीं लगता।

ब्राउज़र बेहतर जानता है कि कौन से चयनकर्ता और कक्षाएं उपयोग की जाती हैं - यह एक ब्राउज़र है! वह हमेशा जानता है कि कौन सा जावास्क्रिप्ट निष्पादित किया गया है, जो नहीं, जो सीएसएस का उपयोग किया जाता है, जो नहीं।

Chrome DevTools प्रोटोकॉल बचाव में आता है:

 await Promise.all ( [ page.coverage.startJSCoverage(), page.coverage.startCSSCoverage() ]); await page.goto('https://example.com'); const [jsCoverage, cssCoverage] = await Promise,all([ page.coverage.stopJSCoverage(), page.coverage.stopCSSCoverage() ]): 

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

अन्य बातों के अलावा, वहाँ पहले से ही एक प्लगइन है कि Puppeteer इस्तांबुल के लिए यह सब निर्यात करता है।

कठपुतली पिरामिड के शीर्ष पर एक स्क्रिप्ट है जिसे आपने Node.js पर लिखा है - यह सभी निचले बिंदुओं के लिए गॉडफादर की तरह है।



लेकिन ... "डेनिश राज्य में सब कुछ शांत नहीं है ..." - जैसा कि विलियम शेक्सपियर ने लिखा था।

हेडलेस ब्राउज़र में क्या गलत है?

हेडलेस ब्राउज़र में समस्याएँ होती हैं, भले ही उनकी सभी शांत सुविधाएँ इतना कुछ कर सकती हैं।

विभिन्न प्लेटफार्मों पर पेज रेंडरिंग में अंतर

मैं वास्तव में इस आइटम को प्यार करता हूं और इसके बारे में लगातार बात करता हूं। आइए इस तस्वीर को देखें।



यहाँ सादे पाठ के साथ एक नियमित पृष्ठ है: दाईं ओर - लिनक्स पर क्रोम में, बाईं ओर - विंडोज के तहत। स्क्रीनशॉट के साथ परीक्षण करने वालों को पता है कि एक मान हमेशा सेट होता है, जिसे "त्रुटि का मार्जिन" कहा जाता है, जो यह निर्धारित करता है कि स्क्रीनशॉट कब समान माना जाता है और कब नहीं।

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

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

इसलिए, मैं कहता हूं कि स्क्रीनशॉट के साथ बिल्कुल भी परीक्षण न करें - इसे भूल जाएं।

वैसे, यदि आप अभी भी स्क्रीनशॉट के साथ परीक्षण करना चाहते हैं, तो रोमन ड्वोरोव द्वारा एक अद्भुत लेख है, " स्क्रीनशॉट के साथ यूनिट-परीक्षण: ध्वनि अवरोधक को तोड़ना "। यह सीधे जासूसी कथा है।

अवरुद्ध

जब आप स्क्रैपिंग करते हैं या गैरकानूनी तरीके से अपनी सामग्री प्राप्त करते हैं तो कई बड़ी सामग्री प्रदाता पसंद नहीं करते हैं। कल्पना कीजिए कि मैं एक प्रमुख सामग्री प्रदाता हूं और आपके साथ एक ही खेल खेलना चाहता हूं। दो अलग-अलग ब्राउज़रों में दो GET अनुरोध हैं।


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


मैं उस बिंदु तक पहुंच सकता हूं जहां मैं आपके अनुरोधों में HTTP हेडर के आदेश का मिलान करके आपके ब्राउज़र (वास्तव में Chrome या फ़ायरफ़ॉक्स क्या है) का पता लगाऊंगा। यदि मेजबान पहले जाता है - मुझे स्पष्ट रूप से पता है - यह क्रोम है। तब मैं तुलना नहीं कर सकता। हां, निश्चित रूप से, अधिक जटिल एल्गोरिदम हैं - हम न केवल ऑर्डर की जांच करते हैं, बल्कि मान भी, आदि। आदि लेकिन यह महत्वपूर्ण है कि मैं आपके शीर्षकों को डाल सकता हूं, जांच कर सकता हूं कि आप कौन हैं, और फिर आपको ब्लॉक करें या आपको ब्लॉक न करें।

कुछ सुविधाओं को लागू करने में असमर्थ (फ़्लैश)

क्या आपने कभी गहराई में अध्ययन किया है, सीधे कट्टर, ब्राउज़र में फ्लैश? किसी तरह मैंने अंदर देखा - तो मुझे छह महीने तक नींद नहीं आई।

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

पूर्ण स्वचालन और बॉट

जैसा कि मैंने पहले कहा, बड़ी सामग्री प्रदाता बहुत डरते हैं जब आप मकड़ियों या हड़पने वाले लिखते हैं जो बस एक शुल्क के लिए प्रदान की गई जानकारी चोरी करते हैं।

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

कोई मानक (एकल) एपीआई नहीं है

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

WebGL?

लोग बिना सिर के मोड में WebGL के लिए भी पूछते हैं। यह लिंक आपको Google Chrome बग ट्रैकर तक पहुंचने देता है । डेवलपर्स, वेबगेल के लिए हेडलेस-मोड के कार्यान्वयन के लिए सक्रिय रूप से मतदान कर रहे हैं, और पहले से ही वह कुछ आकर्षित कर सकते हैं। वे अब केवल हार्डवेयर प्रतिपादन द्वारा संयमित हैं। जैसे ही हार्डवेयर रेंडरिंग का कार्यान्वयन पूरा हो जाता है, उसके बाद WebGL अपने आप उपलब्ध हो जाएगा, यानी बैकग्राउंड में कुछ किया जा सकता है।

लेकिन सब कुछ इतना बुरा नहीं है!

हमारे पास बाजार पर एक दूसरा खिलाड़ी है - 11 मई, 2018 को खबर थी कि माइक्रोसॉफ्ट ने अपने एज ब्राउज़र में लगभग उसी प्रोटोकॉल को लागू करने का फैसला किया है जो Google Chrome में उपयोग किया जाता है। उन्होंने विशेष रूप से एक कंसोर्टियम बनाया जहां वे एक प्रोटोकॉल पर चर्चा कर रहे हैं जिसे वे एक उद्योग मानक पर लाना चाहते हैं ताकि आप अपनी स्क्रिप्ट ले सकें और इसे एज, क्रोम और फायरफॉक्स के तहत चला सकें।

लेकिन एक "लेकिन" है - माइक्रोसॉफ्ट एज में हेडलेस मोड नहीं है, दुर्भाग्य से। उनके पास एक मतदान मतदान है जहां लोग लिखते हैं: "हमें एक सिर रहित मोड दें!" - लेकिन वे चुप हैं। शायद गुप्त रूप से कुछ देखा हो।

TODO (निष्कर्ष)

मैंने यह सब इसलिए बताया ताकि आप अपने प्रबंधक के पास आ सकें, या, यदि आप एक प्रबंधक हैं, डेवलपर के पास, और कहें: “यह बात है! हम अब सेलेनियम नहीं चाहते हैं - हमें Puppeteer दें! हम इसमें परीक्षण करेंगे। ” ऐसा होने पर मुझे खुशी होगी।

लेकिन अगर आप सीख सकते हैं, मेरी तरह, Puppeteer का उपयोग करने वाले ब्राउज़र, सक्रिय रूप से बग पोस्ट करते हैं, या एक पुल अनुरोध भेजते हैं, तो मुझे और खुशी होगी। OpenSource में यह टूल GitHub पर है, Node.js में लिखा गया है - आप इसे उधार ले सकते हैं और इसमें योगदान कर सकते हैं।

Puppeteer के साथ मामला इस मायने में अनूठा है कि Google में दो टीमें काम कर रही हैं: एक विशेष रूप से Puppeteer के साथ काम करती है, दूसरी हेडलेस मोड के साथ। यदि कोई उपयोगकर्ता बग ढूंढता है और इसके बारे में GitHub पर लिखता है, तो यदि यह बग Puppeteer में नहीं है, लेकिन Headless Chrome में, बग Headless Chrome कमांड पर जाता है। यदि वे इसे वहां ठीक कर देते हैं, तो प्यूपेटेर को बहुत जल्दी अपडेट किया जाता है। इसका परिणाम एकल पारिस्थितिकी तंत्र में होता है जब समुदाय ब्राउज़र को बेहतर बनाने में मदद करता है।

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

संपर्क विवरण:

• github.com/vitallium
• vk.com/vitallium
• twitter.com/vitalliumm

फ्रंटेंड कॉन्फ मॉस्को - फ्रंट-एंड डेवलपर्स का एक विशेष सम्मेलन मॉस्को में 4 और 5 अक्टूबर को , इन्फोसिस में आयोजित किया जाएगा। सम्मेलन वेबसाइट पर पहले से ही स्वीकृत रिपोर्टों की एक सूची प्रकाशित की गई है।

हमारे समाचार पत्र में हम नियमित रूप से भाषणों की विषयगत समीक्षा करते हैं, जारी किए गए टेप और भविष्य की घटनाओं के बारे में बात करते हैं - पहले समाचार प्राप्त करने के लिए साइन अप करें।

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