Το DOM Path Finder σάς επιτρέπει να περνάτε το ποντίκι πάνω από οποιοδήποτε στοιχείο σε μια σελίδα για να αποκαλύψετε τον μοναδικό CSS selector του, έναν σύντομο selector, το XPath και ένα έτοιμο για επικόλληση απόσπασμα querySelector. Κάντε κλικ για να κλειδώσετε το στοιχείο, και μετά πλοηγηθείτε με τα κουμπιά Parent/Child/Sibling. Απαραίτητο για χρήστες Selenium, Puppeteer, Playwright και Cypress.
Η συγγραφή αυτοματοποιημένων tests, web scrapers ή bookmarklets σημαίνει συγγραφή selectors — αλλά το να βρεις έναν σταθερό, μοναδικό selector για ένα συγκεκριμένο στοιχείο είναι κουραστικό. Ανοίγεις τα DevTools, κάνεις inspect, δεξί κλικ, copy selector, και ελπίζεις ότι το αποτέλεσμα είναι πραγματικά μοναδικό και σταθερό. Το DOM Path Finder το κάνει αυτό με ένα μόνο κλικ. Ενεργοποιήστε το εργαλείο και περάστε το ποντίκι πάνω από οποιοδήποτε στοιχείο της σελίδας — φωτίζεται μοβ καθώς κινείστε. Κάντε κλικ για να το κλειδώσετε, και το panel γεμίζει με τέσσερις μορφές selector: έναν μοναδικό CSS selector βασισμένο σε path, έναν σύντομο selector (tag + κλάσεις ή id), ένα απόλυτο XPath, και ένα προ-τυλιγμένο απόσπασμα document.querySelector('...') έτοιμο για επικόλληση σε ένα script. Μόλις κλειδώσει, μπορείτε να πλοηγηθείτε στο δέντρο DOM με τα κουμπιά Parent / First Child / Prev Sibling / Next Sibling χωρίς να χάσετε την εστίαση. Τα χαρακτηριστικά data-testid εντοπίζονται και προτεραιοποιούνται όταν υπάρχουν — ιδανικό για χρήστες Playwright/Cypress που τα χρησιμοποιούν ως αγκυρώσεις. Το εργαλείο δείχνει επίσης tag, id, κλάσεις, μέγεθος οριοθέτησης, και ιδιότητες display/position για γρήγορο πλαίσιο.
Μετακινήστε το ποντίκι σας πάνω από τη σελίδα για να δείτε τα στοιχεία να φωτίζονται μοβ. Κάντε κλικ για κλείδωμα — χωρίς να χρειάζεται το DevTools Inspector.
Μοναδικό CSS path, σύντομος selector, απόλυτο XPath, και τυλιγμένο απόσπασμα querySelector. Επιλέξτε ό,τι ταιριάζει στα εργαλεία σας.
Μόλις κλειδώσει, χρησιμοποιήστε τα κουμπιά Parent / First Child / Prev / Next για να κινηθείτε στο DOM χωρίς επανεπιλογή.
Κάθε selector έχει το δικό του κουμπί Copy. Πάρτε τη μορφή που χρειάζεται το script σας και επικολλήστε απευθείας στο test ή τον scraper σας.
Εμφανίζει tag, id, κλάσεις, μέγεθος, display και position — γρήγορη επισκόπηση χωρίς επανεπιθεώρηση.
Αν το στοιχείο έχει id, ο μοναδικός CSS χρησιμοποιεί #id. Αν υπάρχει data-testid, εμφανίζεται για χρήση σε Playwright/Cypress.
Επιλέξτε το στοιχείο υπό δοκιμή, αντιγράψτε τον selector του, και επικολλήστε στον κώδικα του test σας — τέλος στο μάντεμα μοναδικών paths.
Βρείτε τον δομικό selector για στοιχεία λίστας σε έναν στόχο scraping. Χρησιμοποιήστε σύντομο ή βασισμένο σε path selector ανάλογα με τις ανάγκες σταθερότητας.
Κλειδώστε ένα στοιχείο και αντιγράψτε το path του για να διερευνήσετε γιατί δεν εφαρμόζεται το CSS — ο μοναδικός selector δείχνει την πλήρη θέση του στοιχείου στο δέντρο.
Αντιγράψτε το προ-τυλιγμένο απόσπασμα document.querySelector(...) απευθείας στην κονσόλα DevTools για γρήγορη διαδραστική αποσφαλμάτωση.
Κατά τον έλεγχο προσβασιμότητας, χρησιμοποιήστε το XPath για να τροφοδοτήσετε στοιχεία στο axe-core ή άλλα εργαλεία a11y που περιμένουν αναφορές XPath.
Κάντε κλικ στο εικονίδιο Path Finder στο dock του DevSuite Pro. Το εργαλείο ενεργοποιείται αμέσως σε λειτουργία επιλογής.
Μετακινήστε το ποντίκι σας πάνω από τη σελίδα — κάθε στοιχείο φωτίζεται μοβ καθώς περνάτε από πάνω του. Κάντε scroll όσο χρειάζεται για να βρείτε τον στόχο σας.
Κάντε κλικ στο στοιχείο που θέλετε. Ο επιλογέας σταματά και το panel γεμίζει με μορφές selector, πλαίσιο και κουμπιά αντιγραφής.
Χρησιμοποιήστε τα κουμπιά Parent/Child/Sibling για να βελτιώσετε την επιλογή, ή κάντε κλικ στο Pick Element για να ξεκινήσετε ξανά την επιλογή με hover.
Κάντε κλικ στο Copy δίπλα στη μορφή που χρειάζεστε (CSS, XPath, ή querySelector). Επικολλήστε απευθείας στο test, τον scraper, ή την κονσόλα σας.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 64+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
