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 linguagem XML Path, é um idioma para selecionar elementos de um documento XML. Como HTML e XML seguem a mesma estrutura de documentos, o XPath também pode ser usado para selecionar elementos de uma página da web.

A localização e a seleção de elementos da página da web é a chave para raspar a web com selênio. Para localizar e selecionar elementos na página da web, você pode usar os seletores XPath em Selenium.

Neste artigo, vou mostrar como localizar e selecionar elementos nas páginas da web usando seletores XPath em Selenium com a Biblioteca de Selênio Python. 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 no seu computador.
  3. Pip 3 instalado no seu computador.
  4. Pitão virtualenv Pacote instalado no seu computador.
  5. Mozilla Firefox ou Google Chrome Web navegadores instalados em seu computador.
  6. Deve saber como instalar o driver do Firefox Gecko ou o driver da Web Chrome.

Para cumprir os requisitos 4, 5 e 6, leia meu artigo Introdução ao selênio em Python 3. Você pode encontrar muitos artigos sobre os outros tópicos no Linuxhint.com. Não deixe de conferir se precisar de alguma assistência.

Configurando um diretório de projeto:

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

$ mkdir -pv Selenium -xpath/drivers

Navegue até o selênio-xpath/ Diretório do projeto da seguinte forma:

$ CD Selenium-XPath/

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

$ virtualenv .Venv

Ative o ambiente virtual da seguinte forma:

$ fonte .venv/bin/ativar

Instale a biblioteca Selênio Python usando o PIP3 da seguinte forma:

$ PIP3 Instale o selênio

Baixar e instalar todo o driver da web necessário 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 selênio em Python 3.

Obtenha o seletor XPath usando a ferramenta de desenvolvedor do Chrome:

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 embutida do navegador do Google Chrome.

Para obter o seletor XPath usando o navegador da Web do 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 Ferramenta de desenvolvedor do Chrome.

Você também pode pressionar + Mudança + EU Para abrir o Ferramenta de desenvolvedor do Chrome.

Ferramenta de desenvolvedor do Chrome deve ser aberto.

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

) ícone, conforme marcado na captura de tela abaixo.

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

A representação HTML do elemento web que você selecionou será destacada no Elementos guia do Ferramenta de desenvolvedor do Chrome, Como você pode ver na captura de tela abaixo.

Para obter o seletor XPath do elemento desejado, selecione o elemento do Elementos guia de Ferramenta de desenvolvedor do Chrome e clique com o botão direito do mouse (RMB). Em seguida, selecione cópia de > Copie XPath, conforme marcado na captura de tela abaixo.

Eu colei o seletor XPath em um editor de texto. O seletor XPath olha como mostrado na captura de tela abaixo.

Obtenha o seletor XPath usando a ferramenta de desenvolvedor do Firefox:

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 embutida do navegador Mozilla Firefox Web.

Para obter o seletor XPath usando o navegador da Web do Firefox, abra o Firefox e visite o site do qual você deseja extrair dados. Em seguida, pressione o botão direito do mouse (RMB) em uma área vazia da página e clique em Inspecione o elemento (Q) Para abrir o Ferramenta de desenvolvedor do Firefox.

Ferramenta de desenvolvedor do Firefox deve ser aberto.

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

) ícone, conforme marcado na captura de tela abaixo.

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

A representação HTML do elemento web que você selecionou será destacada no Inspetor guia de Ferramenta de desenvolvedor do Firefox, Como você pode ver na captura de tela abaixo.

Para obter o seletor XPath do elemento desejado, selecione o elemento do Inspetor guia de Ferramenta de desenvolvedor do Firefox e clique com o botão direito do mouse (RMB). Em seguida, selecione cópia de > Xpath conforme marcado na captura de tela abaixo.

O seletor XPath do seu elemento desejado deve parecer algo assim.

Extraindo dados das páginas da web usando o seletor XPath:

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

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

