Selênio

Usando XPath e Selenium para encontrar um elemento na página HTML

Usando XPath e Selenium para encontrar um elemento na página HTML
XPath, também conhecido como XML Path Language, é uma linguagem para selecionar elementos de um documento XML. Como HTML e XML seguem a mesma estrutura de documento, XPath também pode ser usado para selecionar elementos de uma página da web.

Localizar e selecionar elementos da página da web é a chave para web scraping com Selenium. Para localizar e selecionar elementos da página da web, você pode usar seletores XPath no Selenium.

Neste artigo, vou mostrar como localizar e selecionar elementos de páginas da web usando seletores XPath no Selenium com a biblioteca python Selenium. Então vamos começar.

Pré-requisitos:

Para experimentar os comandos e exemplos deste artigo, você deve ter,

  1. Uma distribuição Linux (de preferência Ubuntu) instalada no seu computador.
  2. Python 3 instalado em seu computador.
  3. PIP 3 instalado no seu computador.
  4. Pitão virtualenv pacote instalado no seu computador.
  5. Navegadores Mozilla Firefox ou Google Chrome instalados em seu computador.
  6. Deve saber como instalar o Firefox Gecko Driver ou Chrome Web Driver.

Para cumprir os requisitos 4, 5 e 6, leia meu artigo Introdução ao Selenium em Python 3. Você pode encontrar muitos artigos sobre outros tópicos no LinuxHint.com. Certifique-se de verificá-los se precisar de alguma ajuda.

Configurando um diretório de projeto:

Para manter tudo organizado, crie um novo diretório de projeto selenium-xpath / do seguinte modo:

$ mkdir -pv selenium-xpath / drivers

Navegue até o selenium-xpath / diretório do projeto da seguinte forma:

$ cd selenium-xpath /

Crie um ambiente virtual Python no diretório do projeto da seguinte maneira:

$ virtualenv .venv

Ative o ambiente virtual da seguinte maneira:

$ source .venv / bin / activate

Instale a biblioteca Selenium Python usando PIP3 da seguinte maneira:

$ pip3 install selenium

Baixe e instale todos os drivers da web necessários no motoristas / diretório do projeto. Eu expliquei o processo de download e instalação de drivers da web em meu artigo Introdução ao Selenium em Python 3.

Obtenha o XPath Selector usando a Chrome Developer Tool:

Nesta seção, vou mostrar como encontrar o seletor XPath do elemento da página da web que você deseja selecionar com o Selenium usando a ferramenta de desenvolvedor integrada do navegador Google Chrome.

Para obter o seletor XPath usando o navegador Google Chrome, abra o Google Chrome e visite o site do qual deseja extrair dados. Em seguida, pressione o botão direito do mouse (RMB) em uma área vazia da página e clique em Inspecionar para abrir o Chrome Developer Tool.

Você também pode pressionar + Mudança + eu para abrir o Chrome Developer Tool.

Chrome Developer Tool deve ser aberto.

Para encontrar a representação HTML de seu elemento de página da web desejado, clique no Inspecionar(

) ícone, conforme marcado na imagem abaixo.

Em seguida, passe o mouse sobre o elemento de página da web desejado e pressione o botão esquerdo do mouse (LMB) para selecioná-lo.

A representação HTML do elemento da web que você selecionou será destacada no Elementos guia do Chrome Developer Tool, como você pode ver na imagem abaixo.

Para obter o seletor XPath do elemento desejado, selecione o elemento do Elementos guia de Chrome Developer Tool e clique com o botão direito (RMB) nele. Então, selecione cópia de > Copiar XPath, como marcado na imagem abaixo.

Eu colei o seletor XPath em um editor de texto. O seletor XPath se parece com o mostrado na imagem abaixo.

Obtenha o XPath Selector usando a Firefox Developer Tool:

Nesta seção, vou mostrar como encontrar o seletor XPath do elemento da página da web que você deseja selecionar com Selenium usando a ferramenta de desenvolvedor integrada do navegador Mozilla Firefox.

