Penguji XPath

XPath adalah bahasa query untuk memilih node dari dokumen XML (atau HTML) menggunakan ekspresi path, mirip cara sebuah path file memilih file dalam struktur folder. Alat ini memungkinkan Anda menempel XML apa pun, menulis ekspresi XPath, dan langsung melihat node mana yang cocok — termasuk jumlah node, output yang di-serialize, dan pesan error yang jelas untuk XML atau sintaks XPath yang salah. Alat ini berjalan sepenuhnya di browser Anda menggunakan engine `document.evaluate` native yang ada di setiap browser modern, sehingga apa pun yang Anda tempel tidak pernah diunggah ke mana pun.

Apa Itu Alat Ini?

XPath (XML Path Language) adalah standar W3C untuk menavigasi dan memilih node — elemen, atribut, teks — di dalam dokumen XML menggunakan sintaks mirip path yang ringkas, misalnya `//book[price>30]/title` memilih setiap `<title>` yang sibling `<price>`-nya lebih besar dari 30, di mana pun dalam dokumen. XPath dipakai oleh stylesheet XSLT, tool validasi XML, web scraper, framework otomasi browser (Selenium, Playwright), dan banyak library XML di berbagai bahasa pemrograman.

Versi terkini yang diimplementasikan oleh setiap browser utama — Chrome, Firefox, Safari, Edge — adalah XPath 1.0, Rekomendasi W3C asli dari tahun 1999. Alat ini menggunakan engine native yang persis sama lewat API `document.evaluate()` milik browser, sehingga hasilnya cocok dengan apa yang Anda dapatkan dari DevTools browser atau JavaScript apa pun yang berjalan di browser. Alat ini tidak mengimplementasikan spesifikasi XPath 2.0/3.0/3.1 yang lebih baru (yang menambahkan fungsi seperti `for`, sequence, dan pencocokan regex) — lihat FAQ untuk penjelasan dampaknya secara praktis.

Sebuah ekspresi bisa mengembalikan salah satu dari dua jenis hasil: node-set (nol atau lebih elemen, atribut, atau text node yang cocok, yang oleh alat ini di-serialize dan ditampilkan satu per baris beserta jumlahnya), atau nilai skalar — angka, string, atau boolean — ketika ekspresi itu sendiri menghitung suatu nilai, seperti `count(//book)` atau `//book[1]/title = 'Dune'`.

Mengapa Menggunakannya?

Men-debug ekspresi XPath sebelum menuliskannya secara hard-code ke dalam web scraper, test Selenium/Playwright, atau stylesheet XSLT.
Memeriksa dengan cepat apakah suatu XPath tertentu memilih node yang Anda harapkan dari sampel XML/HTML yang sesungguhnya.
Melihat jumlah kecocokan yang pasti dan output yang di-serialize, alih-alih menebak-nebak dari kode.
Mendapatkan error yang langsung terbaca untuk XML yang cacat atau sintaks XPath yang tidak valid, alih-alih stack trace yang membingungkan.
100% berjalan di sisi klien: XML dan ekspresi Anda tidak pernah meninggalkan browser Anda.

Cara Menggunakan

Tempel atau edit XML (atau HTML) Anda di kotak input — sebuah contoh dokumen toko buku sudah terisi otomatis agar Anda bisa langsung melihatnya bekerja.
Ketik ekspresi XPath di kolom ekspresi, atau edit contoh yang sudah terisi.
Klik "Evaluate" (atau tekan Enter di kolom ekspresi).
Baca node yang cocok di bawah, beserta jumlahnya di bagian atas; hasil skalar (angka, string, boolean) ditampilkan langsung.
Jika XML atau ekspresinya tidak valid, pesan error spesifik akan menggantikan hasil.

Contoh

Input

XML:
<bookstore>
  <book><title>The Great Gatsby</title><price>12.99</price></book>
  <book><title>Learning XPath</title><price>34.50</price></book>
  <book><title>Dune</title><price>45.00</price></book>
</bookstore>

XPath: //book[price>30]/title

Output

✓ 2 node(s) matched
<title>Learning XPath</title>
<title>Dune</title>

Hanya 2 dari 3 buku yang harganya di atas 30, sehingga tepat 2 elemen <title> yang dikembalikan — buku ketiga (Gatsby, $12.99) dengan benar tidak disertakan.

XPath vs CSS selector sekilas

Kedua bahasa ini memilih node dari dokumen, tetapi menyelesaikan masalah yang berbeda. Gunakan tabel ini untuk memilih alat yang tepat untuk suatu seleksi tertentu.

