1. معرفی
از پنل Recorder برای ضبط، پخش مجدد و اندازه گیری جریان کاربر استفاده کنید.
با ویدیوی زیر نگاهی به پنل ضبط جدید (ویژگی پیش نمایش) بیندازید.
چیزی که یاد خواهید گرفت
- یک جریان کاربر را ضبط کنید
- یک جریان کاربر را دوباره پخش کنید
- یک جریان کاربر را ویرایش کنید
- اندازه گیری جریان کاربر
آنچه شما نیاز دارید
- یک کامپیوتر در حال کار و وای فای واقعی
- کروم 101 و بالاتر.
2. پنل Recorder را باز کنید
پنل Recorder را با مراحل زیر باز کنید
- DevTools را باز کنید.
- روی گزینه های بیشتر > ابزارهای بیشتر > ضبط کننده کلیک کنید.
از طرف دیگر، از منوی فرمان برای باز کردن پانل ضبط استفاده کنید. 
3. شروع کنید
ما از این صفحه نمایشی سفارش قهوه استفاده خواهیم کرد. Checkout یک جریان کاربر رایج در بین وب سایت های خرید است.
در بخش‌های بعدی، نحوه ضبط، پخش مجدد و اندازه‌گیری جریان پرداخت زیر را با پنل Recorder به شما آموزش می‌دهیم:
- یک قهوه به سبد خرید اضافه کنید.
- یک قهوه دیگر به سبد خرید اضافه کنید.
- به صفحه سبد خرید بروید.
- یک قهوه را از سبد خرید خارج کنید.
- فرآیند پرداخت را شروع کنید.
- جزئیات پرداخت را وارد کنید
- وارسی.
4. یک جریان کاربر را ضبط کنید
- صفحه دمو را باز کنید. برای شروع روی دکمه شروع ضبط جدید کلیک کنید.
- در کادر متنی Recording name ، «coffee checkout» را وارد کنید.
- بر روی دکمه Start a new recording کلیک کنید. ضبط شروع شد. پانل ضبط را نشان می دهد ... که نشان می دهد ضبط در حال انجام است.
- برای افزودن آن به سبد خرید روی Cappuccino کلیک کنید.
- برای افزودن آن به سبد خرید روی Americano کلیک کنید. توجه داشته باشید که Recorder مراحلی را که تاکنون انجام داده اید را نشان می دهد.
- به صفحه سبد خرید بروید.
- Americano را از سبد خرید حذف کنید.
- برای شروع فرآیند پرداخت، روی دکمه Total: $19.00 کلیک کنید.
- در فرم جزئیات پرداخت، کادرهای متنی نام و ایمیل را پر کنید و گزینه I want to get updates order and messages promotion را علامت بزنید. چک باکس
- برای تکمیل فرآیند پرداخت، روی دکمه ارسال کلیک کنید.
- در پنل ضبط برای پایان ضبط روی دکمه پایان ضبط کلیک کنید.
5. یک جریان کاربر را دوباره پخش کنید
پس از ضبط یک جریان کاربر، می توانید با کلیک بر روی دکمه Replay آن را دوباره پخش کنید.
می توانید پخش مجدد جریان کاربر را در صفحه مشاهده کنید. پیشرفت پخش مجدد در پانل ضبط نیز نشان داده می شود.
با پیکربندی تنظیمات پخش مجدد، می توانید اتصال شبکه کند را شبیه سازی کنید. برای مثال، تنظیمات Replay را گسترش دهید، Slow 3G را در منوی کشویی Network انتخاب کنید. 
همچنین می‌توانید بازه زمانی طولانی‌تری را برای همه مراحل تنظیم کنید.
ممکن است در آینده تنظیمات بیشتری پشتیبانی شود. تنظیمات پخش مجددی را که دوست دارید داشته باشید با ما به اشتراک بگذارید !
6. یک جریان کاربر را اندازه گیری کنید
با کلیک بر روی دکمه اندازه گیری عملکرد می توانید عملکرد یک جریان کاربر را اندازه گیری کنید. به عنوان مثال، پرداخت یک جریان کاربر حیاتی از یک وب سایت خرید است. با پنل Recorder می توانید جریان پرداخت را یک بار ضبط کرده و مرتباً اندازه گیری کنید.
با کلیک بر روی دکمه اندازه گیری عملکرد ، ابتدا جریان کاربر مجدداً پخش می شود، سپس ردیابی عملکرد در پانل عملکرد باز می شود.
نحوه تجزیه و تحلیل عملکرد زمان اجرا صفحه خود را با پنل Performance بیاموزید. برای مشاهده معیارهای Web Vitals ، شناسایی فرصت‌ها برای بهبود تجربه مرور کاربر، می‌توانید کادر بررسی Web Vitals را در پانل عملکرد فعال کنید.
7. جریان کاربر را ویرایش کنید
بیایید گزینه‌های ویرایش جریان کاربر را مرور کنیم.
در بالای پانل ضبط ، گزینه هایی برای شما وجود دارد که می توانید:
- یک ضبط جدید اضافه کنید . برای افزودن یک ضبط جدید، روی نماد + کلیک کنید.
- مشاهده تمام موارد ضبط شده کشویی لیستی از ضبط های ذخیره شده را نشان می دهد. برای گسترش و مدیریت فهرست ضبط‌های ذخیره‌شده، گزینه [تعداد] ضبط(های) را انتخاب کنید.
- یک ضبط را صادر کنید . می توانید جریان کاربر را به عنوان اسکریپت Puppeteer صادر کنید تا اسکریپت را بیشتر سفارشی کنید.
- یک ضبط را حذف کنید . ضبط انتخاب شده را حذف کنید.
همچنین می توانید با کلیک بر روی دکمه ویرایش در کنار آن، نام ضبط را ویرایش کنید.
8. مراحل را ویرایش کنید
بیایید گزینه‌های ویرایش مراحل را در یک گردش کار مرور کنیم.
گسترش مراحل
- هر مرحله را باز کنید تا جزئیات عمل را ببینید. به عنوان مثال، مرحله کلیک عنصر "کاپوچینو" را گسترش دهید.
- مرحله بالا دو انتخابگر را نشان می دهد. برای اطلاعات بیشتر، اولویت انتخابگر را ببینید. هنگام پخش مجدد جریان کاربر، Recorder سعی می کند عنصر را با یکی از انتخابگرها به ترتیب پرس و جو کند. به عنوان مثال، اگر Recorder با موفقیت عنصر را با انتخابگر اول پرس و جو کند، انتخابگر دوم را رد می کند و به مرحله بعدی می رود.
- می توانید هر انتخابگر را اضافه یا حذف کنید. به عنوان مثال، می توانید انتخابگر شماره 2 را حذف کنید زیرا فقط
aria/Cappuccinoدر این مورد کافی است. نشانگر را روی انتخابگر شماره 2 نگه دارید و روی - کلیک کنید تا آن را حذف کنید.
- انتخابگر نیز قابل ویرایش است. به عنوان مثال، اگر می خواهید به جای کاپوچینو موکا را انتخاب کنید، می توانید مقدار انتخابگر را به aria/Mocha ویرایش کنید.
یا روی دکمه Select کلیک کنید و سپس روی Mocha در صفحه کلیک کنید. - اکنون جریان را دوباره پخش کنید، باید به جای کاپوچینو ، موکا را انتخاب کنید.
- سعی کنید سایر ویژگی های مرحله مانند نوع ، هدف ، مقدار و موارد دیگر را ویرایش کنید.
افزودن و حذف مراحل
گزینه هایی برای افزودن و حذف مراحل نیز وجود دارد. اگر می خواهید یک مرحله اضافی اضافه کنید یا یک مرحله به طور تصادفی اضافه شده را حذف کنید، این کار مفید است. به جای ضبط مجدد جریان کاربر، فقط می توانید آن را ویرایش کنید. روی منوی کباب 3 نقطه کنار مرحله کلیک کنید تا منو باز شود.
- برای مثال، رویداد Scroll بعد از مرحله Mocha ضروری نیست. برای حذف می توانید مرحله حذف را انتخاب کنید.
- فرض کنید می‌خواهید قبل از انجام هر مرحله صبر کنید تا ۹ قهوه روی صفحه نمایش داده شود.
- در منوی گام موکا ، افزودن مرحله قبل را انتخاب کنید.
- در Assert Element ، مرحله جدید را با جزئیات زیر ویرایش کنید:
- نوع: waitForElement
- انتخابگر شماره 1: . cup
- اپراتور: == (روی دکمه افزودن اپراتور کلیک کنید)
- تعداد: 9 (دکمه افزودن شمارش را کلیک کنید)
- اکنون جریان را دوباره پخش کنید تا تغییرات را ببینید.
9. تبریک!
تبریک می گویم. شما این کد را با موفقیت تکمیل کردید!
به هر حال، شما می توانید انتخابگر را برای ضبط نیز سفارشی کنید. برای کسب اطلاعات بیشتر به مستندات ما بروید.