Para obter o seletor XPath usando o navegador Firefox, abra o Firefox e visite o site do qual deseja extrair os dados. Em seguida, pressione o botão direito do mouse (RMB) em uma área vazia da página e clique em Inspecionar elemento (Q) para abrir o Firefox Developer Tool.

Firefox Developer Tool deve ser aberto.

Para encontrar a representação HTML de seu elemento de página da web desejado, clique no Inspecionar(

) ícone, conforme marcado na imagem abaixo.

Em seguida, passe o mouse sobre o elemento de página da web desejado e pressione o botão esquerdo do mouse (LMB) para selecioná-lo.

A representação HTML do elemento da web que você selecionou será destacada no Inspetor guia de Firefox Developer Tool, como você pode ver na imagem abaixo.

Para obter o seletor XPath do elemento desejado, selecione o elemento do Inspetor guia de Firefox Developer Tool e clique com o botão direito (RMB) nele. Então, selecione cópia de > XPath como marcado na imagem abaixo.

O seletor XPath de seu elemento desejado deve ser parecido com este.

Extração de dados de páginas da web usando o seletor XPath:

Nesta seção, vou mostrar como selecionar elementos de página da web e extrair dados deles usando seletores XPath com a biblioteca Selenium Python.

Primeiro, crie um novo script Python ex01.py e digite as seguintes linhas de códigos.

