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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

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

הלחצן 'הצגת מקשי הקיצור'.

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

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

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

בחלונית התיעוד של DevTools יש תפריט נפתח בכותרת שמאפשר לבחור תהליך משתמש לעריכה.

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

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

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

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

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

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

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

שיתוף תהליכי המשתמש

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

ייצוא של מסלול משתמש

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

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

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

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

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

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

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

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

  • JSON. עורכים את אובייקט ה-JSON שקריא לבני אדם וimport את קובץ ה-JSON בחזרה ל-Recorder.
  • @puppeteer/replay. מפעילים מחדש את הסקריפט באמצעות הספרייה Puppeteer Replay. כשמייצאים כסקריפט @puppeteer/replay, השלבים נשארים כאובייקט JSON. האפשרות הזו מושלמת אם אתם רוצים לשלב את הכלי בצינור עיבוד הנתונים של CI/CD, אבל עדיין רוצים ליהנות מהגמישות של עריכת השלבים כ-JSON, ולאחר מכן להמיר אותם ולייבא אותם חזרה ל-Recorder.
  • סקריפט 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 של תהליך משתמש לסקריפטים של בדיקות Nightwatch.
  • CodeceptJS Chrome Recorder. אפשר להשתמש בו כדי להמיר קובצי JSON של תהליך משתמש לסקריפטים של בדיקות ב-CodeceptJS.

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

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

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

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

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

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

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

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

בדיקת הקוד

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

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

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

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

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

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

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

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

  1. מעבירים את העכבר מעל העיגול שלב. לצד שלב כלשהו בהקלטה. העיגול הופך לסמל של נקודת עצירה נקודת עצירה (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.

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

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

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

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

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

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

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

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

העתקת השלבים

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

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

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

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

הסרת שלבים

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

מסירים שלב.

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

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

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

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

שלבי ההגדרה

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

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

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

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

    מגדירים שלב.

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

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

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

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

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

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

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

  • frame – מערך של אינדקסים שמתחילים באפס ומזהים iframe שאפשר להטמיע בתוך 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. בתיבה Timeout, מגדירים את ערך הזמן הקצוב לתפוגה באלפיות שנייה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    לדוגמה, ייתכן שהערכים של class ב-CSS נוצרים באופן אוטומטי באפליקציות שפותחו באמצעות מסגרות JavaScript מודרניות (למשל, React, ‏ Angular, ‏ Vue) ומסגרות 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 בכל רמת root, כלומר מארחי צללים בתצוגת עץ, אם יש כאלה.
    • בוררים של תצוגה מפורטת ייחודיים לכל הרכיבים בתוך כל שורשי הצל.