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

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

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

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

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

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

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

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

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

रिकॉर्डर पैनल में सबसे ऊपर, ये विकल्प होते हैं:

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

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

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

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

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

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

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

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

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

यूज़र फ़्लो एक्सपोर्ट करना

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

1. वह यूज़र फ़्लो खोलें जिसे एक्सपोर्ट करना है.

2. रिकॉर्डर पैनल में सबसे ऊपर, डाउनलोड करें एक्सपोर्ट करें पर क्लिक करें.

   

3. ड्रॉप-डाउन सूची से इनमें से कोई एक फ़ॉर्मैट चुनें:

   • JSON फ़ाइल. रिकॉर्डिंग को JSON फ़ाइल के तौर पर डाउनलोड करें.
   • @puppeteer/replay. रिकॉर्डिंग को Puppeteer Replay स्क्रिप्ट के तौर पर डाउनलोड करें.
   • Puppeteer. रिकॉर्डिंग को Puppeteer स्क्रिप्ट के तौर पर डाउनलोड करें.
   • Puppeteer (Firefox के लिए). रिकॉर्डिंग को Firefox के लिए Puppeteer स्क्रिप्ट के तौर पर डाउनलोड करें.
   • Puppeteer (लाइटहाउस विश्लेषण के साथ). रिकॉर्डिंग को Puppeteer स्क्रिप्ट के तौर पर डाउनलोड करें. इसमें Lighthouse का विश्लेषण भी शामिल होगा.
   • Recorder के एक्सपोर्ट एक्सटेंशन से मिले एक या एक से ज़्यादा विकल्प.

4. फ़ाइल सेव करें.

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

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

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

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

  # npm i puppeteer lighthouse
  node your_export.js
  

  

एक्सटेंशन इंस्टॉल करके, कस्टम फ़ॉर्मैट में एक्सपोर्ट करना

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

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

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

1. Recorder पैनल के सबसे ऊपर इंपोर्ट करें बटन पर क्लिक करें.
2. रिकॉर्ड किए गए यूज़र फ़्लो के साथ JSON फ़ाइल चुनें.
3. इंपोर्ट किए गए उपयोगकर्ता फ़्लो को चलाने के लिए, फिर से चलाएं बटन पर क्लिक करें.

बाहरी लाइब्रेरी की मदद से फिर से चलाएं

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

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

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

• Cypress Chrome Recorder. इसका इस्तेमाल, उपयोगकर्ता फ़्लो की JSON फ़ाइलों को Cypress टेस्ट स्क्रिप्ट में बदलने के लिए किया जा सकता है. इसे काम करते हुए देखने के लिए, यह डेमो देखें.
• नाइटवॉच 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. Recorder में, इन चरणों और उनके कोड को साथ-साथ देखा जा सकता है.
4. किसी स्टेप पर कर्सर घुमाने पर, Recorder किसी भी फ़ॉर्मैट में अपने कोड को हाइलाइट करता है. इसमें एक्सटेंशन से मिलने वाले कोड भी शामिल हैं.

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

   

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

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

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

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

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

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

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

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

चरण जोड़ें

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

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

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

दावे जोड़ें

रिकॉर्डिंग के दौरान, एचटीएमएल एट्रिब्यूट और 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 प्रोटोकॉल (CDP) टारगेट के लिए यूआरएल. डिफ़ॉल्ट 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		JSON में JavaScript प्रॉपर्टी और उसकी वैल्यू
waitForElement	visible		बूलियन. अगर एलिमेंट DOM में मौजूद है और दिख रहा है (display: none या visibility: hidden नहीं है), तो यह वैल्यू 'सही' होगी
waitForElement waitForExpression	asserted events		फ़िलहाल, सिर्फ़ type: navigation, लेकिन टाइटल और यूआरएल की जानकारी दी जा सकती है
waitForElement waitForExpression	timeout		इंतज़ार करने का ज़्यादा से ज़्यादा समय (मिलीसेकंड में)
waitForExpression	expression		JavaScript एक्सप्रेशन, जो true पर सेट होता है
setViewport	width height		पिक्सल में व्यूपोर्ट की चौड़ाई और ऊंचाई
setViewport	deviceScaleFactor		डिवाइस पिक्सल रेशियो (डीपीआर) की तरह ही, डिफ़ॉल्ट रूप से 1
setViewport	isMobile hasTouch isLandscape		बूलियन फ़्लैग, जो यह बताते हैं कि: मेटा टैग को ध्यान में रखें सहायता के टच इवेंट लैंडस्केप मोड में दिखाएं

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

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

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

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

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

चरणों के लिए टाइम आउट में बदलाव करना

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

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

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

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

   

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

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

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

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

   

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

   

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

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

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

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

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

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

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

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

आसान वेबपेजों के लिए, 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. X फ़ाइल को चुनने वाले टूल.
  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. XPath सिलेक्टर.
  4. पियर्स सिलेक्टर.
  5. अगर सबसे छोटा यूनीक टेक्स्ट मिलता है, तो उसका सिलेक्टर.

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

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