Testeur de sélecteurs CSS

Comment fonctionne le testeur de sélecteurs CSS

Ce que fait l’outil

Le testeur de sélecteurs CSS évalue des sélecteurs CSS sur une entrée HTML et met visuellement en évidence tous les éléments correspondants. Vous collez ou saisissez du HTML dans un panneau, entrez un sélecteur CSS et voyez instantanément quels éléments correspondent, avec un décompte du nombre total de correspondances. Cela fournit un retour immédiat sur la spécificité et la portée du sélecteur, sans avoir besoin d’ouvrir les DevTools du navigateur ni de modifier une page en direct.

Cas d’usage courants pour les développeurs

Les développeurs frontend utilisent cet outil pour créer des sélecteurs précis pour le style, tester des sélecteurs de scraping sur un HTML d’exemple avant d’écrire le code d’extraction, et déboguer pourquoi une règle CSS ne cible pas les éléments attendus. Les ingénieurs QA valident des sélecteurs Cypress ou Playwright sur des instantanés de pages. Il est également utile pour écrire des règles d’extraction de contenu pour des lecteurs RSS, des analyseurs d’e-mails ou des scripts d’automatisation de navigateur headless.

Formats de données, types ou variantes

L’outil prend en charge l’intégralité de la spécification CSS Selectors Level 3, y compris les sélecteurs de type, les sélecteurs de classe et d’ID, les sélecteurs d’attribut avec opérateurs ([attr^=value], [attr$=value]), les pseudo-classes (:nth-child, :not, :first-of-type), les combinateurs (descendant, enfant >, frère adjacent +, frère général ~) et les pseudo-éléments (::before, ::after). Les sélecteurs composés complexes et les listes de sélecteurs (séparées par des virgules) sont entièrement pris en charge.

Pièges courants et cas limites

La correspondance des sélecteurs CSS dépend de la structure du DOM analysée, et non du texte HTML brut — les balises non fermées, les éléments implicites (tbody) et la correction d’erreurs du navigateur peuvent faire que le DOM réel diffère de ce que vous voyez dans la source. Les pseudo-éléments (::before, ::after) ne sont pas de vrais nœuds du DOM et ne peuvent pas être sélectionnés par querySelector. Les préfixes d’espace de noms dans le contenu XML/SVG nécessitent un traitement particulier. Des sélecteurs trop spécifiques qui fonctionnent sur un HTML d’exemple peuvent échouer sur des pages de production avec un balisage légèrement différent.

Quand utiliser cet outil plutôt que du code

Utilisez cet outil de navigateur pour le développement interactif de sélecteurs et une validation rapide sur des extraits HTML. Pour le scraping web en production ou l’automatisation de tests, utilisez le test de sélecteurs intégré à votre framework (page.locator de Playwright, page.$ de Puppeteer), qui s’exécute sur le DOM réellement rendu avec exécution JavaScript, contenu dynamique, parcours du shadow DOM et gestion des iframes, ce que la correspondance sur HTML statique ne peut pas reproduire.