Tester de selectors CSS

Com funciona el provador de selectors CSS

Què fa l’eina

El provador de selectors CSS avalua selectors CSS contra una entrada HTML i ressalta visualment tots els elements coincidents. Enganxes o escrius HTML en un panell, introdueixes un selector CSS i veus a l'instant quins elements coincideixen amb un recompte del total de coincidències. Això proporciona retroalimentació immediata sobre l'especificitat i l'abast del selector sense necessitat d'obrir les DevTools del navegador ni modificar una pàgina en viu.

Casos d’ús habituals per a desenvolupadors

Els desenvolupadors frontend utilitzen aquesta eina per crear selectors precisos per a l'estil, provar selectors d'scraping contra HTML de mostra abans d'escriure codi d'extracció i depurar per què una regla CSS no apunta als elements previstos. Els enginyers de QA validen selectors de Cypress o Playwright contra instantànies de pàgina. També és útil per escriure regles d'extracció de contingut per a lectors RSS, analitzadors de correu electrònic o scripts d'automatització de navegadors sense interfície.

Formats, tipus o variants de dades

L'eina admet tota l'especificació CSS Selectors Level 3, incloent selectors de tipus, selectors de classe i d'ID, selectors d'atribut amb operadors ([attr^=value], [attr$=value]), pseudoclasses (:nth-child, :not, :first-of-type), combinadors (descendent, fill >, germà adjacent +, germà general ~) i pseudoelements (::before, ::after). Els selectors compostos complexos i les llistes de selectors (separades per comes) són totalment compatibles.

Errors habituals i casos límit

La coincidència de selectors CSS depèn de l'estructura del DOM analitzada, no del text HTML en brut — etiquetes sense tancar, elements implícits (tbody) i la correcció d'errors del navegador poden fer que el DOM real difereixi del que veus al codi font. Els pseudoelements (::before, ::after) no són nodes reals del DOM i no es poden seleccionar amb querySelector. Els prefixos d'espai de noms en contingut XML/SVG requereixen un tractament especial. Els selectors massa específics que funcionen amb HTML de mostra poden fallar en pàgines de producció amb un marcatge lleugerament diferent.

Quan utilitzar aquesta eina vs codi

Utilitza aquesta eina del navegador per al desenvolupament interactiu de selectors i la validació ràpida contra fragments d'HTML. Per a l'scraping web de producció o l'automatització de proves, utilitza les proves de selectors integrades del teu framework (page.locator de Playwright, page.$ de Puppeteer), que s'executen contra el DOM real renderitzat amb execució de JavaScript, contingut dinàmic, recorregut del shadow DOM i gestió d'iframes que la coincidència d'HTML estàtica no pot replicar.