הסבר על התכונות

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

מידע על מקשי קיצור והתאמה אישית שלהם

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

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

הלחצן 'הצגת קיצורי דרך'.

כדי להתאים אישית את מקשי הקיצור של מכשיר ההקלטה:

  1. פותחים את הגדרות. הגדרות > קיצורי דרך.
  2. גוללים למטה אל הקטע מכשיר הקלטה.
  3. פועלים לפי השלבים שמפורטים בקטע התאמה אישית של קיצורי דרך.

עריכת תהליכי משתמשים

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

בחלק העליון של החלונית מצלמה יש אפשרויות ל:

  1. הוספת הקלטה חדשההוספה. לוחצים על הסמל + כדי להוסיף הקלטה חדשה.
  2. הצגת כל ההקלטותהרחבה.. ברשימה הנפתחת תוצג רשימת ההקלטות השמורות. בוחרים באפשרות N הקלטות כדי להרחיב ולנהל את רשימת ההקלטות השמורות. הצגת כל ההקלטות.

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

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

  4. ייבוא הקלטההעלאת קובץ.. רק בפורמט JSON.

  5. מחיקת הקלטהמחיקה.. מחיקת ההקלטה שנבחרה.

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

שיתוף תהליכי עבודה של משתמשים

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

ייצוא תהליך המשתמש

כדי לייצא תהליך משתמש:

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

  2. לוחצים על ייצוא בחלק העליון של החלונית מכשיר ההקלטה.

    רשימת אפשרויות הפורמט בתפריט הייצוא.

  3. בוחרים אחד מהפורמטים הבאים מהרשימה הנפתחת:

    • קובץ JSON. מורידים את ההקלטה כקובץ JSON.
    • @puppeteer/replay. מורידים את ההקלטה כתסריט להפעלה חוזרת של בובות.
    • Puppeteer. הורד את ההקלטה כתסריט של Puppeteer.
    • Puppeteer (ל-Firefox). מורידים את ההקלטה כתסריט של Puppeteer for Firefox.
    • בובה (כולל ניתוח Lighthouse). מורידים את ההקלטה כתסריט של Puppeteer עם ניתוח מוטמע של Lighthouse.
    • אחת או יותר מהאפשרויות שסופקו על ידי התוספים לייצוא של מכשיר ההקלטה.

  4. שומרים את הקובץ.

אתם יכולים לבצע את הפעולות הבאות בכל אפשרות ייצוא שמוגדרת כברירת מחדל:

  • JSON. עורכים את אובייקט ה-JSON קריא לאנשים וimport את קובץ ה-JSON חזרה אל מכשיר ההקלטה.
  • @puppeteer/replay. מפעילים מחדש את הסקריפט באמצעות הספרייה Puppeteer Replay. כשמייצאים כסקריפט @puppeteer/replay, השלבים נשארים כאובייקט JSON. זו האפשרות המתאימה ביותר אם רוצים לשלב את צינור עיבוד הנתונים של CI/CD, אבל עדיין יש לכם את הגמישות לערוך את השלבים כ-JSON, להמיר אותם ולייבא אותם בחזרה אל מכשיר ההקלטה.
  • סקריפט Puppeteer. מפעילים מחדש את הסקריפט באמצעות Puppeteer. מכיוון שהשלבים מומרים ל-JavaScript, אפשר לבצע התאמה אישית ברמת פירוט גבוהה יותר, למשל, להפעיל את השלבים בלופ. אזהרה אחת: לא ניתן לייבא את הסקריפט הזה חזרה אל מכשיר ההקלטה.
  • Puppeteer (ל-Firefox). כחלק מתמיכה ב-WebDriver BiDi, אפשר להריץ את הסקריפט הזה של Puppeteer גם ב-Chrome וגם ב-Firefox.

  • Puppeteer (כולל ניתוח של Lighthouse). אפשרות הייצוא הזו זהה לאפשרות הקודמת, אבל היא כוללת קוד שיוצר ניתוח של Lighthouse.

    מריצים את הסקריפט ובודקים את הפלט בקובץ flow.report.html:

    # npm i puppeteer lighthouse
node your_export.js

    הדוח Lighthouse נפתח ב-Chrome.

