DOM Path Finder leidžia užvesti pelę ant bet kurio puslapio elemento ir pamatyti jo unikalų CSS selektorių, trumpąjį selektorių, XPath ir paruoštą įklijuoti querySelector fragmentą. Spustelėkite, kad užfiksuotumėte elementą, tada naršykite naudodami Parent/Child/Sibling mygtukus. Būtinas Selenium, Puppeteer, Playwright ir Cypress naudotojams.
Rašant automatizuotus testus, žiniatinklio duomenų rinkimo įrankius (scraperius) ar bookmarkletus, tenka rašyti selektorius – tačiau surasti stabilų, unikalų konkretaus elemento selektorių yra varginantis darbas. Atidarote DevTools, tikrinate, spaudžiate dešiniuoju pelės klavišu, kopijuojate selektorių ir tikitės, kad rezultatas iš tiesų yra unikalus ir stabilus. DOM Path Finder tai paverčia vienu paspaudimu. Aktyvuokite įrankį ir užveskite pelę ant bet kurio puslapio elemento – jis pažymimas violetine spalva, kai judate. Spustelėkite, kad užfiksuotumėte, ir skydelyje atsiras keturi selektorių formatai: unikalus, keliu pagrįstas CSS selektorius, trumpasis selektorius (žymė + klasės arba id), absoliutus XPath ir iš anksto suvyniotas document.querySelector('...') fragmentas, paruoštas įklijuoti į scenarijų. Užfiksavę galite naršyti DOM medį naudodami Parent / First Child / Prev Sibling / Next Sibling mygtukus, neprarasdami fokuso. Data-testid atributai aptinkami ir suteikiamas prioritetas, kai jie yra – idealiai tinka Playwright/Cypress naudotojams, kurie juos naudoja kaip inkarus. Įrankis taip pat rodo žymę, id, klases, ribojantį dydį ir display/position savybes greitam kontekstui.
Vedžiokite pelę per puslapį, kad matytumėte elementus, pažymėtus violetine spalva. Spustelėkite, kad užfiksuotumėte – nereikia DevTools Inspector.
Unikalus CSS kelias, trumpasis selektorius, absoliutus XPath ir suvyniotas querySelector fragmentas. Pasirinkite tą, kuris tinka jūsų įrankiams.
Užfiksavę naudokite Parent / First Child / Prev / Next mygtukus, kad judėtumėte per DOM be pakartotinio rinkimosi.
Kiekvienas selektorius turi savo Copy mygtuką. Pasiimkite formatą, kurio reikia jūsų scenarijui, ir įklijuokite tiesiai į testą ar scraperį.
Rodo žymę, id, klases, dydį, display ir position – greita apžvalga be pakartotinio tikrinimo.
Jei elementas turi id, unikaliame CSS naudojamas #id. Jei yra data-testid, jis iškeliamas Playwright/Cypress naudojimui.
Pasirinkite testuojamą elementą, nukopijuokite jo selektorių ir įklijuokite į testo kodą – daugiau nereikės spėlioti unikalių kelių.
Raskite struktūrinį sąrašo elementų selektorių scraper'io taikinyje. Naudokite trumpąjį arba keliu pagrįstą selektorių, priklausomai nuo stabilumo poreikių.
Užfiksuokite elementą ir nukopijuokite jo kelią, kad išsiaiškintumėte, kodėl CSS netaikomas – unikalus selektorius rodo pilną elemento vietą medyje.
Nukopijuokite iš anksto suvyniotą document.querySelector(...) fragmentą tiesiai į DevTools konsolę greitam interaktyviam derinimui.
Atliekant prieinamumo auditą, naudokite XPath, kad pateiktumėte elementus axe-core ar kitiems a11y įrankiams, kurie tikisi XPath nuorodų.
Spustelėkite Path Finder piktogramą DevSuite Pro doke. Įrankis iškart aktyvuojamas rinkimosi režimu.
Vedžiokite pelę per puslapį – kiekvienas elementas pažymimas violetine spalva, kai per jį pereinate. Slinkite pagal poreikį, kad rastumėte savo taikinį.
Spustelėkite norimą elementą. Parinkiklis sustoja, o skydelis užpildomas selektorių formatais, kontekstu ir kopijavimo mygtukais.
Naudokite Parent/Child/Sibling mygtukus, kad patikslintumėte pasirinkimą, arba spustelėkite Pick Element, kad vėl pradėtumėte rinktis užvedant pelę.
Spustelėkite Copy šalia reikiamo formato (CSS, XPath arba querySelector). Įklijuokite tiesiai į savo testą, scraperį ar konsolę.
Įdiekite „DevSuite Pro“ nemokamai ir atrakinkite 64+ kūrėjų įrankius savo naršyklei.