do selênio importar webdriver
de selênio.WebDriver.comum.teclas de importação
de selênio.WebDriver.comum.por importação por
opções = webdriver.Chromeoptions ()
opções.sem cabeça = verdadeiro
navegador = webdriver.Chrome (executável_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' % (registro de data e hora.texto.Split (") [0]))
navegador.fechar()

Depois de terminar, salve o Ex01.py Script Python.

A linha 1-3 importa todos os componentes de selênio necessários.

A linha 5 cria um objeto de opções do Chrome e a linha 6 permite o modo sem cabeça para o navegador da web Chrome.

A linha 8 cria um cromo 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 registro de data e hora da página usando o seletor XPath e o armazena no Timestamp variável.

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

Eu copiei o seletor XPath do marcado H2 elemento de unixtimestamp.com Usando a ferramenta de desenvolvedor do Chrome.

A linha 14 fecha o navegador.

Execute o script python Ex01.py do seguinte modo:

$ python3 ex01.py

Como você pode ver, os dados de carimbo de data e 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, qual é 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 Por vai ser Por.Xpath Como usaremos 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 () O método funciona para o seletor XPath, crie um novo script python ex02.py, copiar e colar todas as linhas de Ex01.py para ex02.py e mudar Linha 12 conforme marcado na captura de tela 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 () Os métodos são usados ​​para encontrar e selecionar um único elemento nas páginas da web. Se você deseja encontrar e selecionar vários elementos usando os seletores XPath, você deve usar navegador.find_elements_by_xpath () ou navegador.Find_Elements () métodos.

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

O navegador.Find_Elements () o método leva os mesmos argumentos que o navegador.Find_Element () método.

Vamos ver um exemplo de extrair uma lista de nomes usando o seletor XPath de Gerador de nome aleatório.informações Com a Biblioteca de Selênio 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 passar por um exemplo de seleção de vários elementos da página da web usando os seletores XPath.

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

do selênio importar webdriver
de selênio.WebDriver.comum.teclas de importação
de selênio.WebDriver.comum.por importação por
opções = webdriver.Chromeoptions ()
opções.sem cabeça = verdadeiro
navegador = webdriver.Chrome (executável_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.fechar()

Depois de 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 site-gerador de names aleatórios.informações.

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 O loop é usado para iterar através do nomes Liste e imprima 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 é Por.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 mudar a linha 12, conforme marcado na captura de tela abaixo.

Você deve obter o mesmo resultado de antes.

$ python3 ex04.py

Noções básicas do seletor XPath:

A ferramenta de desenvolvedor do Firefox ou do Google Chrome Web navegador gera 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 certo seletor XPath faz para construir seu seletor de XPath. Nesta seção, vou mostrar o básico dos seletores XPath. Em seguida, você poderá construir seu próprio seletor XPath.

Crie um novo diretório www/ No seu diretório de 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



Depois de 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 começar.

Você deve poder acessar o Web01.html Arquivo usando o URL http: // localhost: 8080/web01.HTML, como você pode ver na captura de tela abaixo.

Enquanto a ferramenta de desenvolvedor do Firefox ou Chrome é aberta, pressione + F Para abrir a caixa de pesquisa. Você pode digitar seu seletor XPath aqui e ver o que ele seleciona com muita facilidade. Vou usar esta ferramenta ao longo desta seção.

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

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

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

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

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

Para ver como o caminho relativo ou o caminho parcial funciona, 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


Depois de terminar, salve o Web02.html Arquive e carregue -o no seu navegador da web.

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

O seletor de XPath relativo começa com //. Então 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, tipo, etc. usando o 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


titular 2


Lorem ipsum dolor sit amet consecteter, adipisicing elit. Quibusdam
Eligendi doloribus sapiente, molestias quos quae non nam incidunt quis delcretus
facilis magni officiis pseudônimo neque atque fuga? Unde, AUT NATUS?




Este é um rodapé


Depois de terminar, salve o Web03.html Arquive e carregue -o no seu navegador da web.

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

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

Para selecionar o primeiro div elemento com o aula nome contêiner1, adicionar [1] No final do XPath Select, conforme mostrado na captura de tela abaixo.

Da mesma maneira, você pode selecionar o segundo div elemento com o aula nome contêiner1 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 Footer-msg, você pode usar o seletor XPath //*[@id = 'Footer-msg']

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

Esse é o básico do seletor XPath. Agora, você poderá criar seu próprio seletor XPath para seus projetos de selênio.

Conclusão:

Neste artigo, mostrei como encontrar e selecionar elementos nas páginas da web usando o seletor XPath com a Biblioteca Selenium Python. Eu também discuti os seletores XPath mais comuns. Depois de ler este artigo, você deve se sentir bastante confiante na seleção de elementos das páginas da web usando o seletor XPath com a Biblioteca de Python Selenium.