XPath na prática — em 5 minutos

Vamos escrever os primeiros XPaths de forma simples e prática

Já falamos sobre a parte teórica em um post anterior. Agora vamos praticar e escrever os primeiros XPaths.

Montando o Ambiente

Antes de começar, vamos preparar o ambiente que será utilizado para a parte prática. Baixe aqui, o arquivo HTML e abra-o em seu navegador. Você verá algo parecido com a imagem abaixo:

Tabela simples de 5 colunas e 4 linhas composta por diversos elementos HTML. Use essa imagem como referência visual para localizar os elementos da tabela

Steps para montar um XPath

Vamos seguir quatro steps para guiar nos guiar na criação de XPaths:

  1. Escolher o elemento no browser;
  2. Encontrar o elemento pelo Dev Tools do Chrome [o famoso f12];
  3. Analisar atributos e elementos ligados ou próximos ao elemento;
  4. Montar seu Xpath :)

Utilize esses steps como guia para criar um novo XPath.

Exemplo 1 — Utilizando o atributo “id”

O atributo “id” é sempre a melhor opção para montar XPaths, pois por boa prática, id’s devem ser únicos, o que facilita nossa busca.

1- Escolher o elemento no browser

Vamos selecionar o botão “Comprar Açaí”, que é o primeiro botão localizado na coluna “Ação”.

2- Encontrar o elemento pelo Dev Tools do chrome [f12]

Clique com o botão direito no botão “Comprar Açaí” e depois na opção “Inspecionar elemento”. O Chrome Dev Tools é aberto e o nosso elemento está selecionado:

Tabela HTML com Dev Tool do Chrome aberto e o botão “Comprar Açaí” em destaque

3- Analisar atributos e elementos relacionados

Nosso botão é um elemento com a tag input, do tipo “button” e possui o ID “ComprarAcai”. Guarde essas informações:

Chrome Dev Tool com elemento do botão “Comprar Açai” selecionado e atributo ID em destaque

Como falamos a pouco, o atributo ID é a melhor opção para montar XPaths. Vamos utiliza-lo na criação do nosso primeiro Xpath.

4- Montar seu Xpath :)

Vá para o Dev Tool e utilize o atalho Ctrl-F para abrir a barra de pesquisa no rodapé:

Barra de pesquisa em destaque no rodapé. Possibilita a busca de elementos por XPaths

Na barra de pesquisa, digite “//”. Isso significa que você iniciou uma busca a partir de qualquer nível da página web.

Adicione input” (que é a tag do nosso elemento), teremos “//input”. O Dev Tool retornará todos os elementos com tag “input”. São 9 no total:

Dev Tool com a pesquisa iniciada e retornando 9 elementos até o momento

Agora precisamos especificar melhor a nossa busca. Adicione [] (colchetes) e teremos “//input[]”.

Adicione @id dentro dos colchetes. Temos então “//input[@id]”. Agora o Dev Tool retornará todos os elementos com a tag “input” que tenham o atributo “id”. Reduzimos os resultados de 9 para 3:

Com a busca mais específica, o resultados é mais restrito

Para finalizar, adicione =ComprarAcai (valor do ID do elemento), após o “@id”. Temos então “//input[@id=ComprarAcai]”.

Agora o Dev Tool retornará somente elementos com a tag “input”, que tenham o atributo “id” cujo com o valor “=ComprarAcai”.

Filtrar com atributos html

Assim como utilizamos o atributo “id” para fazer a busca, podemos fazer uso de atributos como “class”, “name”, “type” entre outros.

Exemplo 2 — Utilizando mais de um atributo

Na falta do atributo id, além de utilizar outros atributos, é possível fazer uma busca utilizando dois ou mais atributos

1- Escolher o elemento no browser

Vamos até a coluna “Combo”, e selecionar o checkbox da última linha.

2- Encontrar o elemento pelo Dev Tools do chrome [f12]

Clique com o botão direito sob o elemento, e depois, em “Inspecionar elemento”.

3- Analisar atributos e elementos relacionados

Nosso checkbox é um elemento com a tag input, do tipo “checkbox”, com name “comboBaiano” e não possui ID. Dessa vez, usaremos mais de um atributo para selecionar o elemento.

4- Montar seu Xpath :)

Abra a barra de pesquisa do Dev Tool (Ctrl-F) e comece a montar o XPath…

Step 1 — Adicione “//input” para listar todos os elementos com a tag input. Temos 9 resultados.

Step 2 — Insira os colchetes para especificar a pesquisa. Agora temos “//input[]”.

Step 3 — Adicione “@type=’checkbox'” dentro dos colchetes.

Nesse momento temos o XPath “//input[@type=’checkbox’]”, que retorna 3 elementos. Para especificar melhor, vamos adicionar a pesquisa pelo atributo name em nosso XPath.

Step 4 — Adicione novos colchetes (na frente do seu XPath atual), e dentro deles adicione “@name=’comboBaiano’”.

Agora temos um XPath que retorna apenas um resultado:

//input[@type=’checkbox’][@name=’comboBaiano’]

Para encerrar

Com os exemplos acima, você já está apto a criar seus primeiros XPath em qualquer website/aplicação web. Sugestões, comente no post :)

Ferramentas recomendadas

O Dev Tool faz parte do Navegador Chrome. É a ferramenta básica para começar escrever os primeiros XPath.

O CSS and XPath checker ajuda a validar um XPath criado. Se o XPath estiver “ok”, o elemento na tela ficará destacado em vermelho. Muito recomendado

Referências

Conteúdos que uso como referência quando o assunto é XPath. A leitura do primeiro e do terceiro é praticamente obrigatória, enquanto o segundo vale salvar no seu favoritos para consulta no seu dia-a-dia.