הקלטה, הפעלה מחדש ומדידה של זרימות המשתמשים

Sofia Emelianova
Sofia Emelianova

כדאי להציץ בחלונית החדשה מכשיר ההקלטה (תכונת תצוגה מקדימה) עם הסרטון שלמטה.

מומלץ להשלים את המדריך הזה כדי ללמוד איך להשתמש בחלונית מכשיר ההקלטה כדי להקליט, להפעיל מחדש ולמדוד את זרימת המשתמש.

מידע נוסף על שיתוף תהליכי המשתמש שתועדו, עריכה שלהם ושל השלבים שלהם זמין במאמר העזר בנושא התכונות של Recorder.

פתיחת החלונית של מכשיר ההקלטה

  1. פותחים את כלי הפיתוח.
  2. לוחצים על אפשרויות נוספות   עוד.   > כלים נוספים > מצלמה.

    מכשיר ההקלטה בתפריט.

    לחלופין, משתמשים בתפריט הפקודה כדי לפתוח את החלונית מכשיר ההקלטה.

    הצגת הפקודה של מכשיר ההקלטה בתפריט הפקודות.

מבוא

נשתמש בדף ההדגמה הזה של הזמנת קפה. תהליך התשלום הוא תהליך נפוץ שמשתמשים מבצעים בקרב אתרי קניות.

בחלקים הבאים נסביר איך להקליט, להפעיל מחדש ולבדוק את תהליך התשלום הבא באמצעות החלונית Recorder:

  1. מוסיפים קפה לעגלת הקניות.
  2. מוסיפים עוד קפה לעגלת הקניות.
  3. עוברים לדף עגלת הקניות.
  4. צריך להסיר קפה מעגלת הקניות.
  5. מתחילים את תהליך התשלום בקופה.
  6. ממלאים את פרטי התשלום.
  7. לתשלום.

תיעוד מסלול משתמש

  1. פותחים את דף ההדגמות הזה. לוחצים על הלחצן התחלת הקלטה חדשה כדי להתחיל.
  2. מזינים 'תשלום בקופה' בתיבת הטקסט שם ההקלטה. מתחילים הקלטה חדשה.
  3. לוחצים על הלחצן התחלת הקלטה חדשה. ההקלטה מתחילה. בחלונית מופיע הכיתוב הקלטה..., שמציין שההקלטה מתבצעת. בתהליך הקלטה.
  4. לוחצים על קפוצ'ינו כדי להוסיף אותו לעגלת הקניות.
  5. לוחצים על Americano כדי להוסיף אותו לעגלת הקניות. שימו לב שבמכשיר ההקלטה מוצגים השלבים שביצעת עד עכשיו. שלבים בחלונית 'מכשיר הקלטה'.
  6. עוברים לדף עגלת הקניות ומסירים את Americano מעגלת הקניות.
  7. לוחצים על הלחצן סה"כ: 19.00$ כדי להתחיל בתהליך התשלום.
  8. בטופס פרטי התשלום, ממלאים את תיבות הטקסט Name ו-Email ומסמנים את התיבה אני רוצה לקבל עדכונים לגבי הזמנות והודעות שיווקיות. טופס פרטי תשלום.
  9. לוחצים על הלחצן שליחה כדי להשלים את תהליך התשלום.
  10. בחלונית מצלמת הווידאו, לוחצים על הלחצן סיום ההקלטה. סיום ההקלטה כדי לסיים את ההקלטה.

הפעלה מחדש של תהליך המשתמש

אחרי שמתעדים את התהליך של המשתמש, אפשר להפעיל אותו מחדש בלחיצה על הלחצן הפעלה מחדש.הפעלה מחדש.

אפשר לראות את ההפעלה מחדש של תהליך הרכישה בדף. התקדמות ההפעלה מחדש מוצגת גם בחלונית המצלמה.

אם לחצתם בטעות במהלך הצילום או שמשהו לא עובד, תוכלו לאתר באגים בתהליך השימוש: להאט את ההפעלה מחדש, להגדיר נקודת עצירה ולבצע את התהליך שלב אחרי שלב.

סימולציה של רשת איטית

אפשר לדמות חיבור איטי לרשת על ידי קביעת ההגדרות להפעלה מחדש. לדוגמה, מרחיבים את הגדרות ההפעלה מחדש, בוחרים 3G איטי בתפריט הנפתח רשת.

הגדרות להפעלה מחדש.

יכול להיות שנוסיף הגדרות נוספות בעתיד. שתפו איתנו את הגדרות ההפעלה החוזרת שאתם רוצים.

מדידת מסלול המשתמש

כדי למדוד את הביצועים של תהליך המשתמש, אפשר ללחוץ על הלחצן מדידת ביצועים. לדוגמה, תהליך התשלום הוא תהליך קריטי שעוברים המשתמשים באתר שופינג. בחלונית מכשיר ההקלטה אפשר לתעד את תהליך התשלום פעם אחת ולמדוד אותו באופן קבוע.

