ضبط، پخش مجدد و اندازه گیری جریان کاربر

با ویدیوی زیر نگاهی به پنل ضبط جدید (ویژگی پیش نمایش) بیندازید.

برای یادگیری نحوه استفاده از پنل ضبط برای ضبط، پخش مجدد و اندازه گیری جریان کاربر، این آموزش را تکمیل کنید.

برای اطلاعات بیشتر درباره نحوه اشتراک‌گذاری جریان‌های کاربر ضبط‌شده، ویرایش آنها و مراحل آنها، به مرجع ویژگی‌های ضبط‌کننده مراجعه کنید.

پنل Recorder را باز کنید

  1. DevTools را باز کنید .
  2. بر روی گزینه های بیشتر کلیک کنید بیشتر > ابزارهای بیشتر > ضبط کننده .

    ضبط در منو.

    همچنین، از منوی فرمان برای باز کردن پانل ضبط استفاده کنید.

    نمایش دستور Recorder در منوی Command.

مقدمه

ما از این صفحه نمایشی سفارش قهوه استفاده خواهیم کرد. Checkout یک جریان کاربر رایج در بین وب سایت های خرید است.

در بخش‌های بعدی، نحوه ضبط، پخش مجدد و ممیزی جریان پرداخت زیر را با پنل Recorder به شما آموزش خواهیم داد:

  1. یک قهوه به سبد خرید اضافه کنید.
  2. یک قهوه دیگر به سبد خرید اضافه کنید.
  3. به صفحه سبد خرید بروید.
  4. یک قهوه را از سبد خرید خارج کنید.
  5. فرآیند پرداخت را شروع کنید.
  6. جزئیات پرداخت را وارد کنید
  7. بررسی کنید.

یک جریان کاربر را ثبت کنید

  1. این صفحه نمایشی را باز کنید. برای شروع روی دکمه شروع ضبط جدید کلیک کنید.
  2. در کادر متنی نام ضبط، «کافی پرداخت» را وارد کنید. شروع یک ضبط جدید.
  3. روی دکمه Start a new recording کلیک کنید. ضبط شروع شد. پانل ضبط را نشان می دهد ... که نشان می دهد ضبط در حال انجام است. ضبط در حال انجام است
  4. برای افزودن آن به سبد خرید روی کاپوچینو کلیک کنید.
  5. برای افزودن آن به سبد خرید روی Americano کلیک کنید. توجه داشته باشید که Recorder مراحلی را که تاکنون انجام داده اید را نشان می دهد. مراحل در پنل ضبط
  6. به صفحه سبد خرید رفته و Americano را از سبد خرید حذف کنید.
  7. برای شروع فرآیند پرداخت، روی دکمه Total: $19.00 کلیک کنید.
  8. در فرم جزئیات پرداخت، کادرهای متنی نام و ایمیل را پر کنید و گزینه I want to get updates order and messages promotion را علامت بزنید. چک باکس فرم جزئیات پرداخت
  9. برای تکمیل فرآیند پرداخت، روی دکمه ارسال کلیک کنید.
  10. در پنل Recorder کلیک کنید پایان ضبط دکمه پایان ضبط برای پایان ضبط.

یک جریان کاربر را دوباره پخش کنید

پس از ضبط یک جریان کاربر، می توانید با کلیک بر روی آن، آن را دوباره پخش کنید پخش مجدد. دکمه پخش مجدد

می توانید پخش مجدد جریان کاربر را در صفحه مشاهده کنید. پیشرفت پخش مجدد در پانل ضبط نیز نشان داده می شود.

اگر در حین ضبط اشتباه کلیک کردید یا چیزی کار نمی‌کند، می‌توانید جریان کاربر خود را اشکال‌زدایی کنید : پخش آن را کاهش دهید، یک نقطه شکست تعیین کنید و آن را مرحله به مرحله اجرا کنید.

شبیه سازی شبکه کند

با پیکربندی تنظیمات پخش مجدد ، می توانید اتصال شبکه کند را شبیه سازی کنید. برای مثال، تنظیمات Replay را گسترش دهید، Slow 3G را در منوی کشویی Network انتخاب کنید.

تنظیمات پخش مجدد

ممکن است در آینده تنظیمات بیشتری پشتیبانی شود. تنظیمات پخش مجددی را که دوست دارید داشته باشید با ما به اشتراک بگذارید !

اندازه گیری جریان کاربر

با کلیک بر روی دکمه اندازه گیری عملکرد می توانید عملکرد یک جریان کاربر را اندازه گیری کنید. به عنوان مثال، پرداخت یک جریان کاربر حیاتی از یک وب سایت خرید است. با پنل Recorder می توانید جریان پرداخت را یک بار ضبط کرده و مرتباً اندازه گیری کنید.

با کلیک بر روی دکمه اندازه گیری عملکرد ، ابتدا جریان کاربر مجدداً پخش می شود، سپس ردیابی عملکرد در پانل عملکرد باز می شود.

