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

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

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

   

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

   

מבוא

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

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

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

תיעוד מסלול המשתמש באתר

1. פותחים את דף הדמו הזה. לוחצים על הלחצן התחלת הקלטה חדשה כדי להתחיל.
2. מזינים 'coffee checkout' בתיבת הטקסט Recording name.
   הערה: תיבת הטקסט מאפיין הבורר ותיבות הסימון סוגי בוררים להקלטה הן אופציונליות. במדריך הזה, משאירים את הגדרות ברירת המחדל כפי שהן. מידע נוסף זמין במאמר הסבר על בוחרים.
3. לוחצים על הלחצן התחלת הקלטה חדשה. ההקלטה מתחילה. בחלונית מופיע הכיתוב הקלטה..., שמציין שההקלטה מתבצעת.
4. לוחצים על קפה קפוצ'ינו כדי להוסיף אותו לעגלת הקניות.
5. לוחצים על אמריקנו כדי להוסיף אותו לעגלת הקניות. שימו לב שבמכשיר ההקלטה מוצגים השלבים שביצעת עד עכשיו.
6. עוברים לדף עגלת הקניות ומסירים את קפה אמריקנו מעגלת הקניות.
   הערה: אפשר גם להסיר את קפה אמריקנו בדף התפריט. לשם כך, מעבירים את העכבר מעל הלחצן סה"כ ולוחצים על - לצד קפה אמריקנו בתפריט הקופץ. עם זאת, תצטרכו להוסיף את שלב ההעברה עם העכבר באופן ידני אחרי שתסיימו את ההקלטה, כי הכלי להקלטת אירועים לא מתעד אירועי העברת עכבר באופן אוטומטי.
7. לוחצים על הלחצן סה"כ: 19.00$ כדי להתחיל בתהליך התשלום.
8. בטופס פרטי התשלום, ממלאים את שדות הטקסט שם ואימייל ומסמנים את התיבה אני רוצה לקבל עדכונים לגבי ההזמנות ומסרים שיווקיים.
9. לוחצים על הלחצן Submit כדי להשלים את תהליך התשלום.
   הערה: אפשר לערוך שלבים ולהוסיף טענות נכוֹנוּת באופן ידני גם לפני שמסיימים את ההקלטה.
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.