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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שיתוף זרימות משתמש

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

ייצוא של זרימת משתמש

כדי לייצא זרימת משתמש:

  1. פותחים את תהליך המשתמש שרוצים לייצא.
  2. בחלק העליון של החלונית מכשיר ההקלטה לוחצים על הורדת קובץ ייצוא. אפשרויות של פורמט ייצוא.
  3. בוחרים באחד מהפורמטים הבאים מהרשימה הנפתחת:
    • קובץ JSON. מורידים את ההקלטה כקובץ JSON.
    • @puppeteer/replay. להוריד את ההקלטה כסקריפט של הפעלה מחדש של הבובה תיאטרון.
    • בובת תיאטרון. להוריד את ההקלטה כסקריפט של Puppeteer.
    • Puppeteer (כולל ניתוח Lighthouse). להוריד את ההקלטה כסקריפט של Puppeteer עם ניתוח מוטמע של Lighthouse.
    • אפשרות אחת או יותר שסופקו על ידי תוסף הייצוא של מכשיר ההקלטה.
  4. שומרים את הקובץ.

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

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

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

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

    # npm i puppeteer lighthouse
node your_export.js

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

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

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

ייבוא זרימת משתמש

כדי לייבא זרימת משתמש:

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

הפעלה מחדש עם ספריות חיצוניות

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

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

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

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

הפעלה מחדש של תהליכי עבודה של משתמש JSON:

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

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

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

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

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

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

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

בדיקת הקוד

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

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

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

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

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

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

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

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

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

עריכת השלבים

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

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

הוספת שלבים

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

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

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

הוספה של טענות נכונות (assertions)

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

  1. אפשר להקליט, למשל, בדף ההדגמה הזה.

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

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

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

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

  4. צריך להגדיר את השלב אבל לא לשנות את הסוג waitForElement שלו. לדוגמה:

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

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

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

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

העתקת השלבים

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

  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. לחץ על הלחצנים המתאימים כדי להוסיף מאפיינים אופציונליים לסוג ספציפי ולציין אותם.

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

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

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

מאפייני שלב

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

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

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

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

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

סוג מאפיין (property) חובה תיאור
click
doubleClick		 offsetX
offsetY		 המחאה. ביחס לפינה הימנית העליונה של תיבת התוכן של הרכיב, בפיקסלים
click
doubleClick		 button לחצן המצביע: ראשי | עזר | שני | אחורה | קדימה
change value המחאה. ערך סופי
keyDown
keyUp		 key המחאה. שם מפתח
scroll x
y		 מיקומי x ו-y מוחלטים בפיקסלים, ברירת המחדל היא 0
navigate 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. לוחצים על הפעלה מחדש.הפעלה מחדש כדי לראות את השלב שבו הזמן הקצוב פג.

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

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

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

    מתבצעת הגדרה של הקלטה חדשה.

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

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

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

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

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

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

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

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

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