מוצא נתיבי DOM (DOM Path Finder) מאפשר לך לרחף מעל כל אלמנט בדף כדי לחשוף את בורר ה-CSS הייחודי שלו, בורר קצר, XPath, וקטע קוד querySelector מוכן להדבקה. לחץ כדי לנעול את האלמנט, ואז נווט עם כפתורי הורה/ילד/אח. חיוני למשתמשי Selenium, Puppeteer, Playwright ו-Cypress.
כתיבת בדיקות אוטומטיות, בוטים (Scrapers) או סימניות פירושה כתיבת בוררים (Selectors) - אך מציאת בורר יציב וייחודי לאלמנט ספציפי היא עבודה מתישה. אתה פותח את כלי המפתחים (DevTools), בודק, לוחץ קליק ימני, מעתיק בורר, ומקווה שהתוצאה אכן ייחודית ויציבה. מוצא נתיבי DOM הופך את זה ללחיצה אחת. הפעל את הכלי ורחף מעל כל אלמנט בדף - הוא מודגש בסגול בזמן שאתה זז. לחץ כדי לנעול אותו, והחלונית מתמלאת בארבעה פורמטים של בוררים: בורר CSS ייחודי מבוסס-נתיב, בורר קצר (תג + מחלקות או מזהה id), XPath מוחלט, וקטע קוד document.querySelector('...') עטוף ומוכן להדבקה בסקריפט. לאחר הנעילה, ניתן לנווט בעץ ה-DOM עם כפתורי הורה / ילד ראשון / אח קודם / אח הבא מבלי לאבד את המיקוד. תכונות data-testid מזוהות ומקבלות עדיפות כשהן קיימות - אידיאלי עבור Playwright/Cypress שמשתמשים בהן כעוגנים. הכלי מציג גם תג, מזהה, מחלקות, גודל תוחם ומאפייני תצוגה/מיקום להקשר מהיר.
הזז את העכבר מעל הדף כדי לראות אלמנטים מודגשים בסגול. לחץ לנעילה - אין צורך ב-DevTools Inspector.
נתיב CSS ייחודי, בורר קצר, XPath מוחלט וקטע קוד querySelector עטוף. בחר את מה שמתאים לכלים שלך.
לאחר הנעילה, השתמש בכפתורי הורה / ילד ראשון / קודם / הבא כדי לנוע ב-DOM מבלי לבחור מחדש.
לכל בורר יש כפתור 'העתק' משלו. קח את הפורמט שהסקריפט שלך צריך והדבק ישירות לבדיקה או לבוט (Scraper) שלך.
מציג תג, מזהה (id), מחלקות (classes), גודל, תצוגה ומיקום - סקירה מהירה ללא בדיקה מחדש.
אם לאלמנט יש מזהה, ה-CSS הייחודי משתמש ב-id#. אם קיים data-testid, הוא מובלט לשימוש ב-Playwright/Cypress.
בחרו את האלמנט הנבדק, העתיקו את הבורר שלו והדביקו אותו בקוד הבדיקה שלכם - לא עוד ניחוש נתיבים ייחודיים.
מצאו את הבורר המבני עבור פריטי רשימה ביעד הגירוד. השתמשו בבורר קצר או מבוסס-נתיב בהתאם לצורכי היציבות.
נעלו אלמנט והעתיקו את הנתיב שלו כדי לחקור מדוע CSS לא חל עליו - הבורר הייחודי מציג את מיקום העץ המלא של האלמנט.
העתיקו את קטע הקוד של document.querySelector(...) היישר למסוף (Console) ה-DevTools לניפוי שגיאות אינטראקטיבי ומהיר.
בעת ביקורת נגישות, השתמשו ב-XPath כדי להזין אלמנטים ל-axe-core או לכלים אחרים של A11y המצפים להפניות XPath.
לחצו על סמל Path Finder ב-DevSuite Pro. הכלי מופעל מיד במצב בחירה.
הזיזו את העכבר מעל הדף - כל אלמנט מודגש בסגול בזמן שאתם עוברים מעליו. גללו לפי הצורך כדי למצוא את היעד.
לחצו על האלמנט שאתם רוצים. הבוחר עוצר והחלונית מתמלאת בפורמטים של בוררים, הקשר וכפתורי העתקה.
השתמשו בכפתורי הורה/ילד/אח (Parent/Child/Sibling) כדי לחדד את הבחירה, או לחצו על 'בחר אלמנט' כדי להתחיל בחירה בריחוף שוב.
לחצו על 'העתק' ליד הפורמט שאתם צריכים (CSS, XPath או querySelector). הדביקו ישירות לבדיקה, לבוט או למסוף שלכם.
התקן את DevSuite Pro בחינם ופתח 64+ כלי פיתוח לדפדפן שלך.