from selenium import webdriver
de selênio.driver da web.comum.chaves importar chaves
de selênio.driver da web.comum.por importação por
options = webdriver.ChromeOptions ()
opções.sem cabeça = verdadeiro
navegador = webdriver.Chrome (executable_path = "./ drivers / chromedriver ",
opções = opções)
navegador.get ("https: // www.unixtimestamp.com / ")
timestamp = navegador.find_element_by_xpath ('/ html / body / div [1] / div [1]
/ div [2] / div [1] / div / div / h3 [2] ')
print ('timestamp atual:% s'% (timestamp.texto.dividir (") [0]))
navegador.perto()

Quando terminar, salve o ex01.py Script Python.

A linha 1-3 importa todos os componentes necessários do Selenium.

A linha 5 cria um objeto Chrome Options e a linha 6 ativa o modo headless para o navegador Chrome.

A linha 8 cria um Chrome navegador objeto usando o cromedriver binário do motoristas / diretório do projeto.

A linha 10 diz ao navegador para carregar o site unixtimestamp.com.

A linha 12 encontra o elemento que possui os dados de carimbo de data / hora da página usando o seletor XPath e os armazena no carimbo de data / hora variável.

A linha 13 analisa os dados do carimbo de data / hora do elemento e os imprime no console.

Copiei o seletor XPath do H2 elemento de unixtimestamp.com usando a Chrome Developer Tool.

A linha 14 fecha o navegador.

Execute o script Python ex01.py do seguinte modo:

$ python3 ex01.py

Como você pode ver, os dados do carimbo de data / hora são impressos na tela.

Aqui, eu usei o navegador.find_element_by_xpath (seletor) método. O único parâmetro deste método é o seletor, que é o seletor XPath do elemento.

Em vez de navegador.find_element_by_xpath () método, você também pode usar navegador.find_element (por, seletor) método. Este método precisa de dois parâmetros. O primeiro parâmetro De vai ser De.XPATH como estaremos usando o seletor XPath, e o segundo parâmetro seletor será o próprio seletor XPath. O resultado será o mesmo.

Para ver como navegador.find_element () método funciona para o seletor XPath, crie um novo script Python ex02.py, copie e cole todas as linhas de ex01.py para ex02.py e mudar linha 12 como marcado na imagem abaixo.

Como você pode ver, o script Python ex02.py dá o mesmo resultado que ex01.py.

$ python3 ex02.py

O navegador.find_element_by_xpath () e navegador.find_element () métodos são usados ​​para encontrar e selecionar um único elemento de páginas da web. Se você deseja encontrar e selecionar vários elementos usando seletores XPath, você deve usar navegador.find_elements_by_xpath () ou navegador.find_elements () métodos.

O navegador.find_elements_by_xpath () método leva o mesmo argumento que o navegador.find_element_by_xpath () método.

O navegador.find_elements () método leva os mesmos argumentos que o navegador.find_element () método.

Vamos ver um exemplo de extração de uma lista de nomes usando o seletor XPath de gerador de nomes aleatórios.informação com a biblioteca Selenium Python.

A lista não ordenada (ol tag) tem um 10 li tags dentro de cada um contendo um nome aleatório. O XPath para selecionar todos os li tags dentro do ol tag neste caso é // * [@ id = ”main”] / div [3] / div [2] / ol // li

Vamos ver um exemplo de seleção de vários elementos da página da web usando seletores XPath.

Crie um novo script Python ex03.py e digite as seguintes linhas de códigos nele.

from selenium import webdriver
de selênio.driver da web.comum.chaves importar chaves
de selênio.driver da web.comum.por importação por
options = webdriver.ChromeOptions ()
opções.sem cabeça = verdadeiro
navegador = webdriver.Chrome (executable_path = "./ drivers / chromedriver ",
opções = opções)
navegador.get ("http: // random-name-generator.info / ")
nomes = navegador.find_elements_by_xpath ('
// * [@ id = "main"] / div [3] / div [2] / ol // li ')
para nome em nomes:
imprimir (nome.texto)
navegador.perto()

Quando terminar, salve o ex03.py Script Python.

A linha 1-8 é a mesma que em ex01.py Script Python. Então, eu não vou explicá-los aqui novamente.

A linha 10 diz ao navegador para carregar o gerador de nomes aleatórios do site.informação.

A linha 12 seleciona a lista de nomes usando o navegador.find_elements_by_xpath () método. Este método usa o seletor XPath // * [@ id = ”main”] / div [3] / div [2] / ol // li para encontrar a lista de nomes. Então, a lista de nomes é armazenada no nomes variável.

Nas linhas 13 e 14, um para loop é usado para iterar através do nomes listar e imprimir os nomes no console.

A linha 16 fecha o navegador.

Execute o script Python ex03.py do seguinte modo:

$ python3 ex03.py

Como você pode ver, os nomes são extraídos da página da web e impressos no console.

Em vez de usar o navegador.find_elements_by_xpath () método, você também pode usar o navegador.find_elements () método como antes. O primeiro argumento deste método é De.XPATH, e o segundo argumento é o seletor XPath.

Para experimentar navegador.find_elements () método, crie um novo script Python ex04.py, copie todos os códigos de ex03.py para ex04.py, e mude a linha 12 como marcado na imagem abaixo.

Você deve obter o mesmo resultado de antes.

$ python3 ex04.py

Noções básicas do seletor XPath:

A ferramenta do desenvolvedor do Firefox ou do navegador Google Chrome gera o seletor XPath automaticamente. Mas esses seletores XPath às vezes não são suficientes para o seu projeto. Nesse caso, você deve saber o que um determinado seletor XPath faz para construir seu seletor XPath. Nesta seção, vou mostrar a você o básico dos seletores XPath. Então, você deve ser capaz de construir seu próprio seletor XPath.

Crie um novo diretório www / no diretório do seu projeto da seguinte maneira:

$ mkdir -v www

Crie um novo arquivo web01.html no www / diretório e digite as seguintes linhas nesse arquivo.






Documento HTML básico


Olá Mundo



Quando terminar, salve o web01.html Arquivo.

Execute um servidor HTTP simples na porta 8080 usando o seguinte comando:

$ python3 -m http.servidor --diretório www / 8080

O servidor HTTP deve iniciar.

Você deve ser capaz de acessar o web01.html arquivo usando o URL http: // localhost: 8080 / web01.html, como você pode ver na imagem abaixo.

Enquanto o Firefox ou Chrome Developer Tool estiver aberto, pressione + F para abrir a caixa de pesquisa. Você pode digitar seu seletor XPath aqui e ver o que ele seleciona facilmente. Vou usar essa ferramenta em toda esta seção.

Um seletor XPath começa com um barra (/) a maior parte do tempo. É como uma árvore de diretório do Linux. O / é a raiz de todos os elementos da página da web.

O primeiro elemento é o html. Então, o seletor XPath / html seleciona o todo html marcação.

Dentro de html tag, temos um corpo marcação. O corpo tag pode ser selecionada com o seletor XPath / html / body

O h1 o cabeçalho está dentro do corpo marcação. O h1 o cabeçalho pode ser selecionado com o seletor XPath / html / body / h1

Este tipo de seletor XPath é chamado de seletor de caminho absoluto. No seletor de caminho absoluto, você deve percorrer a página da web a partir da raiz (/) da página. A desvantagem de um seletor de caminho absoluto é que mesmo uma pequena mudança na estrutura da página da web pode tornar seu seletor XPath inválido. A solução para este problema é um seletor XPath relativo ou parcial.

Para ver como funciona o caminho relativo ou parcial, crie um novo arquivo web02.html no www / diretório e digite as seguintes linhas de códigos nele.






Documento HTML básico


Olá Mundo



esta é a mensagem




Olá Mundo


Quando terminar, salve o web02.html arquivo e carregue-o em seu navegador da web.

Como você pode ver, o seletor XPath // div / p seleciona o p tag dentro do div marcação. Este é um exemplo de um seletor XPath relativo.

O seletor XPath relativo começa com //. Em seguida, você especifica a estrutura do elemento que deseja selecionar. Nesse caso, div / p.

Então, // div / p significa selecionar o p elemento dentro de um div elemento, não importa o que vem antes dele.

Você também pode selecionar elementos por diferentes atributos, como eu ia, aula, modelo, etc. usando seletor XPath. Vamos ver como fazer isso.

Crie um novo arquivo web03.html no www / diretório e digite as seguintes linhas de códigos nele.






Documento HTML básico


Olá Mundo



esta é a mensagem


esta é outra mensagem


título 2


Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam
eligendi doloribus sapiente, molestias quos quae non nam incidunt quis delectus
facilis magni officiis alias neque atque fuga? Unde, aut natus?




este é um rodapé


Quando terminar, salve o web03.html arquivo e carregue-o em seu navegador da web.

Digamos que você deseja selecionar todos os div elementos que têm o aula nome container1. Para fazer isso, você pode usar o seletor XPath // div [@ class = 'container1']

Como você pode ver, eu tenho 2 elementos que correspondem ao seletor XPath // div [@ class = 'container1']

Para selecionar o primeiro div elemento com o aula nome container1, adicionar [1] no final do XPath selecione, como mostrado na imagem abaixo.

Da mesma forma, você pode selecionar o segundo div elemento com o aula nome container1 usando o seletor XPath // div [@ class = 'container1'] [2]

Você pode selecionar elementos por eu ia também.

Por exemplo, para selecionar o elemento que tem o eu ia de rodapé-msg, você pode usar o seletor XPath // * [@ id = 'footer-msg']

Aqui o * antes [@ id = 'footer-msg'] é usado para selecionar qualquer elemento independentemente de sua tag.

Esse é o básico do seletor XPath. Agora, você deve ser capaz de criar seu próprio seletor XPath para seus projetos Selenium.

Conclusão:

Neste artigo, mostrei como encontrar e selecionar elementos de páginas da web usando o seletor XPath com a biblioteca Selenium Python. Também discuti os seletores XPath mais comuns. Depois de ler este artigo, você deve se sentir bastante confiante ao selecionar elementos de páginas da web usando o seletor XPath com a biblioteca Selenium Python.

Melhores jogos para jogar com rastreamento manual
Oculus Quest introduziu recentemente a grande ideia de rastreamento manual sem controladores. Com um número cada vez maior de jogos e atividades que e...
Como mostrar a sobreposição de OSD em aplicativos e jogos Linux em tela cheia
Jogar jogos em tela cheia ou usar aplicativos em modo de tela cheia sem distração pode cortar você das informações relevantes do sistema visíveis em u...
Top 5 cartas de captura de jogos
Todos nós vimos e amamos streaming de jogos no YouTube. PewDiePie, Jakesepticye e Markiplier são apenas alguns dos melhores jogadores que ganharam mil...