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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

הסבר והתאמה אישית של מקשי הקיצור

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ייצוא תהליך עבודה של משתמש

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

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

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

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

  • 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. כדאי לצפות בהדגמה הזו כדי לראות איך זה עובד.
  • מכשיר הקלטה של Chrome לשעון לילה אפשר להשתמש בו כדי להמיר קובצי JSON של זרימת משתמשים לסקריפטים לבדיקה של שעון הלילה.
  • CodeceptJS ל-Chrome Recorder. אפשר להשתמש בו כדי להמיר קובצי JSON של תהליך משתמש לסקריפטים של בדיקות ב-CodeceptJS.

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

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

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

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

האטת ההפעלה החוזרת

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

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

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

בדיקת הקוד

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

  1. פותחים הקלטה בחלונית מכשיר ההקלטה.
  2. לוחצים על הצגת הקוד בפינה השמאלית העליונה של רשימת השלבים. לחצן הצגת הקוד.
  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. לוחצים על לחצן שלוש הנקודות לחצן שלוש הנקודות. שלצד השלב לחיצה ובוחרים באפשרות הוספת שלב לפני. הוספת שלב לפני הקליק.
  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 יש. כתובת אתר של יעד
waitForElement operator >= | == (ברירת מחדל) | &lt;=
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. מרחיבים את השלב ולוחצים על הוספת זמן קצוב לתפוגה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    לדוגמה, ייתכן שהערכים של 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 בכל רמת root, כלומר מארחי צללים בתצוגת עץ, אם יש כאלה.
    • סלקטורים ייחודיים בין כל הרכיבים בתוך כל שורשי הצל.