सुविधाओं के बारे में जानकारी

Chrome DevTools Recorder पैनल की सभी सुविधाओं के बारे में ज़्यादा जानकारी देने वाले इस लिंक की मदद से, यूज़र फ़्लो शेयर करने, उनमें बदलाव करने, और उनके इस्तेमाल करने के तरीके के बारे में जानें.

Recorder पैनल के साथ काम करने के बारे में बुनियादी बातें जानने के लिए, उपयोगकर्ता फ़्लो को रिकॉर्ड करना, फिर से चलाना, और मेज़र करना लेख पढ़ें.

शॉर्टकट के बारे में जानना और उन्हें पसंद के मुताबिक बनाना

रिकॉर्डर पर तेज़ी से नेविगेट करने के लिए, शॉर्टकट का इस्तेमाल करें. डिफ़ॉल्ट शॉर्टकट की सूची के लिए, Recorder पैनल के कीबोर्ड शॉर्टकट देखें.

Recorder में सभी शॉर्टकट की सूची दिखाने वाला संकेत खोलने के लिए, सबसे ऊपर दाएं कोने में, सहायता शॉर्टकट दिखाएं पर क्लिक करें.

Recorder के शॉर्टकट को पसंद के मुताबिक बनाने के लिए:

1. सेटिंग > शॉर्टकट खोलें.
2. नीचे की ओर स्क्रोल करके, रिकॉर्डर सेक्शन पर जाएं.
3. पसंद के मुताबिक शॉर्टकट बनाएं में दिया गया तरीका अपनाएं.

यूज़र फ़्लो में बदलाव करें

Recorder पैनल में सबसे ऊपर, ये काम किए जा सकते हैं:

1. नई रिकॉर्डिंग जोड़ें. नई रिकॉर्डिंग जोड़ने के लिए, + आइकॉन पर क्लिक करें.
2. सभी रिकॉर्डिंग देखें. ड्रॉप-डाउन में, सेव की गई रिकॉर्डिंग की सूची दिखती है. सेव की गई रिकॉर्डिंग की सूची को बड़ा और मैनेज करने के लिए, [number] रिकॉर्डिंग विकल्प चुनें.

3. रिकॉर्डिंग को एक्सपोर्ट करना. स्क्रिप्ट को ज़रूरत के मुताबिक बनाने या गड़बड़ी की शिकायत करने के लिए शेयर करने के लिए, यूज़र फ़्लो को इनमें से किसी एक फ़ॉर्मैट में एक्सपोर्ट किया जा सकता है:

   • JSON फ़ाइल.
   • @puppeteer/replay स्क्रिप्ट.
   • Puppeteer स्क्रिप्ट.
   • Puppeteer (इसमें Lighthouse का विश्लेषण भी शामिल है).

   फ़ॉर्मैट के बारे में ज़्यादा जानकारी के लिए, उपयोगकर्ता फ़्लो एक्सपोर्ट करना लेख पढ़ें.

4. कोई रिकॉर्डिंग इंपोर्ट करें. सिर्फ़ JSON फ़ॉर्मैट में.

5. कोई रिकॉर्डिंग मिटाएं. चुनी गई रिकॉर्डिंग को मिटाएं.

रिकॉर्डिंग के बगल में मौजूद, बदलाव करें बटन पर क्लिक करके भी रिकॉर्डिंग के नाम में बदलाव किया जा सकता है.

यूज़र फ़्लो शेयर करना

Recorder में उपयोगकर्ता फ़्लो को एक्सपोर्ट और इंपोर्ट किया जा सकता है. यह गड़बड़ी की शिकायत करने के लिए मददगार है, क्योंकि गड़बड़ी को दोहराने के लिए किए गए चरणों का सटीक रिकॉर्ड शेयर किया जा सकता है. इसे एक्सटर्नल लाइब्रेरी की मदद से भी एक्सपोर्ट किया जा सकता है और फिर से चलाया जा सकता है.

यूज़र फ़्लो एक्सपोर्ट करें

यूज़र फ़्लो एक्सपोर्ट करने के लिए:

