নীচের ভিডিও সহ নতুন রেকর্ডার প্যানেল (প্রিভিউ বৈশিষ্ট্য) এ এক নজরে দেখুন।
রেকর্ডার প্যানেলটি কীভাবে রেকর্ড, রিপ্লে এবং ব্যবহারকারীর প্রবাহ পরিমাপ করতে ব্যবহার করবেন তা শিখতে এই টিউটোরিয়ালটি সম্পূর্ণ করুন।
কীভাবে রেকর্ড করা ব্যবহারকারীর প্রবাহ ভাগ করতে হয়, সেগুলি এবং তাদের পদক্ষেপগুলি সম্পাদনা করতে হয় সে সম্পর্কে আরও তথ্যের জন্য, রেকর্ডার বৈশিষ্ট্যের রেফারেন্স দেখুন।
রেকর্ডার প্যানেল খুলুন
- DevTools খুলুন ।
আরও বিকল্পে ক্লিক করুন
> আরো টুল > রেকর্ডার । 
বিকল্পভাবে, রেকর্ডার প্যানেল খুলতে কমান্ড মেনু ব্যবহার করুন।
ভূমিকা
আমরা এই কফি অর্ডার ডেমো পৃষ্ঠা ব্যবহার করা হবে. কেনাকাটা ওয়েবসাইটগুলির মধ্যে চেকআউট একটি সাধারণ ব্যবহারকারী প্রবাহ।
পরবর্তী বিভাগগুলিতে, আমরা আপনাকে রেকর্ডার প্যানেলের সাথে নিম্নলিখিত চেকআউট প্রবাহটি কীভাবে রেকর্ড, রিপ্লে এবং অডিট করতে হয় তা নিয়ে আলোচনা করব:
- কার্টে একটি কফি যোগ করুন।
- কার্টে আরেকটি কফি যোগ করুন।
- কার্ট পৃষ্ঠায় যান।
- কার্ট থেকে একটি কফি সরান।
- চেকআউট প্রক্রিয়া শুরু করুন.
- পেমেন্টের বিবরণ পূরণ করুন।
- চেক আউট.
একটি ব্যবহারকারী প্রবাহ রেকর্ড
- এই ডেমো পৃষ্ঠা খুলুন. শুরু করতে নতুন রেকর্ডিং শুরু করুন বোতামে ক্লিক করুন।
- রেকর্ডিং নামের টেক্সটবক্সে "কফি চেকআউট" লিখুন।
আরও তথ্যের জন্য, নির্বাচকদের বুঝুন দেখুন। 1. নতুন রেকর্ডিং শুরু করুন বোতামে ক্লিক করুন। রেকর্ডিং শুরু হয়। প্যানেল রেকর্ডিং দেখাচ্ছে... রেকর্ডিং চলছে। 
1. কার্টে যোগ করতে ক্যাপুচিনোতে ক্লিক করুন। 1. কার্টে যোগ করতে Americano- এ ক্লিক করুন। লক্ষ্য করুন যে রেকর্ডারটি আপনি এখন পর্যন্ত যে পদক্ষেপগুলি সম্পাদন করেছেন তা দেখায়। 
1. কার্ট পৃষ্ঠায় যান এবং কার্ট থেকে Americano সরান৷
যাইহোক, রেকর্ডিং শেষ করার পরে আপনাকে ম্যানুয়ালি হোভার স্টেপ যোগ করতে হবে কারণ রেকর্ডার স্বয়ংক্রিয়ভাবে হোভার ইভেন্ট ক্যাপচার করে না। 1. চেকআউট প্রক্রিয়া শুরু করতে মোট: $19.00 বোতামে ক্লিক করুন। 1. অর্থপ্রদানের বিবরণ ফর্মে, নাম এবং ইমেল টেক্সটবক্সগুলি পূরণ করুন এবং আমি অর্ডার আপডেট এবং প্রচারমূলক বার্তা পেতে চাই। চেকবক্স 
1. চেকআউট প্রক্রিয়া সম্পূর্ণ করতে জমা বোতামে ক্লিক করুন। 1. রেকর্ডার প্যানেলে, ক্লিক করুন 
রেকর্ডিং শেষ করতে রেকর্ডিং শেষ করার বোতাম।
একটি ব্যবহারকারী প্রবাহ রিপ্লে
একটি ব্যবহারকারী প্রবাহ রেকর্ড করার পরে, আপনি ক্লিক করে এটি পুনরায় প্লে করতে পারেন 
রিপ্লে বোতাম।
আপনি পৃষ্ঠায় ব্যবহারকারীর প্রবাহ রিপ্লে দেখতে পারেন। রিপ্লে অগ্রগতি রেকর্ডার প্যানেলেও দেখানো হয়েছে।
আপনি যদি রেকর্ডিংয়ের সময় একটি ভুল ক্লিক করেন বা কিছু কাজ না করে, আপনি আপনার ব্যবহারকারীর প্রবাহকে ডিবাগ করতে পারেন: এটির রিপ্লে মন্থর করুন, একটি ব্রেকপয়েন্ট সেট করুন এবং ধাপে ধাপে এটি কার্যকর করুন।
ধীর নেটওয়ার্ক অনুকরণ
আপনি রিপ্লে সেটিংস কনফিগার করে একটি ধীর নেটওয়ার্ক সংযোগ অনুকরণ করতে পারেন। উদাহরণস্বরূপ, রিপ্লে সেটিংস প্রসারিত করুন, নেটওয়ার্ক ড্রপ-ডাউনে স্লো 3G নির্বাচন করুন।
ভবিষ্যতে আরও সেটিংস সমর্থিত হতে পারে। আপনি যে রিপ্লে সেটিংস করতে চান তা আমাদের সাথে শেয়ার করুন !
ব্যবহারকারীর প্রবাহ পরিমাপ করুন
আপনি মেজার পারফরম্যান্স বোতামে ক্লিক করে ব্যবহারকারীর প্রবাহের কর্মক্ষমতা পরিমাপ করতে পারেন। উদাহরণস্বরূপ, চেকআউট হল একটি শপিং ওয়েবসাইটের একটি গুরুত্বপূর্ণ ব্যবহারকারী প্রবাহ। রেকর্ডার প্যানেলের সাহায্যে, আপনি একবার চেকআউট প্রবাহ রেকর্ড করতে পারেন এবং নিয়মিত পরিমাপ করতে পারেন।
মেজার পারফরম্যান্স বোতামে ক্লিক করলে প্রথমে ব্যবহারকারীর প্রবাহের রিপ্লে ট্রিগার হবে, তারপর পারফরম্যান্স প্যানেলে পারফরম্যান্স ট্রেস খুলবে।
পারফরম্যান্স প্যানেলের সাহায্যে আপনার পৃষ্ঠার রানটাইম কর্মক্ষমতা বিশ্লেষণ করতে শিখুন। আপনি পারফরম্যান্স প্যানেলে ওয়েব ভাইটাল চেকবক্স সক্ষম করতে পারেন, ওয়েব ভাইটালস মেট্রিক্স দেখতে, আপনার ব্যবহারকারীর ব্রাউজিং অভিজ্ঞতা উন্নত করার সুযোগগুলি সনাক্ত করতে পারেন৷
পদক্ষেপগুলি সম্পাদনা করুন
রেকর্ড করা কর্মপ্রবাহের মধ্যে পদক্ষেপগুলি সম্পাদনা করার জন্য মৌলিক বিকল্পগুলির মাধ্যমে চলুন।
সম্পাদনা বিকল্পগুলির একটি বিস্তৃত তালিকার জন্য, বৈশিষ্ট্যের রেফারেন্সে সম্পাদনা পদক্ষেপগুলি দেখুন৷
ধাপগুলি প্রসারিত করুন
কর্মের বিশদ বিবরণ দেখতে প্রতিটি ধাপ প্রসারিত করুন। উদাহরণস্বরূপ, ক্লিক উপাদান "ক্যাপুচিনো" ধাপটি প্রসারিত করুন।
উপরের ধাপে দুটি নির্বাচক দেখায়। আরও তথ্যের জন্য, রেকর্ডিংয়ের নির্বাচককে বুঝুন দেখুন।
ব্যবহারকারীর প্রবাহ রিপ্লে করার সময়, রেকর্ডার ক্রম অনুসারে নির্বাচকদের একজনের সাথে উপাদানটি জিজ্ঞাসা করার চেষ্টা করে। উদাহরণস্বরূপ, যদি রেকর্ডার সফলভাবে প্রথম নির্বাচকের সাথে উপাদানটি জিজ্ঞাসা করে, তবে এটি দ্বিতীয় নির্বাচককে এড়িয়ে যাবে এবং পরবর্তী ধাপে এগিয়ে যাবে।
একটি ধাপ থেকে নির্বাচক যোগ করুন এবং সরান
আপনি যেকোনো নির্বাচককে যোগ করতে বা সরাতে পারেন। উদাহরণস্বরূপ, আপনি নির্বাচক #2 সরাতে পারেন কারণ এই ক্ষেত্রে শুধুমাত্র aria/Cappuccino যথেষ্ট। নির্বাচক # 2 এর উপর হোভার করুন এবং এটি অপসারণ করতে - এ ক্লিক করুন।
এক ধাপে নির্বাচকদের সম্পাদনা করুন
নির্বাচকও সম্পাদনাযোগ্য। উদাহরণস্বরূপ, যদি আপনি Cappuccino এর পরিবর্তে Mocha নির্বাচন করতে চান, আপনি করতে পারেন:
পরিবর্তে aria/Mocha এ নির্বাচক মান সম্পাদনা করুন।
বিকল্পভাবে, নির্বাচন ক্লিক করুন
বোতাম এবং তারপর পৃষ্ঠায় Mocha ক্লিক করুন. এখন প্রবাহটি পুনরায় চালান , এটি ক্যাপুচিনোর পরিবর্তে মোচা নির্বাচন করা উচিত।
অন্যান্য ধাপের বৈশিষ্ট্য যেমন ধরন , লক্ষ্য , মান এবং আরও অনেক কিছু সম্পাদনা করার চেষ্টা করুন।
পদক্ষেপ যোগ করুন এবং সরান
ধাপগুলি যোগ এবং অপসারণ করার বিকল্পগুলিও রয়েছে৷ আপনি একটি অতিরিক্ত পদক্ষেপ যোগ করতে বা দুর্ঘটনাক্রমে যোগ করা পদক্ষেপ সরাতে চাইলে এটি কার্যকর। ব্যবহারকারীর প্রবাহ পুনরায় রেকর্ড করার পরিবর্তে, আপনি কেবল এটি সম্পাদনা করতে পারেন:
আপনি যে ধাপটি সম্পাদনা করতে চান তাতে ডান-ক্লিক করুন বা ক্লিক করুন
এর পাশে তিন-বিন্দু আইকন। 
আপনি এটি সরাতে পদক্ষেপ সরান নির্বাচন করতে পারেন। উদাহরণস্বরূপ, মোচা পদক্ষেপের পরে স্ক্রোল ইভেন্ট প্রয়োজনীয় নয়।
বলুন, আপনি কোনো পদক্ষেপ করার আগে পৃষ্ঠায় 9টি কফি প্রদর্শিত হওয়া পর্যন্ত অপেক্ষা করতে চান। মোচা স্টেপ মেনুতে, আগে ধাপ যোগ করুন নির্বাচন করুন।
Assert Element- এ, নিম্নলিখিত বিবরণ সহ নতুন ধাপটি সম্পাদনা করুন:
- প্রকার: waitForElement
- নির্বাচক # 1: .কাপ
- অপারেটর: == ( অপারেটর যোগ করুন বোতামে ক্লিক করুন)
- গণনা: 9 ( গণনা যোগ করুন বোতামে ক্লিক করুন)
পরিবর্তনগুলি দেখতে এখন প্রবাহটি পুনরায় চালান ।
পরবর্তী পদক্ষেপ
অভিনন্দন, আপনি টিউটোরিয়াল সম্পূর্ণ করেছেন!
রেকর্ডার সম্পর্কিত আরও বৈশিষ্ট্য এবং কর্মপ্রবাহ (উদাহরণস্বরূপ, আমদানি এবং রপ্তানি) অন্বেষণ করতে, রেকর্ডার বৈশিষ্ট্য উল্লেখ দেখুন।