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:
Steps para montar um XPath
Vamos seguir quatro steps para guiar nos guiar na criação de XPaths:
- Escolher o elemento no browser;
- Encontrar o elemento pelo Dev Tools do Chrome [o famoso f12];
- Analisar atributos e elementos ligados ou próximos ao elemento;
- 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:
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:
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é:
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:
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:
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.