ייצוא בפורמט מותאם אישית על ידי התקנת תוסף

ראו תוספים של מכשיר ההקלטה.

ייבוא תהליך של משתמש

כדי לייבא תהליך של משתמש:

  1. לוחצים על הלחצן ייבואהעלאת קובץ. בחלק העליון של החלונית מכשיר ההקלטה. מייבאים את ההקלטה.
  2. בוחרים את קובץ ה-JSON עם תהליך השימוש המוקלט.
  3. לוחצים על הלחצן הפעלה מחדש.הפעלה מחדש כדי להפעיל את זרימת המשתמשים שיובאה.

הפעלה חוזרת עם ספריות חיצוניות

Puppeteer Replay הוא ספריית קוד פתוח שמנוהלת על ידי צוות כלי הפיתוח ל-Chrome. הוא מבוסס על Puppeteer. זהו כלי שורת פקודה, שמאפשר להפעיל מחדש קובצי JSON באמצעותו.

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

טרנספורמציה של תהליכי משתמש ב-JSON לסקריפטים מותאמים אישית:

  • Cypress Chrome Recorder. אפשר להשתמש בו כדי להמיר קובצי JSON של תהליך משתמש לסקריפטים של בדיקות ב-Cypress. בהדגמה הזו אפשר לראות איך זה עובד.
  • Nightwatch Chrome Recorder. אפשר להשתמש בו כדי להמיר קובצי JSON של זרימת משתמשים לסקריפטים לבדיקה של שעון הלילה.
  • CodeceptJS Chrome Recorder. אפשר להשתמש בו כדי להמיר קובצי JSON של תהליך משתמש לסקריפטים של בדיקות ב-CodeceptJS.

הרצת מחדש של תהליכי משתמש ב-JSON:

ניפוי באגים בתהליכים של משתמשים

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

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

האטת ההפעלה מחדש

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

  1. פותחים את התפריט הנפתח הפעלה מחדש.הפעלה מחדש.
  2. בוחרים באחת מהאפשרויות של מהירות ההפעלה מחדש:
    • רגילה (ברירת מחדל)
    • מהירות נמוכה
    • איטי מאוד
    • איטית במיוחד

הפעלה מחדש איטית.

בדיקת הקוד

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

  1. פותחים הקלטה בחלונית מכשיר ההקלטה.
  2. לוחצים על Show code (הצגת הקוד) בפינה השמאלית העליונה של רשימת השלבים. לחצן הצגת הקוד.
  3. במכשיר ההקלטה מוצגת תצוגה של השלבים והקוד שלהם זה לצד זה. תצוגה זה לצד זה של השלבים והקוד שלהם.
  4. כשמעבירים את העכבר מעל שלב כלשהו, מכשיר ההקלטה מדגיש את הקוד המתאים בכל פורמט, כולל אלה שמסופקים על ידי תוספים.

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

    הרשימה הנפתחת של הפורמטים.

    הוא יכול להיות אחד משלושת הפורמטים שמוגדרים כברירת מחדל (JSON,‏ ‎@puppeteer/replay,‏ סקריפט Puppeteer) או פורמט שסופק על ידי תוסף.

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

הגדרת נקודות עצירה וביצוע שלב אחרי שלב

כדי להגדיר נקודת עצירה ולהפעיל שלב אחרי שלב:

  1. מעבירים את העכבר מעל העיגול שלב. לצד שלב כלשהו בהקלטה. העיגול הופך לסמל של נקודת עצירה (breakpoint) נקודת עצירה (breakpoint)..
  2. לוחצים על סמל נקודת העצירה נקודת עצירה (breakpoint). ומפעילים מחדש את ההקלטה. הביצועים מושהים בנקודת העצירה. השהיית הביצוע.
  3. כדי לבצע את הפעולות לפי הסדר, לוחצים על הלחצן מבצעים שלב אחד. הפעלת שלב אחד בסרגל הפעולות שבחלק העליון של החלונית הקלטת.
  4. כדי להפסיק את ההפעלה מחדש, לוחצים על עצרו. ביטול ההפעלה מחדש.

עריכת השלבים

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

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

הוספת שלבים

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

