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

ג'סלין יין
ג'סלין יין
סופיה אמליאנובה
סופיה אמליאנובה

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

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

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

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

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

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

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

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

מבוא

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

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

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

תיעוד זרימה של משתמש

  1. פותחים את דף ההדגמה הזה. כדי להתחיל, לוחצים על הלחצן התחלת הקלטה חדשה.
  2. מזינים 'קופת קפה' בתיבת הטקסט שם ההקלטה. מתחילים הקלטה חדשה.

מידע נוסף זמין במאמר הסבר על הסלקטורים. 1. לוחצים על הלחצן התחלת הקלטה חדשה. ההקלטה מתחילה. בחלונית מוצגת ההודעה מקליט... הודעה שמציינת שההקלטה מתבצעת. מתבצעת הקלטה. 1. לוחצים על קפוצ'ינו כדי להוסיף אותו לעגלת הקניות. 1. לוחצים על Americano כדי להוסיף אותו לעגלת הקניות. שימו לב שמכשיר ההקלטה מציג את השלבים שביצעתם עד כה. השלבים בחלונית 'מכשיר הקלטה'. 1. עוברים לדף עגלת הקניות ומסירים את Americano מעגלת הקניות.

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

הפעלה מחדש של זרימת משתמש

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

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

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

הדמיה של רשת איטית

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

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

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

מדידת זרימת המשתמשים

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

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

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

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

עריכת השלבים

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

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

הרחבת השלבים

כדי לראות את פרטי הפעולה, מרחיבים כל שלב. לדוגמה, מרחיבים את השלב Click Element (קפוצ'ינו).

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

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

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

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

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

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

עריכת הבוררים בשלב אחד

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

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

    עורכים בורר.

    אפשרות אחרת היא ללחוץ על הלחצן בחירהלחצן בחירה. ואז על Mocha בדף.

  2. מפעילים מחדש את התהליך עכשיו, צריך לבחור באפשרות Mocha (מוקה) במקום ב-Capפוצ'ינו.

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

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

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

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

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

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

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

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

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

השלבים הבאים

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

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