यूज़र फ़्लो को रिकॉर्ड करना, उसे फिर से चलाना, और मेज़र करना

Jecelyn Yeen

Sofia Emelianova

नीचे दिए गए वीडियो के साथ नए Recorder पैनल (झलक देखने की सुविधा) पर एक नज़र डालें.

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

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

Recorder पैनल खोलना

1. DevTools खोलें.

2. ज़्यादा विकल्प     > ज़्यादा टूल > रिकॉर्डर पर क्लिक करें.

   

   इसके अलावा, रिकॉर्डर पैनल खोलने के लिए, कमांड मेन्यू का इस्तेमाल करें.

   

परिचय

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

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

1. कार्ट में कॉफ़ी जोड़ें.
2. कार्ट में एक और कॉफ़ी डालें.
3. कार्ट पेज पर जाएं.
4. कार्ट से एक कॉफ़ी हटाएं.
5. चेकआउट की प्रोसेस शुरू करें.
6. पेमेंट के तरीके की जानकारी भरें.
7. चेक आउट करें.

यूज़र फ़्लो रिकॉर्ड करें

1. यह डेमो पेज खोलें. शुरू करने के लिए, नई रिकॉर्डिंग शुरू करें बटन पर क्लिक करें.
2. रिकॉर्डिंग का नाम टेक्स्टबॉक्स में "कॉफ़ी चेकआउट" डालें.
3. नई रिकॉर्डिंग शुरू करें बटन पर क्लिक करें. रिकॉर्डिंग शुरू हो गई है. पैनल में रिकॉर्डिंग की जा रही है... दिख रहा है. इससे पता चलता है कि रिकॉर्डिंग की जा रही है.
4. कैपुचीनो को कार्ट में जोड़ने के लिए, उस पर क्लिक करें.
5. Americano को कार्ट में जोड़ने के लिए उस पर क्लिक करें. ध्यान दें कि Recorder में अब तक किए गए सभी स्टेप दिखाए जाते हैं.
6. कार्ट पेज पर जाएं और कार्ट से Americano को हटा दें.
7. चेकआउट की प्रोसेस शुरू करने के लिए, कुल: 190 रुपये बटन पर क्लिक करें.
8. पेमेंट की जानकारी वाले फ़ॉर्म में, नाम और ईमेल टेक्स्ट बॉक्स भरें.इसके बाद, मुझे ऑर्डर के अपडेट और प्रमोशन वाले मैसेज चाहिए चेकबॉक्स पर सही का निशान लगाएं.
9. चेकआउट की प्रोसेस पूरी करने के लिए, सबमिट करें बटन पर क्लिक करें.
10. रिकॉर्डिंग बंद करने के लिए, रिकॉर्डर पैनल में, रिकॉर्डिंग बंद करें बटन पर क्लिक करें.

यूज़र फ़्लो को फिर से चलाना

उपयोगकर्ता फ़्लो रिकॉर्ड करने के बाद, उसे फिर से चलाएं बटन पर क्लिक करके फिर से चलाया जा सकता है.

पेज पर, उपयोगकर्ता फ़्लो को फिर से चलाया जा सकता है. रीप्ले की प्रोग्रेस, रिकॉर्डर पैनल में भी दिखती है.

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

धीमे नेटवर्क को सिम्युलेट करें

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

आने वाले समय में, अन्य सेटिंग को भी इस्तेमाल किया जा सकता है. रीप्ले की ऐसी सेटिंग हमारे साथ शेयर करें जो आपको चाहिए!

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

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

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

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

कदमों में बदलाव करें

रिकॉर्ड किए गए वर्कफ़्लो में चरणों में बदलाव करने के बुनियादी विकल्पों के बारे में जानें.

बदलाव करने के विकल्पों की पूरी सूची के लिए, सुविधाओं के रेफ़रंस में सिलसिलेवार निर्देशों में बदलाव करें देखें.

चरणों को बड़ा करें

कार्रवाई की जानकारी देखने के लिए, हर चरण को बड़ा करें. उदाहरण के लिए, क्लिक एलिमेंट "कैपुचिनो" चरण को बड़ा करें.

ऊपर दिए गए चरण में दो सिलेक्टर दिखाए गए हैं. ज़्यादा जानकारी के लिए, रिकॉर्डिंग के सिलेक्टर के बारे में जानकारी लेख पढ़ें.

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

किसी चरण में सिलेक्टर जोड़ना और हटाना

किसी भी सिलेक्टर को जोड़ा या हटाया जा सकता है. उदाहरण के लिए, सिलेक्टर #2 को हटाया जा सकता है, क्योंकि इस मामले में सिर्फ़ aria/Cappuccino का इस्तेमाल करना काफ़ी है. सिलेक्टर #2 पर कर्सर घुमाएं और उसे हटाने के लिए, - पर क्लिक करें.

किसी चरण में सिलेक्टर में बदलाव करें

चुने गए आइटम में भी बदलाव किया जा सकता है. उदाहरण के लिए, अगर आपको Cappuccino के बजाय मोका चुनना है, तो:

1. इसके बजाय, सिलेक्टर की वैल्यू को aria/Mocha पर सेट करें.

   

   इसके अलावा, चुनें बटन पर क्लिक करें. इसके बाद, पेज पर मोचा पर क्लिक करें.

2. अब फ़्लो को फिर से चलाएं. इससे, कैप्पुचीनो के बजाय मोचा चुना जाना चाहिए.

3. टाइप, टारगेट, वैल्यू वगैरह जैसी अन्य चरण प्रॉपर्टी में बदलाव करें.

चरण जोड़ें और हटाएं

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

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

   

2. इसे हटाने के लिए, चरण हटाएं को चुनें. उदाहरण के लिए, Mocha चरण के बाद स्क्रोल इवेंट ज़रूरी नहीं है.

3. मान लें कि आपको कोई भी कार्रवाई करने से पहले, पेज पर नौ कॉफी दिखने का इंतज़ार करना है. मोका स्टेप मेन्यू में, पहले चरण जोड़ें चुनें.

4. Assert Element में, नए चरण में यह जानकारी जोड़ें:

   • टाइप: waitForElement
   • सिलेक्टर #1: .cup
   • ऑपरेटर: == (ऑपरेटर जोड़ें बटन पर क्लिक करें)
   • संख्या: 9 (संख्या जोड़ें बटन पर क्लिक करें)

5. बदलाव देखने के लिए, फ़्लो को अभी फिर से चलाएं.

अगले चरण

बधाई हो, आपने ट्यूटोरियल पूरा कर लिया है!

रिकॉर्डर से जुड़ी ज़्यादा सुविधाओं और वर्कफ़्लो (उदाहरण के लिए, इंपोर्ट और एक्सपोर्ट) के बारे में जानने के लिए, रिकॉर्डर की सुविधाओं का रेफ़रंस देखें.