Penguji Selector CSS

Uji selector CSS pada HTML yang ditempel dan lihat setiap elemen yang cocok beserta markup dan teksnya. Memakai querySelectorAll, jadi hasilnya persis seperti di browser.

Selector CSS

Kode HTML

HTML diurai dengan DOMParser dan dikueri dengan querySelectorAll, persis seperti di browser Anda (dukungan CSS Selectors Level 4 bergantung pada browser). Skrip di dalam HTML yang ditempel tidak dijalankan.

Apa itu Penguji Selector CSS?

Penguji selector CSS ini menjalankan selector terhadap HTML yang Anda tempel dan menampilkan setiap elemen yang cocok beserta outer HTML dan isi teksnya. Alat ini mendukung semua yang didukung browser Anda, mulai dari selector atribut hingga :not(), :is(), :has(), dan :nth-child().

Cara menggunakan Penguji Selector CSS

Masukkan selector CSS, misalnya nav li:not(.active) > a[href^="/"].
Tempel atau edit HTML-nya.
Baca jumlah kecocokan dan markup setiap elemen yang cocok yang disorot.
Salin semua HTML yang cocok dengan tombol Salin.

Contoh

Masukan

nav li:not(.active) > a[href^="/"] on the sample HTML

Keluaran

1 match: <a href="/blog" data-track="nav">Blog</a>

a[href] cocok dengan keempat tautan di contoh.

Kapan menggunakan Penguji Selector CSS

Gunakan untuk menulis selector bagi aturan CSS, otomatisasi pengujian (Playwright, Cypress), web scraping, atau pemanggilan document.querySelector. Alat ini tidak menerapkan gaya atau menghitung spesifisitas, dan pseudo-class dinamis seperti :hover tidak pernah cocok di dokumen statis.

Cara kerja Penguji Selector CSS

HTML diurai menjadi dokumen terpisah dengan DOMParser (skrip tidak dijalankan) dan selector diteruskan ke querySelectorAll(). Karena itu, pencocokannya persis seperti yang dilakukan browser Anda, termasuk tingkat dukungannya terhadap fitur Selectors Level 4 yang lebih baru. Selector yang tidak valid ditangkap dan dilaporkan. Hingga 200 kecocokan ditampilkan.

Kasus Penggunaan Umum

Memeriksa bahwa locator Playwright cocok dengan tepat satu tombol.
Menyusun selector scraper untuk harga produk.
Mempelajari perilaku combinator (>, +, ~) dan :not().
Menguji apakah browser Anda mendukung :has().

Pertanyaan Umum

Mengapa selector saya tidak cocok dengan apa pun di halaman hasil scraping?

Halaman tersebut mungkin membangun HTML-nya dengan JavaScript. Tempel HTML hasil render dari DevTools (Copy outerHTML), bukan sumber aslinya.

Apakah :has() didukung?

Ya, di Chrome, Edge, Safari, dan Firefox versi terkini. Penguji ini memakai browser Anda, sehingga browser lama akan melaporkannya sebagai tidak valid.