1. वह यूज़र फ़्लो खोलें जिसे एक्सपोर्ट करना है.
2. रिकॉर्डर पैनल में सबसे ऊपर, एक्सपोर्ट करें पर क्लिक करें.
3. ड्रॉप-डाउन सूची से इनमें से कोई एक फ़ॉर्मैट चुनें:
   • JSON फ़ाइल. रिकॉर्डिंग को JSON फ़ाइल के तौर पर डाउनलोड करें.
   • @puppeteer/replay. रिकॉर्डिंग को Puppeteer Replay स्क्रिप्ट के तौर पर डाउनलोड करें.
   • Puppeteer. रिकॉर्डिंग को Puppeteer स्क्रिप्ट के तौर पर डाउनलोड करें.
   • Puppeteer (लाइटहाउस विश्लेषण के साथ). एम्बेड किए गए Lighthouse विश्लेषण के साथ, रिकॉर्डिंग को Puppeteer स्क्रिप्ट के तौर पर डाउनलोड करें.
   • रिकॉर्ड करने वाले टूल के एक्सपोर्ट एक्सटेंशन से मिले एक या एक से ज़्यादा विकल्प.
4. फ़ाइल सेव करें.

एक्सपोर्ट करने के हर डिफ़ॉल्ट विकल्प के साथ, ये काम किए जा सकते हैं:

• JSON. आसानी से पढ़े जा सकने वाले JSON ऑब्जेक्ट में बदलाव करें और JSON फ़ाइल को Recorder में वापस इंपोर्ट करें.
• @puppeteer/replay. Puppeteer Replay लाइब्रेरी की मदद से, स्क्रिप्ट को फिर से चलाएं. @puppeteer/replay स्क्रिप्ट के तौर पर एक्सपोर्ट करते समय, यह तरीका JSON ऑब्जेक्ट बना रहता है. अगर आपको अपनी CI/CD पाइपलाइन के साथ इंटिग्रेट करना है, लेकिन आपके पास अब भी इन चरणों को JSON के तौर पर बदलने की सुविधा है, तो यह विकल्प आपके लिए सबसे सही है. बाद में, आपके पास उन्हें बदलकर वापस Recorder में इंपोर्ट करने का विकल्प भी होता है.
• Puppeteer स्क्रिप्ट. Puppeteer की मदद से स्क्रिप्ट फिर से चलाएं. इन चरणों को JavaScript में बदल दिया जाता है. इसलिए, इन्हें अपनी पसंद के मुताबिक बनाया जा सकता है. उदाहरण के लिए, चरणों को लूप में चलाना. एक बात ध्यान रखें, इस स्क्रिप्ट को Recorder में वापस इंपोर्ट नहीं किया जा सकता.

• Puppeteer (लाइटहाउस विश्लेषण के साथ). एक्सपोर्ट करने का यह विकल्प, पिछले विकल्प जैसा ही है. हालांकि, इसमें Lighthouse का विश्लेषण जनरेट करने वाला कोड शामिल होता है.

  स्क्रिप्ट चलाएं और flow.report.html फ़ाइल में आउटपुट देखें:

  # npm i puppeteer lighthouse
  node your_export.js
  

  

एक्सटेंशन इंस्टॉल करके, उसे अपनी पसंद के मुताबिक फ़ॉर्मैट में एक्सपोर्ट करें

रिकॉर्डर के एक्सटेंशन देखें.

यूज़र फ़्लो इंपोर्ट करें

यूज़र फ़्लो इंपोर्ट करने के लिए:

1. रिकॉर्डर पैनल में सबसे ऊपर मौजूद, इंपोर्ट करें बटन पर क्लिक करें.
2. रिकॉर्ड किए गए यूज़र फ़्लो वाली JSON फ़ाइल चुनें.
3. इंपोर्ट किए गए यूज़र फ़्लो को चलाने के लिए, फिर से चलाएं बटन पर क्लिक करें.

बाहरी लाइब्रेरी के साथ रीप्ले करना

Puppeteer Replay एक ओपन सोर्स लाइब्रेरी है, जिसे Chrome DevTools की टीम मैनेज करती है. इसे Puppeteer के आधार पर बनाया गया है. यह एक कमांड-लाइन टूल है. JSON फ़ाइलों को इसके साथ फिर से चलाया जा सकता है.

इसके अलावा, तीसरे पक्ष की इन लाइब्रेरी की मदद से, JSON फ़ाइलों को बदला और फिर से चलाया जा सकता है.

