O Google Chrome fornece uma ferramenta de depuração interna chamada " Chrome DevTools " pronta para uso, que inclui um recurso útil que pode avaliar ou validar seletores XPath / CSS sem extensões de terceiros.
Isso pode ser feito por duas abordagens:
Use a função de pesquisa dentro do painel Elementos para avaliar os seletores XPath / CSS e destacar nós correspondentes no DOM. Execute os tokens $ x ("some_xpath") ou $$ ("css-selectors") no painel Console, que avaliarão e validarão.
No painel Elementos
Pressione F12 para abrir o Chrome DevTools.
O painel Elementos deve ser aberto por padrão.
Pressione Ctrl + F para ativar a pesquisa do DOM no painel.
Digite XPath ou seletores CSS para avaliar.
Se houver elementos correspondentes, eles serão destacados no DOM. No entanto, se houver seqüências correspondentes no DOM, elas também serão consideradas como resultados válidos. Por exemplo, o cabeçalho do seletor de CSS deve corresponder a tudo (CSS embutido, scripts etc.) que contém o cabeçalho da palavra, em vez de corresponder apenas aos elementos.
No painel do console
Pressione F12 para abrir o Chrome DevTools.
Alterne para o painel Console.
Digite XPath como $x(".//header")
para avaliar e validar.
Digite seletores CSS como $$("header")
para avaliar e validar.
Verifique os resultados retornados da execução do console.
Se os elementos corresponderem, eles serão retornados em uma lista. Caso contrário, uma lista vazia [] é exibida.
$x(".//article")
[<article class="unit-article layout-post">…</article>]
$x(".//not-a-tag")
[ ]
Se o seletor XPath ou CSS for inválido, uma exceção será mostrada em texto em vermelho. Por exemplo:
$x(".//header/")
SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.
$$("header[id=]")
SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.