לחיצה על הלחצן מדידת הביצועים תפעיל תחילה הפעלה חוזרת של תהליך השימוש, ולאחר מכן תפתח את מעקב הביצועים בחלונית ביצועים.

בחלונית ביצועים אפשר לקרוא מידע נוסף על ניתוח הביצועים של דף הריצה. כדי להציג את המדדים של Web Vitals ולזהות הזדמנויות לשיפור חוויית הגלישה של המשתמשים, אפשר להפעיל את תיבת הסימון של Web Vitals בחלונית ביצועים.

חלונית הביצועים.

עריכת השלבים

בואו נעבור על האפשרויות הבסיסיות לעריכת השלבים בתהליך העבודה המוקלט.

רשימה מקיפה של אפשרויות העריכה מופיעה בקטע שלבי עריכה במאמר העזרה בנושא תכונות.

הרחבת השלבים

מרחיבים כל שלב כדי לראות את פרטי הפעולה. לדוגמה, מרחיבים את השלב Click Element "Cappuccino".

בחלונית ההקלטה, הרכיב של Cappuccino הורחב כדי לחשוף את הסוג, היעד, הבוררים, ההיסט X וההיסט Y.

בשלב שלמעלה מוצגים שני בוררים. מידע נוסף זמין במאמר הסבר על הבורר של ההקלטה.

כשמפעילים מחדש את תהליך השימוש, ה-Recorder מנסה לשלוח שאילתות לאלמנט באמצעות אחד מהבוררים לפי רצף. לדוגמה, אם הרשם שולח שאילתות לאלמנט באמצעות הבורר הראשון ומקבל תוצאות, הוא ידלג על הבורר השני וימשיך לשלב הבא.

הוספה והסרה של בוררים משלב

אפשר להוסיף או להסיר כל סלקטורים. לדוגמה, אפשר להסיר את בורר 2 כי במקרה הזה מספיק רק aria/Cappuccino. מעבירים את העכבר מעל בורר מס' 2 ולוחצים על - כדי להסיר אותו.

בחלונית ההקלטה של DevTools מוצגת אפשרות להסיר סלקטורים.

עריכת הבוררים בשלב

אפשר גם לערוך את בורר האפשרויות. לדוגמה, אם רוצים לבחור באפשרות מוכה במקום קפוצ'ינו, אפשר:

  1. במקום זאת, עורכים את ערך הבורר ל-aria/Mocha.

    עריכת בורר.

    לחלופין, לוחצים על הלחצן בחירהלחצן בחירה. ואז לוחצים על Mocha בדף.

  2. ממשיכים את התהליך מחדש עכשיו. הוא צריך לבחור מוכה במקום קפוצ'ינו.

  3. אפשר לנסות לערוך מאפיינים אחרים של השלב, כמו type, target, value ועוד.

הוספה והסרה של שלבים

יש גם אפשרויות להוסיף ולהסיר שלבים. כך אפשר להוסיף שלב נוסף או להסיר שלב שנוסף בטעות. במקום להקליט מחדש את תהליך העבודה של המשתמש, אפשר פשוט לערוך אותו:

  1. לוחצים לחיצה ימנית על השלב שרוצים לערוך או על סמל שלוש הנקודות תפריט שלוש הנקודות. שלצידו.

    התפריט הנפתח של שלב עם אפשרויות להסרת שלבים ולהוספת שלבים לפני או אחרי.

  2. כדי להסיר אותו, בוחרים באפשרות הסרת שלב. לדוגמה, אין צורך באירוע Scroll אחרי השלב Mocha.

  3. נניח שאתם רוצים להמתין עד שה-9 קפה יוצגו בדף לפני ביצוע שלבים כלשהם. בתפריט השלבים Mocha, בוחרים באפשרות Add Step before (הוספת שלב לפני). הוספנו שלב חדש בשם 'אימות רכיב', ועכשיו אפשר לערוך אותו.

  4. ב-Assert Element, עורכים את השלב החדש עם הפרטים הבאים:

    • טיפוס: waitForElement
    • בורר מס' 1: .cup
    • אופרטור: == (לוחצים על הלחצן add operator)
    • count:‏ 9 (לוחצים על הלחצן add count) השלב החדש בתשלום על קפה עודכן עם הפרטים שצוינו למעלה.
  5. הפעלה מחדש.להפעיל מחדש את התהליך כדי לראות את השינויים.

השלבים הבאים

כל הכבוד, השלמת את המדריך!

במאמר מאמרי עזרה על התכונות של Recorder מפורט מידע נוסף על תכונות ותהליכי עבודה (למשל, ייבוא וייצוא) שקשורים ל-Recorder.