JSON यूज़र फ़्लो को कस्टम स्क्रिप्ट में बदलें:

• Chrome रिकॉर्डर को कंप्रेस करें. इसका इस्तेमाल करके, यूज़र फ़्लो JSON फ़ाइलों को साइप्रेस टेस्ट स्क्रिप्ट में बदला जा सकता है. इसे कैसे काम करता है, यह देखने के लिए यह demo देखें.
• Nightwatch Chrome Recorder. इसका इस्तेमाल करके, यूज़र फ़्लो JSON फ़ाइलों को Nightwatch टेस्ट स्क्रिप्ट में बदला जा सकता है.
• CodeceptJS Chrome Recorder. इसका इस्तेमाल, उपयोगकर्ता फ़्लो की JSON फ़ाइलों को CodeceptJS टेस्ट स्क्रिप्ट में बदलने के लिए किया जा सकता है.

JSON के यूज़र फ़्लो फिर से चलाएं:

• Testcafe की मदद से रिकॉर्डिंग फिर से चलाएं. यूज़र फ़्लो JSON फ़ाइलों को फिर से चलाने के लिए, TestCafe का इस्तेमाल किया जा सकता है. साथ ही, इन रिकॉर्डिंग की टेस्ट रिपोर्ट जनरेट की जा सकती हैं.
• Sauce Labs की मदद से फिर से चलाएं. saucectl का इस्तेमाल करके, Sauce Labs पर JSON फ़ाइलों को फिर से चलाया जा सकता है.

यूज़र फ़्लो डीबग करना

किसी भी कोड की तरह, कभी-कभी आपको रिकॉर्ड किए गए उपयोगकर्ता फ़्लो को डीबग करना पड़ता है.

डीबग करने में आपकी मदद करने के लिए, Recorder पैनल की मदद से रीप्ले को धीमा किया जा सकता है, ब्रेकपॉइंट सेट किया जा सकता है, एक्ज़ीक्यूशन को आगे बढ़ाया जा सकता है, और चरणों के साथ-साथ अलग-अलग फ़ॉर्मैट में कोड की जांच की जा सकती है.

रीप्ले की स्पीड कम करना

डिफ़ॉल्ट रूप से, Recorder यूज़र फ़्लो को उतनी ही तेज़ी से फिर से चलाता है जितनी तेज़ी से हो सकता है. रिकॉर्डिंग में क्या होता है, यह समझने के लिए वीडियो को फिर से चलाने की स्पीड कम की जा सकती है:

1. फिर से चलाएं ड्रॉप-डाउन मेन्यू खोलें.
2. वीडियो को फिर से चलाने की रफ़्तार का कोई विकल्प चुनें:
   • सामान्य (डिफ़ॉल्ट)
   • धीमा
   • बहुत धीमा
   • बहुत धीमा

कोड की जांच करना

अलग-अलग फ़ॉर्मैट में यूज़र फ़्लो के कोड की जांच करने के लिए:

1. Recorder पैनल में जाकर, कोई रिकॉर्डिंग खोलें.
2. चरणों की सूची के सबसे ऊपर दाएं कोने में, कोड दिखाएं पर क्लिक करें.
3. रिकॉर्डर, चरणों और उनके कोड को एक साथ दिखाता है.
4. किसी स्टेप पर कर्सर घुमाने पर, Recorder किसी भी फ़ॉर्मैट में अपने कोड को हाइलाइट करता है. इसमें एक्सटेंशन से मिलने वाले कोड भी शामिल हैं.

5. फ़ॉर्मैट वाली ड्रॉप-डाउन सूची को बड़ा करके, यूज़र फ़्लो एक्सपोर्ट करने के लिए इस्तेमाल किया जाने वाला फ़ॉर्मैट चुनें.

   

   यह तीन डिफ़ॉल्ट फ़ॉर्मैट (JSON, @puppeteer/replay, Puppeteer स्क्रिप्ट) में से कोई एक हो सकता है. इसके अलावा, यह एक्सटेंशन से मिलने वाला फ़ॉर्मैट भी हो सकता है.