Kemampuan	XPath	CSS selector
Memilih berdasarkan tag/class/id ke bawah	Ya	Ya — dan biasanya lebih cepat
Memilih berdasarkan konten teks/yang terlihat	Ya — `contains(text(),'x')`	Tidak
Menelusuri ke atas menuju parent/ancestor	Ya — `//div[span]/..`	Tidak (`:has()` pengecualian parsial yang lebih baru)
Perbandingan nilai sibling (mis. `price>30`)	Ya	Tidak
Berfungsi di luar browser (tooling XML server-side, XSLT)	Ya	Tidak — CSS selector khusus untuk browser/DOM

Alat terkait

Bekerja dengan format data terstruktur? Alat-alat ini cocok dipadukan dengan pengujian XPath.

→ Formatter JSON · Dekoder JWT

Pertanyaan yang Sering Diajukan

XPath dipakai untuk apa?

XPath memilih node — elemen, atribut, atau teks — dari dokumen XML atau HTML menggunakan sintaks path. Ini adalah bahasa seleksi di balik transformasi XSLT, banyak validator XML, dan dipakai secara luas dalam web scraping serta otomasi test browser (Selenium, Playwright, Cypress) untuk menemukan elemen di halaman, terutama ketika CSS selector saja tidak bisa mengekspresikan kondisi yang dibutuhkan.

XPath vs CSS selector — mana yang sebaiknya saya pakai?

Keduanya tumpang tindih tetapi tidak setara. XPath bisa memilih parent berdasarkan konten child-nya (`//div[span='Total']`), naik ke ancestor, dan memilih berdasarkan teks yang terlihat (`//button[contains(text(),'Submit')]`) — CSS selector tidak bisa naik ke atas dalam tree dan sama sekali tidak bisa mencocokkan berdasarkan konten teks. Jika Anda hanya memilih berdasarkan tag, class, atau ID turun ke bawah dokumen, CSS selector lebih sederhana ditulis dan umumnya lebih cepat dievaluasi. Gunakan XPath khususnya ketika Anda perlu "pilih parent dari teks ini" atau "pilih berdasarkan apa yang dikatakan elemen", bukan sekadar tag atau class-nya.

Apakah alat ini mendukung fungsi XPath 2.0 atau 3.0?

Tidak — begitu pula tidak ada browser mana pun yang mendukungnya. Browser mengimplementasikan XPath 1.0 (Rekomendasi W3C 1999) lewat `document.evaluate()`, dan alat ini menggunakan engine native yang persis sama, sehingga hasilnya akurat dengan apa yang akan Anda dapatkan saat menjalankan ekspresi yang sama di DevTools browser atau JavaScript. Fungsi dan fitur yang diperkenalkan di XPath 2.0/3.0/3.1 (seperti ekspresi `for`, sequence, atau `matches()` dengan regex) tidak tersedia — hanya fungsi 1.0 seperti `contains()`, `starts-with()`, `substring()`, `count()`, `position()`, dan `last()` yang berfungsi di sini.

Apa saja ekspresi XPath umum yang perlu saya ketahui?

`//tag` memilih setiap `<tag>` di mana pun dalam dokumen. `//tag[@attr='value']` memilih elemen `<tag>` yang atribut `attr`-nya sama dengan `value`. `//tag[contains(text(),'x')]` memilih elemen `<tag>` yang teks langsungnya mengandung `x`. `//tag[1]` memilih sibling `<tag>` pertama di setiap parent. `//parent/child` memilih elemen `<child>` yang merupakan child langsung dari `<parent>`. `count(//tag)` mengembalikan angka, bukan node-set.

Apakah alat ini menangani namespace XML?

Hanya kasus umum tanpa namespace yang ditangani dengan baik, dan ini mencakup sebagian besar XML/HTML yang ditulis manual atau di-scrape. Jika dokumen Anda mendeklarasikan namespace XML (misalnya `xmlns="..."` pada elemen root), `document.evaluate` memerlukan fungsi resolver yang sadar namespace untuk memetakan prefix ke URI, yang tidak disiapkan oleh alat sederhana ini — ekspresi terhadap XML berbernamespace bisa mengembalikan nol kecocokan meskipun terlihat sudah benar. Ini keterbatasan yang diketahui, bukan bug: hapus deklarasi namespace dari sampel Anda, atau gunakan fungsi local-name() sebagai solusi alternatif (misalnya `//*[local-name()='title']`).

Apakah XML atau ekspresi XPath saya dikirim ke server?

Tidak. Semuanya berjalan lokal menggunakan `DOMParser` dan `document.evaluate()` bawaan browser Anda — engine yang sama yang sudah dipakai browser Anda secara internal. Apa pun yang Anda ketik atau tempel tidak pernah meninggalkan perangkat Anda.