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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

   • JSON फ़ाइल.
   • @puppeteer/replay स्क्रिप्ट.
   • [कठपुतली](/docs/puppeteer/ स्क्रिप्ट.
   • प्यूपीटर (इसमें लाइटहाउस विश्लेषण भी शामिल है).

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

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

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

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

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

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

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

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

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

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

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

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

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

  # npm i puppeteer lighthouse
  node your_export.js
  

  

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

Recorder एक्सटेंशन देखें.

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

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

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

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

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

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

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

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

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

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

अहम जानकारी: बेहतर इस्तेमाल के उदाहरण: Puppeteer Replay Library के साथ इंटिग्रेट करें ऊपर बताई गई तीसरे पक्ष की लाइब्रेरी की तरह ही, Puppeteer Replay पर भी अपनी खुद की लाइब्रेरी बनाई जा सकती है. Puppeteer Replay Library में, आपको रिकॉर्डिंग चलाने का तरीका पसंद के मुताबिक बनाने और यूज़र फ़्लो की JSON फ़ाइलों को "स्ट्रिंग" देने का विकल्प मिलता है. इसका मतलब है कि उन्हें किसी और फ़ाइल में बदला जा सकता है.

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

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

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

रीप्ले की स्पीड को कम करें

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

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

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

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

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

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. दावा जोड़ें पर क्लिक करें.

   

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

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

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

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

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

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

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

चरण कॉपी करें

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

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		पिक्सल में कुल स्क्रोल 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		डिवाइस के पिक्सल रेशियो (DPR) से मिलता-जुलता, डिफ़ॉल्ट 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. टाइम आउट की कार्रवाई वाला चरण देखने के लिए, फिर से चलाएं पर क्लिक करें.

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

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

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

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

• चेकबॉक्स के सिलेक्टर के टाइप सेट में जाकर, सिलेक्टर के टाइप चुनें, ताकि उनका अपने-आप पता लगाया जा सके:

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

ध्यान दें: ज़्यादा जानकारी के लिए, सिमेंटिक बनाम सिमैंटिक सिलेक्टर और सिलेक्टर की प्राथमिकता देखें.

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

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

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

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

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

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

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

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

"Cappuccino" पर क्लिक करें, तो रिकॉर्डिंग में संबंधित चरण को बड़ा करें, और पता लगाए गए सिलेक्टर की जांच करें:

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

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

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

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

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

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

• अगर बताया गया है, तो:
  1. सीएसएस सिलेक्टर, जिसमें अपनी पसंद के मुताबिक सीएसएस एट्रिब्यूट का इस्तेमाल किया गया हो.
  2. एक्सएमएल सिलेक्टर.
  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. एक्सएमएल सिलेक्टर.
  4. पियर्स सिलेक्टर.
  5. अगर मिलते हैं, तो सबसे छोटे यूनीक टेक्स्ट वाला सिलेक्टर.

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

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