DOM Path Finder memungkinkan Anda mengarahkan kursor ke elemen apa pun di halaman untuk mengungkapkan pemilih CSS unik, pemilih pendek, XPath, dan cuplikan querySelector siap tempel. Klik untuk mengunci elemen, lalu navigasi dengan tombol Induk/Anak/Saudara. Penting untuk pengguna Selenium, Puppeteer, Playwright, dan Cypress.
Menulis tes otomasi, web scraper, atau bookmarklet berarti menulis pemilih — tetapi mencari tahu pemilih unik dan stabil untuk elemen spesifik sangat membosankan. Anda membuka DevTools, memeriksa, mengklik kanan, menyalin pemilih, dan berharap hasilnya benar-benar unik dan stabil. DOM Path Finder membuat ini satu klik. Aktifkan alat dan arahkan kursor ke elemen apa pun di halaman — itu menyoroti ungu saat Anda bergerak. Klik untuk menguncinya, dan panel terisi dengan empat format pemilih: pemilih CSS berbasis jalur unik, pemilih pendek (tag + class atau id), XPath absolut, dan cuplikan document.querySelector('...') yang dibungkus sebelumnya siap untuk ditempel ke dalam skrip. Setelah terkunci, Anda dapat menavigasi pohon DOM dengan tombol Induk / Anak Pertama / Sibling Sebelumnya / Sibling Berikutnya tanpa kehilangan fokus. Atribut data-testid terdeteksi dan diprioritaskan saat ada — ideal untuk Playwright/Cypress yang menggunakannya sebagai jangkar. Alat ini juga menampilkan tag, id, class, ukuran batas, dan properti tampilan/posisi untuk konteks cepat.
Pindahkan mouse Anda di atas halaman untuk melihat elemen sorot ungu. Klik untuk mengunci — tidak perlu DevTools Inspector.
Jalur CSS unik, pemilih pendek, XPath absolut, dan cuplikan querySelector yang dibungkus. Pilih format mana yang sesuai dengan alat Anda.
Setelah dikunci, gunakan tombol Induk / Anak Pertama / Sebelumnya / Berikutnya untuk bergerak melalui DOM tanpa memilih kembali.
Setiap pemilih memiliki tombol Salin sendiri. Ambil format yang diperlukan skrip Anda dan tempel langsung ke dalam tes atau scraper Anda.
Menampilkan tag, id, class, ukuran, tampilan, dan posisi — gambaran umum cepat tanpa memeriksa ulang.
Jika elemen memiliki id, CSS unik menggunakan #id. Jika data-testid ada, itu dipermukaan untuk penggunaan Playwright/Cypress.
Pilih elemen di bawah pengujian, salin pemilihnya, dan tempel ke dalam kode pengujian Anda — tidak ada lagi menebak jalur unik.
Temukan pemilih struktural untuk item daftar pada target scraping. Gunakan pemilih pendek atau berbasis jalur tergantung pada kebutuhan stabilitas.
Kunci elemen dan salin jalurnya untuk menyelidiki mengapa CSS tidak diterapkan — pemilih unik menunjukkan lokasi pohon elemen lengkap.
Salin cuplikan document.querySelector(...) yang dibungkus sebelumnya langsung ke dalam DevTools Console untuk debugging interaktif cepat.
Saat mengaudit aksesibilitas, gunakan XPath untuk memberi makan elemen ke dalam axe-core atau alat a11y lain yang mengharapkan referensi XPath.
Klik ikon Path Finder di dermaga DevSuite Pro. Alat ini diaktifkan dalam mode pemilihan segera.
Pindahkan mouse Anda di atas halaman — setiap elemen sorot ungu saat Anda melewatinya. Gulir sesuai kebutuhan untuk menemukan target Anda.
Klik elemen yang Anda inginkan. Pemilih berhenti dan panel terisi dengan format pemilih, konteks, dan tombol salin.
Gunakan tombol Induk/Anak/Saudara untuk menyempurnakan pilihan, atau klik Pilih Elemen untuk mulai memilih arahkan kursor lagi.
Klik Salin di sebelah format yang Anda butuhkan (CSS, XPath, atau querySelector). Tempel langsung ke dalam tes, scraper, atau konsol Anda.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
