Testador de Seletores CSS

Como Funciona o Testador de Seletores CSS

O Que a Ferramenta Faz

O Testador de Seletores CSS avalia seletores CSS face a uma entrada HTML e realça visualmente todos os elementos correspondentes. Cola ou escreve HTML num painel, introduz um seletor CSS e vê instantaneamente quais os elementos que correspondem, com uma contagem do total de correspondências. Isto fornece feedback imediato sobre a especificidade e o âmbito do seletor, sem necessidade de abrir as DevTools do navegador ou modificar uma página em direto.

Casos de Uso Comuns para Programadores

Os programadores frontend usam esta ferramenta para criar seletores precisos para estilização, testar seletores de scraping contra HTML de exemplo antes de escrever código de extração e depurar porque é que uma regra CSS não está a atingir os elementos pretendidos. Engenheiros de QA validam seletores de Cypress ou Playwright contra snapshots de páginas. Também é útil para escrever regras de extração de conteúdo para leitores de RSS, analisadores de e-mail ou scripts de automação de navegadores headless.

Formatos, Tipos ou Variantes de Dados

A ferramenta suporta a especificação completa CSS Selectors Level 3, incluindo seletores de tipo, seletores de classe e ID, seletores de atributos com operadores ([attr^=value], [attr$=value]), pseudo-classes (:nth-child, :not, :first-of-type), combinadores (descendente, filho >, irmão adjacente +, irmão geral ~) e pseudo-elementos (::before, ::after). Seletores compostos complexos e listas de seletores (separadas por vírgulas) são totalmente suportados.

Erros Comuns e Casos Limite

A correspondência de seletores CSS depende da estrutura do DOM analisada, não do texto HTML bruto — tags não fechadas, elementos implícitos (tbody) e a correção de erros do navegador podem fazer com que o DOM real difira do que vê no código-fonte. Pseudo-elementos (::before, ::after) não são nós reais do DOM e não podem ser selecionados por querySelector. Prefixos de namespace em conteúdo XML/SVG exigem tratamento especial. Seletores demasiado específicos que funcionam em HTML de exemplo podem falhar em páginas de produção com marcação ligeiramente diferente.

Quando Usar Esta Ferramenta vs Código

Use esta ferramenta no navegador para desenvolvimento interativo de seletores e validação rápida contra excertos de HTML. Para scraping web em produção ou automação de testes, use o teste de seletores integrado do seu framework (page.locator do Playwright, page.$ do Puppeteer), que é executado contra o DOM realmente renderizado com execução de JavaScript, conteúdo dinâmico, travessia de shadow DOM e tratamento de iframes que a correspondência de HTML estático não consegue replicar.