DOM Path Finder umožňuje najet myší na libovolný prvek stránky a zobrazit jeho unikátní CSS selektor, krátký selektor, XPath a připravený úryvek querySelector pro rychlé vložení. Kliknutím prvek uzamknete a poté se pohybujete pomocí tlačítek Parent/Child/Sibling. Nezbytný nástroj pro uživatele Selenia, Puppeteeru, Playwrightu a Cypressu.
Psaní automatizovaných testů, web scraperů nebo bookmarkletů znamená psát selektory — ale zjistit stabilní, unikátní selektor pro konkrétní prvek bývá zdlouhavé. Otevřete DevTools, prohlédnete prvek, kliknete pravým tlačítkem, zkopírujete selektor a doufáte, že výsledek je skutečně unikátní a stabilní. DOM Path Finder to zvládne na jedno kliknutí. Aktivujte nástroj a najeďte myší na libovolný prvek stránky — při pohybu se zvýrazňuje fialově. Kliknutím jej uzamknete a panel se naplní čtyřmi formáty selektoru: unikátním CSS selektorem založeným na cestě, krátkým selektorem (tag + třídy nebo id), absolutním XPath a předpřipraveným úryvkem document.querySelector('...') připraveným ke vložení do skriptu. Po uzamčení se můžete pohybovat po DOM stromu pomocí tlačítek Parent / First Child / Prev Sibling / Next Sibling, aniž byste ztratili zaměření. Atributy data-testid jsou automaticky detekovány a upřednostněny, pokud jsou přítomny — ideální pro uživatele Playwrightu/Cypressu, kteří je používají jako kotvy. Nástroj také zobrazuje tag, id, třídy, velikost ohraničujícího rámečku a vlastnosti display/position pro rychlý kontext.
Pohybujte myší po stránce a sledujte prvky zvýrazněné fialově. Kliknutím uzamknete — bez nutnosti DevTools Inspectoru.
Unikátní CSS cesta, krátký selektor, absolutní XPath a zabalený úryvek querySelector. Vyberte, co vyhovuje vašemu nástroji.
Po uzamčení použijte tlačítka Parent / First Child / Prev / Next pro pohyb v DOM bez nutnosti nového výběru.
Každý selektor má vlastní tlačítko Copy. Vezměte formát, který váš skript potřebuje, a vložte jej přímo do testu nebo scraperu.
Zobrazuje tag, id, třídy, velikost, display a position — rychlý přehled bez opětovné kontroly.
Pokud má prvek id, unikátní CSS selektor použije #id. Pokud je přítomen data-testid, je zvýrazněn pro použití v Playwrightu/Cypressu.
Vyberte testovaný prvek, zkopírujte jeho selektor a vložte do testovacího kódu — už žádné hádání unikátních cest.
Najděte strukturální selektor pro položky seznamu na scrapovaném webu. Podle potřeby stability použijte krátký nebo cestový selektor.
Uzamkněte prvek a zkopírujte jeho cestu, abyste zjistili, proč se CSS neaplikuje — unikátní selektor ukazuje přesné umístění prvku ve stromu.
Zkopírujte předpřipravený úryvek document.querySelector(...) přímo do konzole DevTools pro rychlé interaktivní ladění.
Při auditu přístupnosti použijte XPath k předání prvků do axe-core nebo jiných nástrojů pro přístupnost, které očekávají XPath odkazy.
Klikněte na ikonu Path Finder v docku DevSuite Pro. Nástroj se okamžitě aktivuje v režimu výběru.
Pohybujte myší po stránce — každý prvek se při přejetí zvýrazní fialově. Podle potřeby scrollujte, abyste našli požadovaný cíl.
Klikněte na požadovaný prvek. Výběr se zastaví a panel se naplní formáty selektoru, kontextem a tlačítky pro kopírování.
Použijte tlačítka Parent/Child/Sibling pro upřesnění výběru, nebo klikněte na Pick Element a začněte výběr myší znovu.
Klikněte na Copy vedle formátu, který potřebujete (CSS, XPath nebo querySelector). Vložte přímo do testu, scraperu nebo konzole.
Nainstalujte si DevSuite Pro zdarma a odemkněte 64+ vývojářských nástrojů pro svůj prohlížeč.
