नीचे दिए गए वीडियो के साथ नए Recorder पैनल (झलक देखने की सुविधा) पर एक नज़र डालें.
रिकॉर्डर पैनल का इस्तेमाल करके यूज़र फ़्लो को रिकॉर्ड करने, उसे फिर से चलाने, और मेज़र करने का तरीका जानने के लिए, इस ट्यूटोरियल को पूरा करें.
रिकॉर्ड किए गए यूज़र फ़्लो को शेयर करने, उनमें बदलाव करने और उनके चरणों में बदलाव करने के बारे में ज़्यादा जानकारी के लिए, Recorder की सुविधाओं का रेफ़रंस देखें.
रिकॉर्डर पैनल खोलें
- DevTools खोलें.
ज़्यादा विकल्प
> ज़्यादा टूल > रिकॉर्डर पर क्लिक करें.
इसके अलावा, Recorder पैनल खोलने के लिए, कमांड मेन्यू का इस्तेमाल करें.
शुरुआती जानकारी
हम कॉफ़ी ऑर्डर करने की सुविधा के इस डेमो पेज का इस्तेमाल करेंगे. चेकआउट, शॉपिंग की वेबसाइटों पर एक सामान्य यूज़र फ़्लो है.
अगले सेक्शन में, हम आपको Recorder पैनल की मदद से, चेकआउट प्रोसेस को रिकॉर्ड करने, फिर से चलाने, और ऑडिट करने का तरीका बताएंगे:
- कार्ट में कॉफ़ी जोड़ें.
- कार्ट में एक और कॉफ़ी डालें.
- कार्ट पेज पर जाएं.
- कार्ट से एक कॉफ़ी हटाएं.
- चेकआउट की प्रोसेस शुरू करें.
- पेमेंट के तरीके की जानकारी भरें.
- चेक आउट करें.
यूज़र फ़्लो रिकॉर्ड करें
- यह डेमो पेज खोलें. शुरू करने के लिए, नई रिकॉर्डिंग शुरू करें बटन पर क्लिक करें.
- रिकॉर्डिंग का नाम टेक्स्टबॉक्स में "कॉफ़ी चेकआउट" डालें.
- नई रिकॉर्डिंग शुरू करें बटन पर क्लिक करें. रिकॉर्डिंग शुरू हो गई है. पैनल रिकॉर्डिंग... दिखा रहा है, जिससे पता चलता है कि रिकॉर्डिंग चल रही है.
- उसे कार्ट में जोड़ने के लिए, कैपुचिनो पर क्लिक करें.
- Americano को कार्ट में जोड़ने के लिए उस पर क्लिक करें. ध्यान दें कि Recorder में अब तक किए गए सभी स्टेप दिखाए जाते हैं.
- कार्ट पेज पर जाएं और कार्ट से Americano को हटा दें.
- चेकआउट की प्रोसेस शुरू करने के लिए, कुल रकम: 19.00 डॉलर बटन पर क्लिक करें.
- पेमेंट की जानकारी वाले फ़ॉर्म में, नाम और ईमेल टेक्स्ट बॉक्स भरें.इसके बाद, मुझे ऑर्डर के अपडेट और प्रमोशन वाले मैसेज चाहिए चेकबॉक्स पर सही का निशान लगाएं.
- चेकआउट की प्रोसेस पूरी करने के लिए, सबमिट करें बटन पर क्लिक करें.
- Recorder पैनल में, रिकॉर्डिंग बंद करने के लिए
रिकॉर्डिंग बंद करें बटन पर क्लिक करें.
यूज़र फ़्लो को फिर से चलाना
यूज़र फ़्लो रिकॉर्ड करने के बाद, 
फिर से चलाएं बटन पर क्लिक करके, उसे फिर से चलाया जा सकता है.
पेज पर यूज़र फ़्लो को फिर से चलाने की सुविधा देखी जा सकती है. वीडियो को फिर से चलाने की प्रोग्रेस, रिकॉर्डर पैनल में भी दिखती है.
अगर रिकॉर्डिंग के दौरान कोई मिस क्लिक होता है या कोई समस्या होती है, तो आपके पास अपने यूज़र फ़्लो को डीबग करने का विकल्प होता है: रीप्ले को धीमा करने, ब्रेकपॉइंट सेट करने, और इसे सिलसिलेवार तरीके से लागू करने का विकल्प.
धीमे नेटवर्क को सिम्युलेट करें
फिर से चलाएं सेटिंग कॉन्फ़िगर करके, धीमे इंटरनेट कनेक्शन को सिम्युलेट किया जा सकता है. उदाहरण के लिए, फिर से चलाने की सेटिंग को बड़ा करें और नेटवर्क ड्रॉप-डाउन में धीमा 3G चुनें.
आने वाले समय में, अन्य सेटिंग को भी इस्तेमाल किया जा सकता है. वीडियो को फिर से चलाने की जो सेटिंग आपको चाहिए हमारे साथ उन्हें शेयर करें!
यूज़र फ़्लो को मेज़र करना
परफ़ॉर्मेंस को मेज़र करें बटन पर क्लिक करके, यूज़र फ़्लो की परफ़ॉर्मेंस को मेज़र किया जा सकता है. उदाहरण के लिए, किसी शॉपिंग वेबसाइट पर चेकआउट की प्रोसेस, एक अहम यूज़र फ़्लो है. Recorder पैनल की मदद से, चेकआउट फ़्लो को एक बार रिकॉर्ड किया जा सकता है और उसे नियमित तौर पर मेज़र किया जा सकता है.
परफ़ॉर्मेंस को मेज़र करें बटन पर क्लिक करने से, सबसे पहले यूज़र फ़्लो ट्रिगर होगा. इसके बाद, परफ़ॉर्मेंस पैनल में परफ़ॉर्मेंस ट्रेस खुलेगा.
परफ़ॉर्मेंस पैनल की मदद से, अपने पेज की रनटाइम की परफ़ॉर्मेंस का विश्लेषण करने का तरीका जानें. परफ़ॉर्मेंस पैनल में, वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी वाले चेकबॉक्स को चालू करके, वेब की परफ़ॉर्मेंस से जुड़ी अहम जानकारी वाली मेट्रिक देखी जा सकती हैं. इससे, उपयोगकर्ता के ब्राउज़िंग अनुभव को बेहतर बनाने के अवसरों की पहचान की जा सकती है.
कदमों में बदलाव करें
आइए, रिकॉर्ड किए गए वर्कफ़्लो में चरणों में बदलाव करने के बुनियादी विकल्पों के बारे में जानते हैं.
बदलाव करने के विकल्पों की पूरी सूची देखने के लिए, सुविधाओं के रेफ़रंस में जाकर चरण में बदलाव करें देखें.
चरणों को बड़ा करें
कार्रवाई की जानकारी देखने के लिए, हर चरण को बड़ा करें. उदाहरण के लिए, क्लिक एलिमेंट "कैपुचिनो" चरण को बड़ा करें.
ऊपर दिया गया चरण दो चुनने वालों को दिखाता है. ज़्यादा जानकारी के लिए, रिकॉर्डिंग के सिलेक्टर को समझना लेख पढ़ें.
यूज़र फ़्लो को फिर से चलाते समय, Recorder किसी सिलेक्टर की मदद से, क्रम के हिसाब से एलिमेंट पर क्वेरी करने की कोशिश करता है. उदाहरण के लिए, अगर Recorder पहले सिलेक्टर वाले एलिमेंट पर सही तरीके से क्वेरी करता है, तो यह दूसरे सिलेक्टर को छोड़कर अगले चरण पर जाएगा.
किसी चरण में सिलेक्टर जोड़ें और हटाएं
किसी भी सिलेक्टर को जोड़ा या हटाया जा सकता है. उदाहरण के लिए, सिलेक्टर #2 को हटाया जा सकता है, क्योंकि इस मामले में सिर्फ़ aria/Cappuccino काफ़ी है. सिलेक्टर #2 पर कर्सर घुमाएं और इसे हटाने के लिए, - पर क्लिक करें.
किसी चरण में सिलेक्टर में बदलाव करें
सिलेक्टर में भी बदलाव किया जा सकता है. उदाहरण के लिए, अगर आपको Cappuccino के बजाय मोका चुनना है, तो:
इसके बजाय, सिलेक्टर वैल्यू को aria/Mocha में बदलें.
इसके अलावा, चुनें
बटन पर क्लिक करने के बाद, पेज पर मोका पर भी क्लिक किया जा सकता है.फ़्लो को अभी फिर से चलाएं. इसे कैपुचिनो के बजाय, मोका को चुनना चाहिए.
चरण की अन्य प्रॉपर्टी, जैसे कि type, target, value वगैरह में बदलाव करने की कोशिश करें.
चरण जोड़ें और हटाएं
चरणों को जोड़ने और हटाने के विकल्प भी हैं. यह तरीका तब काम आता है, जब आपको एक और चरण जोड़ना हो या गलती से जोड़े गए किसी चरण को हटाना हो. यूज़र फ़्लो को फिर से रिकॉर्ड करने के बजाय, इसमें बदलाव करें:
जिस चरण में बदलाव करना है उस पर राइट क्लिक करें या उसके बगल में मौजूद
के तीन बिंदु वाले आइकॉन पर क्लिक करें. 
इस चरण को हटाने के लिए, चरण हटाएं को चुनें. उदाहरण के लिए, मोका चरण के बाद स्क्रोल इवेंट होना ज़रूरी नहीं है.
मान लें कि आपको कोई भी चरण पूरा करने से पहले, पेज पर नौ कॉफ़ी के दिखने का इंतज़ार करना है. मोका स्टेप मेन्यू में, पहले चरण जोड़ें चुनें.
Assert Element में, नीचे दी गई जानकारी के साथ नए चरण में बदलाव करें:
- टाइप: waitForElement
- सिलेक्टर #1: .cup
- ऑपरेटर: == (ऑपरेटर जोड़ें बटन पर क्लिक करें)
- संख्या: 9 (संख्या जोड़ें बटन पर क्लिक करें)
बदलाव देखने के लिए, फ़्लो को अभी फिर से चलाएं.
अगले चरण
बधाई हो, आपने ट्यूटोरियल पूरा कर लिया है!
Recorder से जुड़ी ज़्यादा सुविधाओं और वर्कफ़्लो (उदाहरण के लिए, इंपोर्ट और एक्सपोर्ट) के बारे में जानने के लिए, Recorder की सुविधाओं का रेफ़रंस देखें.