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

Jecelyn Yeen

Sofia Emelianova

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

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

הערה: זוהי תכונה בתצוגה מקדימה ב-Chrome 97. הצוות שלנו עובד על הפיצ'ר הזה ואנחנו מצפים למשוב שלכם כדי שנוכל לשפר אותו.

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

הערה: התכונה הזו זמינה רק ב-Chrome, ולא ב-Chromium.

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

1. פותחים את כלי הפיתוח.

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

   

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

   

מבוא

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

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

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

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

1. פותחים את דף הדמו הזה. לוחצים על הלחצן Start new recording (התחלת הקלטה חדשה) כדי להתחיל.
2. מזינים 'coffee checkout' בתיבת הטקסט Recording name.
   הערה: תיבת הטקסט מאפיין הבורר ותיבות הסימון סוגי בוררים להקלטה הן אופציונליות. במדריך הזה, משאירים את הגדרות ברירת המחדל כפי שהן. מידע נוסף זמין במאמר הסבר על בוחרים.
3. לוחצים על הלחצן התחלת הקלטה חדשה. ההקלטה מתחילה. בחלונית מוצג הכיתוב הקלטה..., שמציין שההקלטה מתבצעת.
4. לוחצים על Cappuccino כדי להוסיף אותו לעגלת הקניות.
5. לוחצים על אמריקנו כדי להוסיף אותו לעגלת הקניות. שימו לב שבמכשיר ההקלטה מוצגים השלבים שביצעת עד עכשיו.
6. עוברים לדף עגלת הקניות ומסירים את אמריקנו מעגלת הקניות.
   הערה: אפשר גם להסיר את Americano בדף התפריט. לשם כך, מעבירים את העכבר מעל הלחצן סה"כ ולוחצים על - לצד Americano בתפריט הקופץ. עם זאת, תצטרכו להוסיף את שלב ההעברה עם העכבר באופן ידני אחרי שתסיימו את ההקלטה, כי הכלי להקלטת אירועים לא מתעד אירועי העברת עכבר באופן אוטומטי.
7. לוחצים על הלחצן סה"כ: 19.00$ כדי להתחיל בתהליך התשלום.
8. בטופס פרטי התשלום, ממלאים את שדות הטקסט שם ואימייל ומסמנים את התיבה אני רוצה לקבל עדכונים לגבי ההזמנות ומסרים שיווקיים.
9. לוחצים על הלחצן שליחה כדי להשלים את תהליך התשלום.
   הערה: אפשר לערוך את השלבים ולהוסיף טענות נכוֹנוּת באופן ידני גם לפני שמסיימים את ההקלטה.
10. בחלונית מצלמת הווידאו, לוחצים על הלחצן סיום ההקלטה כדי לסיים את ההקלטה.

הפעלה חוזרת של מסלול משתמש

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

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

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

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

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

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

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

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

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

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

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

עריכת השלבים

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

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

הרחבת השלבים

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

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

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

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

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

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

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

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

   

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

2. מריצים מחדש את התהליך. הפעם, התהליך אמור לבחור באפשרות Mocha במקום Cappuccino.

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

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

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

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

   

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

3. נניח שאתם רוצים להמתין עד ש-9 הקפה יופיעו בדף לפני ביצוע השלבים. בתפריט השלבים של Mocha, בוחרים באפשרות הוספת שלב לפני.

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

   • סוג: waitForElement
   • בורר מס' 1: ‎.cup
   • אופרטור: == (לוחצים על הלחצן add operator)
   • count: ‏ 9 (לוחצים על הלחצן add count)

5. מריצים מחדש את התהליך כדי לראות את השינויים.

השלבים הבאים

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

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