نحوه تجزیه و تحلیل عملکرد زمان اجرا صفحه خود را با پنل Performance بیاموزید. برای مشاهده معیارهای Web Vitals ، شناسایی فرصت‌ها برای بهبود تجربه مرور کاربر، می‌توانید کادر بررسی Web Vitals را در پانل عملکرد فعال کنید.

پنل عملکرد.

مراحل ویرایش

بیایید از طریق گزینه های اساسی برای ویرایش مراحل در گردش کار ضبط شده قدم برداریم.

برای فهرست جامعی از گزینه‌های ویرایش، مراحل ویرایش در مرجع ویژگی‌ها را ببینید.

مراحل را گسترش دهید

هر مرحله را باز کنید تا جزئیات عمل را ببینید. به عنوان مثال، مرحله کلیک عنصر "کاپوچینو" را گسترش دهید.

در پانل ضبط، عنصر کاپوچینو برای نشان دادن نوع، هدف، انتخابگرها، افست X و افست Y گسترش یافته است.

مرحله بالا دو انتخابگر را نشان می دهد. برای اطلاعات بیشتر، به درک انتخابگر ضبط مراجعه کنید.

هنگام پخش مجدد جریان کاربر، Recorder سعی می کند عنصر را با یکی از انتخابگرها به ترتیب پرس و جو کند. به عنوان مثال، اگر Recorder با موفقیت عنصر را با انتخابگر اول پرس و جو کند، انتخابگر دوم را رد می کند و به مرحله بعدی می رود.

انتخابگرها را از یک مرحله اضافه و حذف کنید

می توانید هر انتخابگر را اضافه یا حذف کنید. به عنوان مثال، می توانید انتخابگر شماره 2 را حذف کنید زیرا فقط aria/Cappuccino در این مورد کافی است. ماوس را روی انتخابگر شماره 2 نگه دارید و روی - کلیک کنید تا آن را حذف کنید.

پانل ضبط DevTools گزینه ای را برای حذف یک انتخابگر نشان می دهد.

انتخابگرها را در یک مرحله ویرایش کنید

انتخابگر نیز قابل ویرایش است. به عنوان مثال، اگر می خواهید به جای کاپوچینو موکا را انتخاب کنید، می توانید:

  1. به جای آن مقدار انتخابگر را به aria/Mocha ویرایش کنید.

    یک انتخابگر را ویرایش کنید.

    یا بر روی Select کلیک کنید دکمه انتخاب را فشار دهید و سپس روی Mocha در صفحه کلیک کنید.

  2. اکنون جریان را دوباره پخش کنید ، باید به جای کاپوچینو، موکا را انتخاب کنید.

  3. سعی کنید سایر ویژگی های مرحله مانند نوع ، هدف ، مقدار و موارد دیگر را ویرایش کنید.

افزودن و حذف مراحل

گزینه هایی برای افزودن و حذف مراحل نیز وجود دارد. اگر می خواهید یک مرحله اضافی اضافه کنید یا یک مرحله به طور تصادفی اضافه شده را حذف کنید، این کار مفید است. به جای ضبط مجدد جریان کاربر، فقط می توانید آن را ویرایش کنید:

  1. روی مرحله ای که می خواهید ویرایش کنید کلیک راست کنید یا روی آن کلیک کنید منوی سه نقطه نماد سه نقطه در کنار آن

    منوی کشویی یک مرحله با گزینه هایی برای حذف و افزودن مراحل قبل یا بعد.

  2. برای حذف می توانید مرحله حذف را انتخاب کنید. برای مثال، رویداد Scroll بعد از مرحله Mocha ضروری نیست.

  3. بگویید، می‌خواهید قبل از انجام هر مرحله صبر کنید تا ۹ قهوه روی صفحه نمایش داده شود. در منوی مرحله موکا ، افزودن مرحله قبل را انتخاب کنید. مرحله جدیدی به نام Assert Element اضافه شد و اکنون قابل ویرایش است.

  4. در Assert Element ، مرحله جدید را با جزئیات زیر ویرایش کنید:

    • نوع: waitForElement
    • انتخابگر شماره 1: جام
    • اپراتور: == (روی دکمه افزودن اپراتور کلیک کنید)
    • تعداد: 9 (روی دکمه افزودن شمارش کلیک کنید) مرحله جدید پرداخت قهوه با جزئیات ذکر شده به روز شده است.
  5. پخش مجدد. اکنون جریان را دوباره پخش کنید تا تغییرات را ببینید.

مراحل بعدی

تبریک می گویم، شما آموزش را تکمیل کردید!

برای کاوش بیشتر ویژگی‌ها و گردش‌های کاری (به عنوان مثال، واردات و صادرات) مرتبط با ضبط ، به مرجع ویژگی‌های ضبط‌کننده مراجعه کنید.