6. चरण के पैरामीटर और वैल्यू में बदलाव करके, अपनी रिकॉर्डिंग को डीबग करें. कोड व्यू में बदलाव नहीं किया जा सकता. हालांकि, बाईं ओर दिए गए चरणों में बदलाव करने पर, यह अपडेट हो जाता है.

ब्रेकपॉइंट सेट करें और सिलसिलेवार तरीके से एक्ज़ीक्यूट करें

ब्रेकपॉइंट सेट करने और सिलसिलेवार तरीके से लागू करने के लिए:

1. रिकॉर्डिंग में किसी भी चरण के आगे बने सर्कल पर कर्सर घुमाएं. सर्कल एक ब्रेकपॉइंट आइकॉन में बदल जाता है.
2. ब्रेकपॉइंट आइकॉन पर क्लिक करें और रिकॉर्डिंग फिर से चलाएं. ब्रेकपॉइंट पर, प्रोग्राम का एक्ज़ीक्यूशन रुक जाता है.
3. रिकॉर्डर की गई कार्रवाई को सिलसिलेवार तरीके से चलाने के लिए, रिकॉर्डर पैनल में सबसे ऊपर मौजूद ऐक्शन बार में, एक चरण को चलाएं बटन पर क्लिक करें.
4. रीप्ले बंद करने के लिए, रीप्ले बंद करें पर क्लिक करें.

चरणों में बदलाव करना

रिकॉर्डिंग के दौरान और उसके बाद, किसी भी चरण के बगल में मौजूद बटन पर क्लिक करके, किसी भी चरण में बदलाव किया जा सकता है.

इसमें, गतिविधि के उन चरणों को जोड़ा भी जा सकता है जो रिकॉर्ड नहीं हुए हैं. साथ ही, गलती से रिकॉर्ड हुए चरणों को हटाया भी जा सकता है.

चरण जोड़ना

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

मैन्युअल तरीके से चरण जोड़ने के लिए:

1. यह डेमो पेज खोलें और नई रिकॉर्डिंग शुरू करें.
2. व्यूपोर्ट में मौजूद एलिमेंट पर कर्सर घुमाएं. आपको एक ऐक्शन मेन्यू पॉप-अप होगा. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
3. मेन्यू से कोई कार्रवाई चुनें और रिकॉर्डिंग खत्म करें. रिकॉर्डर सिर्फ़ क्लिक इवेंट कैप्चर करता है.
4. रिकॉर्डिंग को फिर से चलाने की कोशिश करने के लिए, फिर से चलाएं पर क्लिक करें. टाइम आउट होने के बाद, रीप्ले नहीं किया जा सकता. इसकी वजह यह है कि रिकॉर्डर, मेन्यू में मौजूद एलिमेंट को ऐक्सेस नहीं कर सकता.
5. क्लिक करें चरण के आगे मौजूद, तीन बिंदु वाले बटन पर क्लिक करें. इसके बाद, इससे पहले चरण जोड़ें को चुनें.
6. नए चरण को बड़ा करें. डिफ़ॉल्ट रूप से, यह waitForElement टाइप की होती है. type के बगल में मौजूद वैल्यू पर क्लिक करें और hover चुनें.
7. इसके बाद, नए चरण के लिए सही सिलेक्टर सेट करें. चुनें पर क्लिक करें. इसके बाद, Hover over me! एलिमेंट में पॉप-अप मेन्यू से बाहर की किसी जगह पर क्लिक करें. सिलेक्टर को #clickable पर सेट किया गया है.
8. रिकॉर्डिंग को फिर से चलाकर देखें. जोड़े गए कर्सर घुमाने के चरण की मदद से, रिकॉर्डर फ़्लो को फिर से चलाता है.

दावे जोड़ें

रिकॉर्ड करते समय, आपके पास एचटीएमएल एट्रिब्यूट और JavaScript प्रॉपर्टी जैसी सुविधाओं का इस्तेमाल करने का विकल्प होता है. दावा जोड़ने के लिए:

1. उदाहरण के लिए, इस डेमो पेज पर रिकॉर्डिंग शुरू करें.

2. दावा जोड़ें पर क्लिक करें.

   

   रिकॉर्डर, कॉन्फ़िगर किया जा सकने वाला waitForElement चरण बनाता है.

3. इस चरण के लिए सिलेक्टर तय करें.