כדי להוסיף שלב באופן ידני:

  1. פותחים את דף הדמו הזה ומתחילים הקלטה חדשה. מתחילים הקלטה כדי לתעד אירוע של מעוף מעל.
  2. מעבירים את העכבר מעל הרכיב באזור התצוגה. ייפתח תפריט פעולות. מעבירים את העכבר מעל הרכיב.
  3. בוחרים פעולה מהתפריט ומסיימים את ההקלטה. המכשיר להקלטת אירועים מתעד רק את אירוע הלחיצה. לחיצה על פעולה וסיום ההקלטה.
  4. לוחצים על הפעלה מחדש. הפעלה מחדש כדי לנסות להפעיל מחדש את ההקלטה. ההפעלה החוזרת נכשלת אחרי שעבר הזמן הקצוב לתפוגה כי מכשיר ההקלטה לא יכול לגשת לרכיב בתפריט. ההפעלה החוזרת נכשלה.
  5. לוחצים על לחצן שלוש הנקודות לחצן שלוש הנקודות. שלצד השלב לחיצה ובוחרים באפשרות הוספת שלב לפני. הוספת שלב לפני הקליק.
  6. מרחיבים את השלב החדש. כברירת מחדל, הסוג שלו הוא waitForElement. לוחצים על הערך שליד type ובוחרים באפשרות hover. מתבצעת בחירה של העברת העכבר.
  7. בשלב הבא, מגדירים סלקטור מתאים לשלב החדש. לוחצים על בחירה. בחירה ואז לוחצים על אזור ברכיב Hover over me! שמחוץ לתפריט הקופץ. הבורר מוגדר ל#clickable. הגדרת הבורר.
  8. אפשר לנסות להפעיל שוב את ההקלטה. לאחר השלב של העברת העכבר שנוסף, מכשיר ההקלטה מפעיל מחדש את התהליך. ההפעלה מחדש בוצעה בהצלחה.

הוספת טענות נכוֹנוּת (assertions)

במהלך ההקלטה, אפשר לאמת, למשל, מאפייני HTML ומאפייני JavaScript. כדי להוסיף טענת נכוֹנוּת (assertion):

  1. מתחילים את ההקלטה, למשל בדף הדגמה הזה.

  2. לוחצים על Add assertion (הוספת טענת נכוֹנוּת) (assertion).

    הלחצן 'הוספה של טענת נכונות'.

    המכשיר להקלטת נתונים יוצר שלב waitForElement שניתן להגדרה.

  3. מציינים בוררים לשלב הזה.

  4. מגדירים את השלב, אבל לא משנים את סוג ה-waitForElement שלו. לדוגמה, אפשר לציין:

    • מאפיין HTML. לוחצים על הוספת מאפיינים ומקלידים את השם והערך של המאפיין שבו משתמשים הרכיבים בדף הזה. לדוגמה, data-test: <value>.
    • נכס JavaScript. לוחצים על Add properties ומקלידים את השם והערך של הנכס בפורמט JSON. לדוגמה, {".innerText":"<text>"}.
    • מאפייני שלבים אחרים לדוגמה, visible: true.

  5. ממשיכים להקליט את המשך התהליך של המשתמש ומפסיקים את ההקלטה.

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

בסרטון הבא אפשר לראות את תהליך העבודה הזה בפעולה.

העתקת השלבים

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

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

בחירת אפשרות העתקה מהתפריט הנפתח.

אפשר להעתיק שלבים בפורמטים שונים: JSON,‏ Puppeteer,‏ ‎@puppeteer/replay ופורמטים שסופקו על ידי תוספים.

הסרת שלבים

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

מסירים שלב.

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

הקלטה עם אזור התצוגה ושלבי הניווט שהוגדרו.

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

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

שלבי ההגדרה

כדי להגדיר שלב:

  1. מציינים את הסוג שלו: click,‏ doubleClick,‏ hover,‏ (קלט) change,‏ keyUp,‏ keyDown,‏ scroll,‏ close,‏ navigate (לדף),‏ waitForElement,‏ waitForExpression או setViewport.

    מאפיינים אחרים תלויים בערך type.

  2. מציינים את המאפיינים הנדרשים מתחת ל-type.

    מגדירים שלב.

  3. לוחצים על הלחצנים המתאימים כדי להוסיף מאפיינים אופציונליים וספציפיים לסוג ולפרט אותם.

