Pencari Laluan DOM membolehkan anda mengarahkan tetikus ke mana-mana elemen pada halaman untuk mendedahkan pemilih CSS unik, pemilih ringkas, XPath, dan snippet querySelector sedia untuk ditampal. Klik untuk mengunci elemen, kemudian navigasi menggunakan butang Induk/Anak/Sibling. Penting untuk pengguna Selenium, Puppeteer, Playwright, dan Cypress.
Menulis ujian automasi, pengikis web, atau bookmarklet bermakna menulis pemilih — tetapi mencari pemilih yang stabil dan unik untuk elemen tertentu adalah membosankan. Anda buka DevTools, periksa, klik kanan, salin pemilih, dan harap hasilnya benar-benar unik dan stabil. Pencari Laluan DOM menjadikan ini satu klik sahaja. Aktifkan alat ini dan arahkan tetikus ke mana-mana elemen pada halaman — ia akan bercahaya ungu semasa anda bergerak. Klik untuk mengunci, dan panel akan dipenuhi dengan empat format pemilih: pemilih CSS berasaskan laluan yang unik, pemilih ringkas (tag + kelas atau id), XPath mutlak, dan snippet document.querySelector('...') yang sudah dibalut sedia untuk ditampal ke dalam skrip. Setelah dikunci, anda boleh menavigasi pepohon DOM menggunakan butang Induk / Anak Pertama / Sibling Sebelum / Sibling Seterusnya tanpa kehilangan fokus. Atribut data-testid dikesan dan diutamakan apabila hadir — sesuai untuk pengguna Playwright/Cypress yang menggunakannya sebagai sauh. Alat ini juga memaparkan tag, id, kelas, saiz sempadan, dan sifat display/position untuk konteks pantas.
Gerakkan tetikus anda pada halaman untuk melihat elemen bercahaya ungu. Klik untuk mengunci — tiada keperluan untuk DevTools Inspector.
Laluan CSS unik, pemilih ringkas, XPath mutlak, dan snippet querySelector yang dibalut. Pilih yang sesuai dengan alat anda.
Setelah dikunci, gunakan butang Induk / Anak Pertama / Sebelum / Seterusnya untuk bergerak melalui DOM tanpa perlu memilih semula.
Setiap pemilih mempunyai butang Salin sendiri. Ambil format yang diperlukan skrip anda dan tampal terus ke dalam ujian atau pengikis anda.
Memaparkan tag, id, kelas, saiz, display, dan position — gambaran pantas tanpa perlu memeriksa semula.
Jika elemen mempunyai id, CSS unik akan menggunakan #id. Jika data-testid hadir, ia akan dipaparkan untuk kegunaan Playwright/Cypress.
Pilih elemen yang sedang diuji, salin pemilihnya, dan tampal ke dalam kod ujian anda — tiada lagi teka-teki mencari laluan unik.
Cari pemilih struktur untuk item senarai pada sasaran pengikisan. Gunakan pemilih ringkas atau berasaskan laluan bergantung pada keperluan kestabilan.
Kunci elemen dan salin laluannya untuk menyiasat mengapa CSS tidak terpakai — pemilih unik menunjukkan lokasi penuh elemen dalam pepohon.
Salin snippet document.querySelector(...) yang sudah dibalut terus ke dalam Konsol DevTools untuk penyahpepijatan interaktif yang pantas.
Semasa mengaudit kebolehcapaian, gunakan XPath untuk menyuap elemen ke dalam axe-core atau alat a11y lain yang memerlukan rujukan XPath.
Klik ikon Path Finder dalam dok DevSuite Pro. Alat ini akan diaktifkan dalam mod pemilihan serta-merta.
Gerakkan tetikus anda pada halaman — setiap elemen akan bercahaya ungu semasa anda melintasinya. Skrol mengikut keperluan untuk mencari sasaran anda.
Klik elemen yang anda mahukan. Pemilih akan berhenti dan panel akan dipenuhi dengan format pemilih, konteks, dan butang salin.
Gunakan butang Induk/Anak/Sibling untuk memperhalusi pemilihan, atau klik Pick Element untuk mula memilih semula dengan penunjuk tetikus.
Klik Salin di sebelah format yang diperlukan (CSS, XPath, atau querySelector). Tampal terus ke dalam ujian, pengikis, atau konsol anda.
Pasang DevSuite Pro secara percuma dan buka 64+ alat pembangun untuk pelayar anda.