4. चरण को कॉन्फ़िगर करें, लेकिन इसका waitForElement टाइप न बदलें. उदाहरण के लिए, इनके बारे में जानकारी दी जा सकती है:

   • एचटीएमएल एट्रिब्यूट. एट्रिब्यूट जोड़ें पर क्लिक करें. इसके बाद, एट्रिब्यूट का नाम और वह वैल्यू लिखें जिसे इस पेज पर मौजूद एलिमेंट इस्तेमाल करते हैं. उदाहरण के लिए, data-test: <value>.
   • JavaScript प्रॉपर्टी. प्रॉपर्टी जोड़ें पर क्लिक करें. इसके बाद, प्रॉपर्टी का नाम और वैल्यू, JSON फ़ॉर्मैट में टाइप करें. उदाहरण के लिए, {".innerText":"<text>"}.
   • चरण से जुड़ी अन्य प्रॉपर्टी. उदाहरण के लिए, visible: true.

5. बाकी के यूज़र फ़्लो को रिकॉर्ड करें. इसके बाद, रिकॉर्डिंग बंद करें.

6. फिर से चलाएं पर क्लिक करें. अगर कोई दावा फ़ेल हो जाता है, तो समय खत्म होने के बाद Recorder गड़बड़ी दिखाता है.

इस वर्कफ़्लो को कैसे इस्तेमाल किया जाता है, यह देखने के लिए यह वीडियो देखें.

चरणों को कॉपी करना

पूरे यूज़र फ़्लो को एक्सपोर्ट करने के बजाय, क्लिपबोर्ड पर सिर्फ़ एक चरण कॉपी किया जा सकता है:

1. जिस चरण को कॉपी करना है उस पर राइट क्लिक करें या उसके बगल में मौजूद के तीन बिंदु वाले आइकॉन पर क्लिक करें.
2. ड्रॉप-डाउन मेन्यू में, इस रूप में कॉपी करें ... विकल्पों में से कोई एक चुनें.

चरणों को अलग-अलग फ़ॉर्मैट में कॉपी किया जा सकता है: JSON, Puppeteer, @puppeteer/replay, और एक्सटेंशन से मिले फ़ॉर्मैट.

चरणों को हटाना

गलती से रिकॉर्ड किए गए चरण को हटाने के लिए, उस चरण पर दायां क्लिक करें या उसके बगल में मौजूद तीन बिंदु वाले आइकॉन पर क्लिक करें. इसके बाद, चरण हटाएं को चुनें.

इसके अलावा, Recorder हर रिकॉर्डिंग की शुरुआत में दो अलग-अलग चरण अपने-आप जोड़ता है:

• व्यूपोर्ट सेट करें. इसकी मदद से, व्यूपोर्ट के डाइमेंशन, स्केलिंग, और अन्य प्रॉपर्टी को कंट्रोल किया जा सकता है.
• नेविगेट करें. यूआरएल सेट करता है और हर रीप्ले के लिए पेज को अपने-आप रीफ़्रेश करता है.

पेज को फिर से लोड किए बिना इन-पेज ऑटोमेशन करने के लिए, ऊपर बताए गए नेविगेशन चरण को हटाएं.

चरणों को कॉन्फ़िगर करें

किसी चरण को कॉन्फ़िगर करने के लिए:

1. इसका टाइप बताएं: click, doubleClick, hover, (इनपुट) change, keyUp, keyDown, scroll, close, navigate (पेज पर), waitForElement, waitForExpression या setViewport.

   अन्य प्रॉपर्टी, type वैल्यू के हिसाब से तय होती हैं.

2. type के नीचे ज़रूरी प्रॉपर्टी बताएं.

   

3. डेटा से जुड़े बटनों पर क्लिक करके, टाइप से जुड़ी वैकल्पिक प्रॉपर्टी जोड़ें और उन्हें बताएं.

उपलब्ध प्रॉपर्टी की सूची के लिए, चरण प्रॉपर्टी देखें.

किसी वैकल्पिक प्रॉपर्टी को हटाने के लिए, उसके बगल में मौजूद हटाएं बटन पर क्लिक करें.

किसी प्रॉपर्टी में एलिमेंट जोड़ने या हटाने के लिए, एलिमेंट के बगल में मौजूद + या - बटन पर क्लिक करें.