רשימה של המאפיינים הזמינים מופיעה במאמר מאפייני שלבים.

כדי להסיר מאפיין אופציונלי, לוחצים על הלחצן הסרה. הסרה לצד המאפיין.

כדי להוסיף או להסיר רכיב לנכס מערך או ממנו, לוחצים על הלחצנים + או - ליד הרכיב.

מאפייני שלבים

לכל שלב יכולים להיות המאפיינים האופציונליים הבאים:

  • target – כתובת URL של היעד Chrome DevTools Protocol (CDP). מילת המפתח main שמוגדרת כברירת מחדל מתייחסת לדף הנוכחי.
  • assertedEvents יכול להיות רק אירוע אחד מסוג navigation.

מאפיינים נפוצים אחרים שזמינים לרוב סוגי השלבים הם:

  • frame - מערך של אינדקסים מבוססי אפס שמזהים iframe שיכול להיות מקונן. לדוגמה, תוכלו לזהות את ה-iframe הראשון (0) בתוך iframe שני (1) של היעד הראשי בתור [1, 0].
  • timeout – מספר אלפיות שנייה שצריך להמתין לפני שמבצעים שלב. מידע נוסף זמין במאמר התאמת זמן קצוב לתפוגה של שלבים.
  • selectors – מערך של בוררים. מידע נוסף זמין במאמר הסבר על סלקטורים.

המאפיינים הספציפיים לסוג הם:

