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