चरण की प्रॉपर्टी

हर चरण में ये वैकल्पिक प्रॉपर्टी हो सकती हैं:

• target—Chrome DevTools प्रोटोकॉल (सीडीपी) टारगेट के लिए एक यूआरएल. यह डिफ़ॉल्ट main कीवर्ड है, जो मौजूदा पेज को दिखाता है.
• assertedEvents, जो फ़िलहाल सिर्फ़ एक navigation इवेंट हो सकता है

ज़्यादातर चरणों के लिए उपलब्ध अन्य सामान्य प्रॉपर्टी ये हैं:

• frame—शून्य पर आधारित इंडेक्स का एक कलेक्शन, जो नेस्ट किए जा सकने वाले iframe की पहचान करता है. उदाहरण के लिए, मुख्य टारगेट के दूसरे (1) iframe के अंदर पहले (0) iframe की पहचान [1, 0] के तौर पर की जा सकती है.
• timeout—किसी चरण को लागू करने से पहले इंतज़ार करने के लिए मिलीसेकंड की संख्या. ज़्यादा जानकारी के लिए, चरणों के लिए टाइम आउट में बदलाव करना लेख पढ़ें.
• selectors—सिलेक्टर का एक कलेक्शन. ज़्यादा जानकारी के लिए, सिलेक्टर के बारे में जानकारी लेख पढ़ें.

टाइप के हिसाब से प्रॉपर्टी ये हैं:

टाइप	प्रॉपर्टी	ज़रूरी है	ब्यौरा
click doubleClick	offsetX offsetY		एलिमेंट के कॉन्टेंट बॉक्स के सबसे ऊपर बाईं ओर से, पिक्सल में
click doubleClick	button		पॉइंटर बटन: प्राइमरी | सहायक | दूसरा | पीछे | आगे
change	value		फ़ाइनल वैल्यू
keyDown keyUp	key		कुंजी का नाम
scroll	x y		पिक्सल में स्क्रोल की एक्स और वाई पोज़िशन, डिफ़ॉल्ट रूप से 0
navigate	url		लक्ष्य URL
waitForElement	operator		>= | == (डिफ़ॉल्ट) | <=
waitForElement	count		सिलेक्टर की ओर से पहचाने गए एलिमेंट की संख्या
waitForElement	attributes		एचटीएमएल एट्रिब्यूट और उसकी वैल्यू
waitForElement	properties		JavaScript प्रॉपर्टी और JSON में इसकी वैल्यू
waitForElement	visible		बूलियन. अगर एलिमेंट DOM में मौजूद है और दिख रहा है (display: none या visibility: hidden नहीं है), तो यह वैल्यू 'सही' होगी
waitForElement waitForExpression	asserted events		फ़िलहाल, सिर्फ़ type: navigation, लेकिन टाइटल और यूआरएल की जानकारी दी जा सकती है
waitForElement waitForExpression	timeout		इंतज़ार करने का ज़्यादा से ज़्यादा समय (मिलीसेकंड में)
waitForExpression	expression		सही पर काम करने वाला JavaScript एक्सप्रेशन
setViewport	width height		पिक्सल में व्यूपोर्ट की चौड़ाई और ऊंचाई
setViewport	deviceScaleFactor		डिवाइस पिक्सल रेशियो (डीपीआर) की तरह ही, डिफ़ॉल्ट रूप से 1
setViewport	isMobile hasTouch isLandscape		बूलियन फ़्लैग, जो बताते हैं कि: मेटा टैग को ध्यान में रखें सहायता के टच इवेंट लैंडस्केप मोड में दिखाएं

रीप्ले को रोकने वाली दो प्रॉपर्टी हैं:

• waitForElement प्रॉपर्टी, सिलेक्टर के ज़रिए पहचाने गए कई एलिमेंट के होने या न होने का इंतज़ार करती है. उदाहरण के लिए, यहां दिया गया चरण, पेज पर सिलेक्टर .my-class से मैच करने वाले तीन से कम एलिमेंट होने का इंतज़ार करता है.

    "type": "waitForElement",
    "selectors": [".my-class"],
    "operator": "<=",
    "count": 2,
  