סוג נכס חובה תיאור
click
doubleClick		 offsetX
offsetY		 יש. ביחס לפינה הימנית העליונה של תיבת התוכן של הרכיב, בפיקסלים
click
doubleClick		 button לחצן המצביע: ראשי | עזר | שני | חזרה | קדימה
change value יש. הערך הסופי
keyDown
keyUp		 key יש. שם מפתח
scroll x
y		 המיקומים המוחלטים של גלילה ב-x וב-y בפיקסלים, ברירת המחדל היא 0
navigate url יש. כתובת URL של יעד
waitForElement operator >= | == (ברירת מחדל) | <=
waitForElement count מספר הרכיבים שזוהו על ידי בורר
waitForElement attributes מאפיין HTML והערך שלו
waitForElement properties מאפיין JavaScript והערך שלו ב-JSON
waitForElement visible בוליאני. הערך הוא True אם הרכיב נמצא ב-DOM וגלוי (אין לו display: none או visibility: hidden)
waitForElement
waitForExpression		 asserted events כרגע רק type: navigation. אפשר לציין את הכותרת וכתובת ה-URL
waitForElement
waitForExpression		 timeout זמן המתנה מקסימלי באלפיות שנייה
waitForExpression expression יש. ביטוי JavaScript שמפנה ל-True
setViewport width
height		 יש. רוחב וגובה אזור התצוגה בפיקסלים
setViewport deviceScaleFactor יש. דומה ליחס הפיקסלים של המכשיר (DPR), ברירת המחדל היא 1
setViewport isMobile
hasTouch
isLandscape		 יש. דגלים בוליאניים שמציינים אם:
  • צריך להביא בחשבון את המטא תג
  • תמיכה באירועי מגע
  • תצוגה בפריסה לרוחב
    		•

    יש שני מאפיינים שגורמים להשהיית ההפעלה מחדש:

    • המאפיין waitForElement גורם להמתנה לנוכחות (או להיעדר) של מספר רכיבים שזוהו על ידי בורר. לדוגמה, השלב הבא ממתין עד שיהיו בדף פחות משלושה רכיבים שתואמים לבורר .my-class.

        "type": "waitForElement",
  "selectors": [".my-class"],
  "operator": "<=",
  "count": 2,

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

        "type": "waitForExpression",
  "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",

    התאמת זמן קצוב לתפוגה לצעדים

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

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

    כדי לשנות את ברירת המחדל של הזמן הקצוב לתפוגה בכל שלב בבת אחת:

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

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

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

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

    כדי לשנות את ברירת המחדל של זמן הקצאת הזמן בשלב ספציפי:

    1. מרחיבים את השלב ולוחצים על הוספת זמן קצוב לתפוגה.

      מוסיפים זמן קצוב לתפוגה.

    2. לוחצים על timeout: <value> ומגדירים את הערך באלפיות השנייה.

      מגדירים את ערך הזמן הקצוב לתפוגה.

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

    כדי להסיר מחיקה של זמן קצוב לתפוגה בשלב, לוחצים על הלחצן Deleteמחיקה. שלצידו.

    הסבר על הסלקטורים

    כשמתחילים הקלטה חדשה, אפשר להגדיר את הדברים הבאים:

    הגדרת הקלטה חדשה.

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

    • בקבוצת תיבות הסימון Selector types to record, בוחרים את סוגי הבוררים שרוצים לזהות באופן אוטומטי:

      • תיבת סימון. שירות CSS. בוררים תחביריים.
      • תיבת סימון. ARIA. בוררים סמנטיים.
      • תיבת סימון. טקסט. בוררים עם הטקסט הייחודי הקצר ביותר, אם יש כזה.
      • תיבת סימון. XPath. בוחרים שמשתמשים ב-XML Path Language.
      • תיבת סימון. Pierce סלקטורים שדומים לסלקטורים ב-CSS, אבל יכולים לחדור ל-DOM בצל.

    בוררי בדיקה נפוצים

    בדפי אינטרנט פשוטים, מאפייני id ומאפייני CSS class מספיקים כדי שמכשיר ההקלטה יוכל לזהות את הסלקטורים. עם זאת, יכול להיות שהדבר לא יקרה תמיד כי:

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

    לדוגמה, יכול להיות שערכי class של CSS ייווצרו באופן אוטומטי לאפליקציות שפותחו עם מסגרות JavaScript מודרניות (לדוגמה, React, Angular, Vue) ו-frameworks של CSS.

    מחלקות CSS שנוצרות באופן אוטומטי עם שמות אקראיים.

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

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

    • data-testid
    • data-test
    • data-qa
    • data-cy
    • data-test-id
    • data-qa-id
    • data-testing

    לדוגמה, אפשר לבדוק את האלמנט 'קפה' בדף הדגמה הזה ולראות את מאפייני הבדיקה:

    בוררי בדיקה מוגדרים.

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

    זוהתה בוררת בדיקות נפוצה.

    התאמה אישית של הבורר של ההקלטה

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

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

    להתאים אישית את הבורר של ההקלטה.

    מזינים כתובת אימייל ובודקים את ערך הבורר ([data-automate=email-address]).

    התוצאה של הבחירה בבורר מותאם אישית.

    עדיפות הבורר

    הרשומה מחפשת את הבוררים לפי הסדר הבא, בהתאם למאפיין בורר CSS בהתאמה אישית שציינתם:

    • אם מצוין:
      1. סלקטור ב-CSS עם מאפיין ה-CSS המותאם אישית שלכם.
      2. סלקטורים של XPath.
      3. בורר ARIA אם נמצא.
      4. בורר עם הטקסט הייחודי הקצר ביותר, אם הוא נמצא.
    • אם לא צוין:
      1. בורר ARIA אם הוא נמצא.
      2. סלקטורים ב-CSS עם העדיפות הבאה:
        1. המאפיינים הנפוצים ביותר לבדיקה:
          • data-testid
          • data-test
          • data-qa
          • data-cy
          • data-test-id
          • data-qa-id
          • data-testing
        2. מאפייני מזהה, למשל <div id="some_ID">.
        3. סלקטורים רגילים ב-CSS.
      3. סלקטורים של XPath.
      4. בוררי Pierce.
      5. אם נמצא, בורר עם הטקסט הייחודי הקצר ביותר.

    אפשר להשתמש במספר סלקטורים רגילים של CSS,‏ XPath ו-Pierce. מכשיר ההקלטה מתעד:

    • סלקטורים רגילים ב-CSS ו-XPath בכל רמת בסיס, כלומר מארחי צללים מקוננים, אם יש כאלה.
    • בוררים של תצוגה מפורטת ייחודיים לכל הרכיבים בתוך כל שורשי הצללים.