Sobre esta ferramenta
Um bom locator encontra exatamente um elemento e continua encontrando depois da próxima mudança de UI. Este testador permite conferir um locator contra o código-fonte real da página antes de colocá-lo em um teste Selenium, Playwright ou Cypress. Cole o HTML (do DevTools, “Copy outerHTML”), digite uma expressão XPath ou um seletor CSS e veja quantos elementos correspondem, a marcação de cada um e onde estão em uma prévia renderizada. A prévia é um frame em sandbox com scripts desativados. O cheatsheet mostra eixos e funções XPath comuns ao lado dos equivalentes CSS, quando existem.
Como usar
- Cole o HTML ou clique em “Load sample” para um formulário de login e uma tabela de pedidos.
- Digite um locator. Expressões que começam com / ou ( são tratadas como XPath e as demais como CSS; use o seletor para forçar um dos dois.
- Confira a contagem: um único resultado é o que você quer para um alvo de clique ou de assertion.
- Clique em qualquer seletor do cheatsheet para rodá-lo no exemplo.
Perguntas frequentes: Testador de XPath e seletores CSS
Devo usar XPath ou seletores CSS?
Prefira CSS ou os locators do framework (como getByRole e getByTestId do Playwright) pela velocidade e legibilidade. Use XPath quando precisar de algo que o CSS não expressa: buscar por texto com normalize-space(), subir até um ancestral ou selecionar uma célula relativa a um rótulo com following-sibling::.
Por que contains(@class, "btn") encontra coisas demais?
contains() casa substrings, então também encontra "btn-primary" e "submit-btn". Use contains(concat(' ', normalize-space(@class), ' '), ' btn ') em XPath, ou simplesmente .btn em CSS, para casar o nome de classe inteiro.