• किसी JavaScript एक्सप्रेशन के सही होने पर, waitForExpression प्रॉपर्टी इंतज़ार का इंतज़ार करती है. उदाहरण के लिए, यह चरण दो सेकंड के लिए रुकता है और फिर 'सही' पर सेट हो जाता है, ताकि रीप्ले जारी रखा जा सके.

    "type": "waitForExpression",
    "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
  

चरणों के लिए टाइम आउट एडजस्ट करें

अगर आपके पेज पर नेटवर्क अनुरोध धीमे हैं या ऐनिमेशन लंबे हैं, तो 5000 मिलीसेकंड के डिफ़ॉल्ट टाइम आउट से ज़्यादा समय लेने वाले चरणों पर, रीप्ले काम नहीं कर सकता.

इस समस्या से बचने के लिए, हर चरण के लिए एक साथ डिफ़ॉल्ट टाइम आउट सेट किया जा सकता है. इसके अलावा, अलग-अलग चरणों के लिए, अलग-अलग टाइम आउट सेट किए जा सकते हैं. कुछ चरणों के लिए तय किए गए टाइम आउट, डिफ़ॉल्ट टाइम आउट की जगह लागू हो जाते हैं.

हर चरण के लिए, डिफ़ॉल्ट टाइम आउट को एक साथ अडजस्ट करने के लिए:

1. टाइम आउट बॉक्स में बदलाव करने के लिए, रीप्ले की सेटिंग पर क्लिक करें.

   

2. टाइम आउट बॉक्स में, टाइम आउट की वैल्यू को मिलीसेकंड में सेट करें.

3. बदले गए डिफ़ॉल्ट टाइम आउट को काम करते हुए देखने के लिए, फिर से चलाएं पर क्लिक करें.

किसी चरण के लिए, डिफ़ॉल्ट टाइम आउट को बदलने के लिए:

1. चरण को बड़ा करें और टाइम आउट जोड़ें पर क्लिक करें.

   

2. timeout: <value> पर क्लिक करें और वैल्यू को मिलीसेकंड में सेट करें.

   

3. टाइम आउट की सुविधा के साथ चरण देखने के लिए, फिर से चलाएं पर क्लिक करें.

किसी चरण पर टाइम आउट ओवरराइट हटाने के लिए, उसके बगल में मौजूद मिटाएं बटन पर क्लिक करें.

सिलेक्टर के बारे में जानकारी

नई रिकॉर्डिंग शुरू करते समय, ये कॉन्फ़िगर किए जा सकते हैं:

• चुनने वाला एट्रिब्यूट टेक्स्टबॉक्स में, कोई कस्टम टेस्ट एट्रिब्यूट डालें. Recorder इस एट्रिब्यूट का इस्तेमाल, सामान्य टेस्ट एट्रिब्यूट की सूची के बजाय सिलेक्टर का पता लगाने के लिए करेगा.

• चेकबॉक्स के रिकॉर्ड करने के लिए सिलेक्टर के टाइप सेट में, चुनें कि किस तरह के सिलेक्टर का अपने-आप पता लगाना है:

  • सीएसएस. सिंटैक्टिक सिलेक्टर.
  • ARIA. सिमेंटिक सिलेक्टर.
  • टेक्स्ट. अगर उपलब्ध हों, तो सबसे छोटे यूनीक टेक्स्ट वाले सिलेक्टर.
  • XPath. एक्सएमएल पाथ लैंग्वेज का इस्तेमाल करने वाले सिलेक्टर.
  • Pierce. सीएसएस जैसे मिलते-जुलते सिलेक्टर, लेकिन वे शैडो DOM को पियर कर सकते हैं.

सामान्य टेस्ट सिलेक्टर

आसान वेबपेजों के लिए, id एट्रिब्यूट और सीएसएस class एट्रिब्यूट काफ़ी होते हैं, ताकि रिकॉर्डर सिलेक्टर का पता लगा सके. हालांकि, ऐसा हमेशा नहीं होता, क्योंकि:

• आपके वेबपेज ऐसे डाइनैमिक क्लास या आईडी का इस्तेमाल कर सकते हैं जो बदलते हैं.
• कोड या फ़्रेमवर्क में बदलाव होने की वजह से, आपके सिलेक्टर काम नहीं कर सकते.

