DOM-polun etsijä (DOM Path Finder) antaa sinun viedä hiiren minkä tahansa elementin päälle sivulla paljastaaksesi sen yksilöllisen CSS-valitsimen, lyhyen valitsimen, XPathin ja valmiina liitettävän querySelector-katkelman. Napsauta lukitaksesi elementin ja navigoi sitten Vanhempi/Lapsi/Sisar-painikkeilla. Välttämätön Seleniumin, Puppeteerin, Playwrightin ja Cypressin käyttäjille.
Automaatiotestien, verkkokaapimien tai kirjanmerkkisovellusten kirjoittaminen tarkoittaa valitsimien kirjoittamista — mutta vakaan ja yksilöllisen valitsimen selvittäminen tietylle elementille on työlästä. Avaat kehittäjän työkalut, tarkastelet, napsautat hiiren kakkospainikkeella, kopioit valitsimen ja toivot, että tulos on todella yksilöllinen ja vakaa. DOM-polun etsijä tekee tästä yhden napsautuksen asian. Aktivoi työkalu ja vie hiiri minkä tahansa elementin päälle sivulla — se korostuu purppurana liikkuessasi. Napsauta lukitaksesi sen, ja paneeli täyttyy neljällä valitsimen muodolla: yksilöllinen polkuun perustuva CSS-valitsin, lyhyt valitsin (tunniste + luokat tai id), absoluuttinen XPath ja valmiiksi paketoitu document.querySelector('...') -katkelma valmiina liitettäväksi skriptiin. Kun elementti on lukittu, voit navigoida DOM-puussa Vanhempi / Ensimmäinen lapsi / Edellinen sisar / Seuraava sisar -painikkeilla kadottamatta kohdistusta. Data-testid -attribuutit tunnistetaan ja niille annetaan etusija, kun ne ovat läsnä — ihanteellinen Playwrightille/Cypressille, jotka käyttävät niitä ankkureina. Työkalu näyttää nopeaa kontekstia varten myös tunnisteen, id:n, luokat, rajoittavan koon sekä näyttö/sijainti-ominaisuudet (display/position).
Liikuta hiirtäsi sivulla nähdäksesi elementtien korostuvan purppurana. Napsauta lukitaksesi — kehittäjän työkalujen tarkastajaa (DevTools Inspector) ei tarvita.
Yksilöllinen CSS-polku, lyhyt valitsin, absoluuttinen XPath ja valmiiksi paketoitu querySelector-katkelma. Valitse työkaluihisi sopiva.
Kun elementti on lukittu, käytä Vanhempi / Ensimmäinen lapsi / Edellinen / Seuraava -painikkeita liikkuaksesi DOMissa valitsematta elementtiä uudelleen.
Jokaisella valitsimella on oma Kopioi-painikkeensa. Nappaa skriptisi tarvitsema muoto ja liitä se suoraan testiisi tai kaapimeesi.
Näyttää tunnisteen, id:n, luokat, koon, näyttö- ja sijaintiominaisuudet — nopea yleiskatsaus ilman uudelleentarkastelua.
Jos elementillä on id, yksilöllinen CSS käyttää #id:tä. Jos data-testid on läsnä, se tuodaan esiin Playwrightin/Cypressin käyttöä varten.
Valitse testattava elementti, kopioi sen valitsin ja liitä se testikoodiisi — ei enää arvailua yksilöllisistä poluista.
Hae rakenteellinen valitsin listakohteille kaavittavassa kohteessa. Käytä lyhyttä tai polkuun perustuvaa valitsinta vakaustarpeiden mukaan.
Lukitse elementti ja kopioi sen polku tutkiaksesi, miksi CSS ei tule voimaan — yksilöllinen valitsin näyttää elementin koko sijainnin puussa.
Kopioi valmiiksi paketoitu document.querySelector(...) -katkelma suoraan DevTools-konsoliin nopeaa, interaktiivista virheenkorjausta varten.
Saavutettavuutta auditoitaessa käytä XPathia syöttääksesi elementtejä axe-coreen tai muihin saavutettavuustyökaluihin, jotka odottavat XPath-viittauksia.
Napsauta Polun etsijä -kuvaketta DevSuite Pro -telakassa. Työkalu aktivoituu valintatilaan välittömästi.
Liikuta hiirtäsi sivun päällä — jokainen elementti korostuu purppurana kulkiessasi sen yli. Vieritä tarvittaessa löytääksesi kohteesi.
Napsauta haluamaasi elementtiä. Valitsin pysähtyy ja paneeli täyttyy valitsinmuodoista, kontekstista ja kopiointipainikkeista.
Käytä Vanhempi/Lapsi/Sisar-painikkeita tarkentaaksesi valintaa, tai napsauta Valitse elementti aloittaaksesi osoittamalla valitsemisen uudelleen.
Napsauta Kopioi tarvitsemasi muodon (CSS, XPath tai querySelector) vieressä. Liitä suoraan testiisi, kaapimeesi tai konsoliin.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 64 kehittäjätyökalua selaimellesi.
