Vyhľadávač DOM Cesty umožňuje prejsť kurzorom nad akýkoľvek prvok na stránke a zobraziť jeho jedinečný CSS selektor, krátky selektor, XPath a pripravený úryvok querySelector na vloženie. Kliknutím prvok uzamknete a následne sa pohybujete pomocou tlačidiel Rodič/Dieťa/Súrodenec. Nevyhnutný nástroj pre používateľov Selenium, Puppeteer, Playwright a Cypress.
Písanie automatizovaných testov, web scraperov alebo bookmarkletov znamená písať selektory — ale zistiť stabilný, jedinečný selektor pre konkrétny prvok je zdĺhavé. Otvoríte DevTools, inšpektor, kliknete pravým tlačidlom, skopírujete selektor a dúfate, že výsledok je naozaj jedinečný a stabilný. Vyhľadávač DOM Cesty to zvládne na jedno kliknutie. Aktivujte nástroj a prejdite kurzorom nad akýkoľvek prvok na stránke — pri pohybe sa zvýrazní fialovou farbou. Kliknutím ho uzamknete a panel sa naplní štyrmi formátmi selektora: jedinečný CSS selektor založený na ceste, krátky selektor (tag + triedy alebo id), absolútny XPath a vopred pripravený úryvok document.querySelector('...') pripravený na vloženie do skriptu. Po uzamknutí sa môžete pohybovať v DOM strome pomocou tlačidiel Rodič / Prvé dieťa / Predchádzajúci súrodenec / Nasledujúci súrodenec bez straty zamerania. Atribúty data-testid sú rozpoznané a uprednostnené, ak sú prítomné — ideálne pre používateľov Playwright/Cypress, ktorí ich používajú ako kotviace body. Nástroj tiež zobrazuje tag, id, triedy, veľkosť ohraničujúceho rámca a vlastnosti display/position pre rýchly kontext.
Pohybujte myšou po stránke a sledujte, ako sa prvky zvýrazňujú fialovou farbou. Kliknutím uzamknete — bez potreby DevTools Inšpektora.
Jedinečná CSS cesta, krátky selektor, absolútny XPath a zabalený úryvok querySelector. Vyberte si formát, ktorý vyhovuje vašim nástrojom.
Po uzamknutí použite tlačidlá Rodič / Prvé dieťa / Predchádzajúci / Nasledujúci na pohyb po DOM bez opätovného výberu.
Každý selektor má vlastné tlačidlo Kopírovať. Získajte formát, ktorý váš skript potrebuje, a vložte priamo do testu alebo scrapera.
Zobrazuje tag, id, triedy, veľkosť, display a position — rýchly prehľad bez opätovnej inšpekcie.
Ak má prvok id, jedinečný CSS selektor použije #id. Ak je prítomný data-testid, zobrazí sa pre použitie v Playwright/Cypress.
Vyberte testovaný prvok, skopírujte jeho selektor a vložte do kódu testu — už žiadne hádanie jedinečných ciest.
Nájdite štrukturálny selektor pre položky zoznamu na scrapovanom cieli. Použite krátky alebo cestový selektor podľa požadovanej stability.
Uzamknite prvok a skopírujte jeho cestu, aby ste zistili, prečo sa CSS neaplikuje — jedinečný selektor ukazuje presné umiestnenie prvku v strome.
Skopírujte vopred pripravený úryvok document.querySelector(...) priamo do konzoly DevTools pre rýchle interaktívne ladenie.
Pri audite prístupnosti použite XPath na odovzdanie prvkov do axe-core alebo iných nástrojov pre a11y, ktoré očakávajú XPath referencie.
Kliknite na ikonu Path Finder v dokovacej lište DevSuite Pro. Nástroj sa okamžite aktivuje v režime výberu.
Pohybujte myšou po stránke — každý prvok sa zvýrazní fialovou farbou, keď nad ním prejdete. Podľa potreby posúvajte stránku, aby ste našli svoj cieľ.
Kliknite na prvok, ktorý chcete. Výber sa zastaví a panel sa naplní formátmi selektora, kontextom a tlačidlami na kopírovanie.
Použite tlačidlá Rodič/Dieťa/Súrodenec na spresnenie výberu, alebo kliknite na Vybrať Prvok pre opätovný výber prejdením kurzorom.
Kliknite na Kopírovať vedľa formátu, ktorý potrebujete (CSS, XPath alebo querySelector). Vložte priamo do testu, scrapera alebo konzoly.
Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 64 vývojárskych nástools pre váš prehliadač.
