DOM Path Finder pozwala najechać kursorem na dowolny element na stronie, aby odkryć jego unikalny selektor CSS, krótki selektor, XPath oraz gotowy do wklejenia fragment querySelector. Kliknij, aby zablokować element, a następnie nawiguj za pomocą przycisków Rodzic/Dziecko/Rodzeństwo. Niezbędne dla użytkowników Selenium, Puppeteer, Playwright i Cypress.
Pisanie testów automatycznych, scraperów internetowych czy bookmarkletów wymaga tworzenia selektorów — ale znalezienie stabilnego, unikalnego selektora dla konkretnego elementu jest żmudne. Zazwyczaj otwierasz DevTools, sprawdzasz element, klikasz prawym przyciskiem myszy, kopiujesz selektor i masz nadzieję, że wynik jest unikalny. DOM Path Finder sprowadza to do jednego kliknięcia. Aktywuj narzędzie i najedź na dowolny element — będzie podświetlany na fioletowo podczas ruchu. Kliknij, aby go zablokować, a panel wypełni się czterema formatami: unikalnym selektorem CSS opartym na ścieżce, krótkim selektorem (znacznik + klasy lub id), bezwzględnym XPath oraz gotowym fragmentem document.querySelector('...') do wklejenia do skryptu. Po zablokowaniu możesz nawigować po drzewie DOM za pomocą przycisków Rodzic / Pierwsze dziecko / Poprzednie rodzeństwo / Następne rodzeństwo bez utraty fokusu. Atrybuty data-testid są wykrywane i priorytetyzowane, co jest idealne dla Playwright/Cypress. Narzędzie pokazuje również znacznik, id, klasy, wymiary oraz właściwości display/position dla szybkiego kontekstu.
Poruszaj myszą nad stroną, aby zobaczyć elementy podświetlone na fioletowo. Kliknij, aby zablokować — bez otwierania inspektora DevTools.
Unikalna ścieżka CSS, krótki selektor, bezwzględny XPath i gotowy fragment querySelector. Wybierz to, co pasuje do Twoich narzędzi.
Po zablokowaniu używaj przycisków Rodzic / Pierwsze dziecko / Poprzednie / Następne, aby poruszać się po strukturze DOM bez ponownego wybierania.
Każdy selektor ma własny przycisk kopiowania. Pobierz format potrzebny dla Twojego skryptu i wklej go bezpośrednio do testu lub scrapera.
Wyświetla znacznik, id, klasy, rozmiar, typ wyświetlania i pozycję — szybki podgląd bez ponownej inspekcji.
Jeśli element ma id, unikalny CSS użyje #id. Jeśli obecny jest data-testid, zostanie on wyróżniony na potrzeby Playwright/Cypress.
Wybierz testowany element, skopiuj jego selektor i wklej do kodu testowego — koniec ze zgadywaniem unikalnych ścieżek.
Znajdź strukturalny selektor dla elementów listy na docelowej stronie. Użyj krótkiego lub pełnego selektora w zależności od potrzeb stabilności.
Zablokuj element i skopiuj jego ścieżkę, aby zbadać, dlaczego style CSS nie są stosowane — unikalny selektor pokazuje pełną lokalizację elementu w drzewie.
Skopiuj gotowy fragment document.querySelector(...) bezpośrednio do konsoli DevTools w celu szybkiego interaktywnego debugowania.
Podczas audytu dostępności używaj XPath, aby przekazać elementy do axe-core lub innych narzędzi a11y oczekujących referencji XPath.
Kliknij ikonę Path Finder w panelu DevSuite Pro. Narzędzie natychmiast aktywuje się w trybie wybierania.
Poruszaj myszą nad stroną — każdy element podświetla się na fioletowo. Przewijaj stronę, aby znaleźć swój cel.
Kliknij wybrany element. Wybieranie zostanie zatrzymane, a panel wypełni się formatami selektorów, kontekstem i przyciskami kopiowania.
Użyj przycisków Rodzic/Dziecko/Rodzeństwo, aby doprecyzować wybór, lub kliknij „Pick Element”, aby zacząć od nowa.
Kliknij Kopiuj obok potrzebnego formatu (CSS, XPath lub querySelector). Wklej bezpośrednio do testu, scrapera lub konsoli.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 64 narzędzi programistycznych dla swojej przeglądarki.
