DOM Ceļa Meklētājs ļauj novietot kursoru virs jebkura lapas elementa, lai atklātu tā unikālo CSS selektoru, īso selektoru, XPath un lietošanai gatavu querySelector fragmentu. Noklikšķiniet, lai fiksētu elementu, tad naviģējiet ar Parent/Child/Sibling pogām. Neaizstājams Selenium, Puppeteer, Playwright un Cypress lietotājiem.
Rakstot automatizācijas testus, web skraperus vai bookmarklets, nepieciešams rakstīt selektorus — taču stabila, unikāla selektora atrašana konkrētam elementam ir laikietilpīga. Jūs atverat DevTools, pārbaudāt, noklikšķināt ar labo peles pogu, kopējat selektoru un ceriet, ka rezultāts patiešām ir unikāls un stabils. DOM Ceļa Meklētājs to padara par vienu klikšķi. Aktivizējiet rīku un novietojiet kursoru virs jebkura lapas elementa — tas iekrāsojas violets, kamēr pārvietojaties. Noklikšķiniet, lai to fiksētu, un panelis aizpildās ar četriem selektoru formātiem: unikālu, uz ceļa balstītu CSS selektoru, īsu selektoru (tags + klases vai id), absolūtu XPath un iepriekš ietītu document.querySelector('...') fragmentu, kas gatavs ielīmēšanai skriptā. Pēc fiksēšanas varat naviģēt DOM koku ar Parent / First Child / Prev Sibling / Next Sibling pogām, nezaudējot fokusu. Data-testid atribūti tiek atklāti un prioritizēti, ja tādi ir — ideāli piemēroti Playwright/Cypress lietotājiem, kas tos izmanto kā enkurus. Rīks arī parāda tagu, id, klases, robežizmēru un display/position īpašības ātrai kontekstualizācijai.
Pārvietojiet peli pa lapu, lai redzētu elementus iekrāsojamies violetus. Noklikšķiniet, lai fiksētu — DevTools Inspector nav vajadzīgs.
Unikāls CSS ceļš, īsais selektors, absolūts XPath un ietīts querySelector fragments. Izvēlieties to, kas atbilst jūsu darbarīkiem.
Pēc fiksēšanas izmantojiet Parent / First Child / Prev / Next pogas, lai pārvietotos pa DOM, neatlasot no jauna.
Katram selektoram ir sava Copy poga. Iegūstiet skriptam nepieciešamo formātu un ielīmējiet to tieši savā testā vai skraperī.
Parāda tagu, id, klases, izmēru, display un position — ātrs pārskats bez atkārtotas pārbaudes.
Ja elementam ir id, unikālais CSS izmanto #id. Ja ir data-testid, tas tiek izcelts Playwright/Cypress lietošanai.
Atlasiet testējamo elementu, kopējiet tā selektoru un ielīmējiet sava testa kodā — vairs nav jāmin unikālie ceļi.
Atrodiet strukturālo selektoru saraksta vienumiem skrāpēšanas mērķī. Izmantojiet īso vai uz ceļa balstīto selektoru atkarībā no stabilitātes vajadzībām.
Fiksējiet elementu un kopējiet tā ceļu, lai izmeklētu, kāpēc CSS netiek piemērots — unikālais selektors parāda elementa pilnu atrašanās vietu kokā.
Kopējiet iepriekš ietīto document.querySelector(...) fragmentu tieši DevTools konsolē ātrai interaktīvai atkļūdošanai.
Auditējot pieejamību, izmantojiet XPath, lai padotu elementus axe-core vai citiem a11y rīkiem, kas sagaida XPath atsauces.
Noklikšķiniet uz Path Finder ikonas DevSuite Pro dokā. Rīks uzreiz aktivizējas atlases režīmā.
Pārvietojiet peli pa lapu — katrs elements iekrāsojas violets, kamēr pārvietojaties virs tā. Ritiniet pēc vajadzības, lai atrastu mērķi.
Noklikšķiniet uz vēlamā elementa. Atlase apstājas, un panelis aizpildās ar selektoru formātiem, kontekstu un kopēšanas pogām.
Izmantojiet Parent/Child/Sibling pogas, lai precizētu atlasi, vai noklikšķiniet Pick Element, lai sāktu atlasi ar kursoru no jauna.
Noklikšķiniet Copy pie nepieciešamā formāta (CSS, XPath vai querySelector). Ielīmējiet tieši savā testā, skraperī vai konsolē.
Instalējiet DevSuite Pro bez maksas un atbloķējiet 64+ izstrādātāju rīkus savam pārlūkam.