उदाहरण के लिए, सीएसएस class वैल्यू, आधुनिक JavaScript फ़्रेमवर्क (जैसे, React, Angular, Vue) और सीएसएस फ़्रेमवर्क के साथ डेवलप किए गए ऐप्लिकेशन के लिए अपने-आप जनरेट हो सकती हैं.

ऐसे मामलों में, ज़्यादा बेहतर टेस्ट बनाने के लिए data-* एट्रिब्यूट का इस्तेमाल किया जा सकता है. डेवलपर, ऑटोमेशन के लिए, पहले से ही कुछ सामान्य data-* सिलेक्टर का इस्तेमाल करते हैं. Recorder भी इनका इस्तेमाल करता है.

अगर आपकी वेबसाइट पर, नीचे दिए गए सामान्य टेस्ट सिलेक्टर तय किए गए हैं, तो रिकॉर्डर उन्हें अपने-आप पहचानता है और उनका इस्तेमाल पहले करता है:

• data-testid
• data-test
• data-qa
• data-cy
• data-test-id
• data-qa-id
• data-testing

उदाहरण के लिए, "कैपुचिनो" की जांच करें इस डेमो पेज पर एलिमेंट को जोड़ा जा सकता है और टेस्ट एट्रिब्यूट देखे जा सकते हैं:

"कैपुचीनो" पर क्लिक रिकॉर्ड करें, रिकॉर्डिंग में उस चरण को बड़ा करें, और पहचाने गए सिलेक्टर की जांच करें:

रिकॉर्डिंग के सिलेक्टर को पसंद के मुताबिक बनाना

अगर सामान्य टेस्ट सिलेक्टर आपके काम नहीं कर रहे हैं, तो रिकॉर्डिंग चुनने वाले टूल को अपनी पसंद के मुताबिक बनाया जा सकता है.

उदाहरण के लिए, यह डेमो पेज, सिलेक्टर के तौर पर data-automate एट्रिब्यूट का इस्तेमाल करता है. नई रिकॉर्डिंग शुरू करें और चुनने वाले टूल के तौर पर data-automate डालें.

कोई ईमेल पता डालें और सिलेक्टर वैल्यू ([data-automate=email-address]) देखें.

सिलेक्टर की प्राथमिकता

आपने कस्टम सीएसएस सिलेक्टर एट्रिब्यूट तय किया है या नहीं, इसके आधार पर रिकॉर्डर इस क्रम में सिलेक्टर को खोजता है:

• अगर यह जानकारी दी गई है, तो:
  1. आपके कस्टम सीएसएस एट्रिब्यूट के साथ सीएसएस सिलेक्टर.
  2. XPath सिलेक्टर.
  3. अगर ARIA सिलेक्टर है, तो.
  4. अगर सबसे छोटा यूनीक टेक्स्ट मिलता है, तो उसका सिलेक्टर.
• अगर कोई वैल्यू नहीं दी गई है, तो:
  1. अगर ARIA सिलेक्टर मिलता है, तो उसे शामिल करें.
  2. नीचे दी गई प्राथमिकता वाले सीएसएस सिलेक्टर:
     1. टेस्टिंग के लिए इस्तेमाल किए जाने वाले सबसे सामान्य एट्रिब्यूट:
        • data-testid
        • data-test
        • data-qa
        • data-cy
        • data-test-id
        • data-qa-id
        • data-testing
     2. आईडी एट्रिब्यूट, जैसे कि <div id="some_ID">.
     3. सामान्य सीएसएस सिलेक्टर.
  3. X फ़ाइल को चुनने वाले टूल.
  4. पियर्स सिलेक्टर.
  5. अगर कोई यूनीक टेक्स्ट मिलता है, तो सबसे छोटा यूनीक टेक्स्ट वाला सिलेक्टर.

यहां एक से ज़्यादा सामान्य सीएसएस, एसएएमएल, और पियर्स सिलेक्टर हो सकते हैं. Recorder ये कैप्चर करता है:

• हर रूट लेवल पर सामान्य सीएसएस और OAuth सिलेक्टर, यानी अगर नेस्ट किए गए शैडो होस्ट हों, तो वे भी चुने जा सकते हैं.
• ऐसे पियर्स सिलेक्टर जो सभी शैडो रूट में मौजूद सभी एलिमेंट में यूनीक हों.