Localizando elementos por seletores CSS com selênio
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) Python virtualenv Pacote instalado no seu computador.
5) Mozilla Firefox ou Google Chrome Web navegadores instalados no seu computador.
6) Deve saber como instalar o driver do Firefox Gecko ou o Chrome Web Driver.
Para cumprir os requisitos 4, 5 e 6, leia meu artigo Introdução ao selênio com Python 3 no Linuxhint.com.
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 Selenium-CSS-seletor/ do seguinte modo:
$ mkdir -pv Selenium-CSS-seletor/driversNavegue até o Selenium-CSS-seletor/ Diretório do projeto da seguinte forma:
$ CD Selenium-CSS-seletor/Crie um ambiente virtual do Python no diretório do projeto da seguinte maneira:
$ virtualenv .VenvAtive o ambiente virtual da seguinte forma:
$ fonte .venv/bin/ativarInstale a biblioteca Selênio Python usando o PIP3 da seguinte forma:
$ PIP3 Instale o selênioBaixar 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 com Python 3. Se você precisar de ajuda, pesquise em Linuxhint.com Para esse artigo.
Obtenha seletor de CSS usando a ferramenta de desenvolvedor Chrome:
Nesta seção, vou mostrar como encontrar o seletor CSS 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 CSS usando o navegador do Google Chrome, abra o Google Chrome 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 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 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 de Ferramenta de desenvolvedor do Chrome Como você pode ver na captura de tela abaixo.
Para obter o seletor CSS do seu 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 > Seletor de cópia conforme marcado na captura de tela abaixo.
Eu colei o seletor CSS em um editor de texto. O seletor CSS parece como mostrado na captura de tela abaixo.
Obtenha o seletor de CSS usando a ferramenta de desenvolvedor do Firefox:
Nesta seção, vou mostrar como encontrar o seletor CSS 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 CSS 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 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 CSS do seu 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 > Seletor CSS conforme marcado na captura de tela abaixo.
O seletor CSS do seu elemento desejado deve parecer algo assim.
Extraindo dados usando seletor CSS com selênio:
Nesta seção, vou mostrar como selecionar elementos da página da web e extrair dados deles usando seletores CSS com a Biblioteca de Selenium Python.
Primeiro, crie um novo script python Ex00.py e digite as seguintes linhas de códigos.
do selênio importar webdriverde 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 ", Options = Options)
navegador.Get ("https: // www.unixtimestamp.com/")
Timestamp = navegador.find_element_by_css_selector ('h3.Danger de texto: Nth-Child (3) ')
Print ('Timestamp atual: % S' % (registro de data e hora.texto.Split (") [0]))
navegador.fechar()
Depois de terminar, salve o Ex00.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 Chrome Web.
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 seletor CSS 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.
É assim que a estrutura HTML dos dados do Timestamp UNIX no Unixtimestamp.com parece.
A linha 14 fecha o navegador.
Execute o script python Ex00.py do seguinte modo:
$ python3 ex00.pyComo você pode ver, os dados de carimbo de data e hora são impressos na tela.
Aqui, eu usei o navegador.Find_Element (por, seletor) método.
Como estamos usando seletores CSS, o primeiro parâmetro será Por.CSS_SELECTOR e o segundo parâmetro será o próprio seletor CSS.
Em vez de navegador.Find_Element () Método, você também pode usar navegador.find_element_by_css_selector (seletor) método. Este método precisa apenas de um seletor CSS para funcionar. O resultado será o mesmo.
O navegador.Find_Element () e navegador.find_element_by_css_selector () Os métodos são usados para encontrar e selecionar um único elemento na página da web. Se você deseja encontrar e selecionar vários elementos usando os seletores CSS, então você deve usar navegador.Find_Elements () e navegador.find_elements_by_css_selector () métodos.
O navegador.Find_Elements () o método leva os mesmos argumentos que o navegador.Find_Element () método.
O navegador.find_elements_by_css_selector () o método leva o mesmo argumento que o navegador.find_element_by_css_selector () método.
Vamos ver um exemplo de extrair uma lista de nomes usando seletores CSS do gerador de names aleatórios.Informações com selênio.
Como você pode ver, a lista não ordenada tem o nome da classe lista de nomes. Então, podemos usar o seletor CSS .Namelist Li Para selecionar todos os nomes da página da web.
Vamos passar por um exemplo de seleção de vários elementos da página da web usando seletores CSS.
Crie um novo script python Ex01.py e digite as seguintes linhas de códigos nele.
do selênio importar webdriverde 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 ", Options = Options)
navegador.Get ("http: // Random-Name-Generator.info/")
Nomes = navegador.find_elements (por.CSS_SELECTOR, '.namelist li ')
para nome em nomes:
Imprimir (nome.texto)
navegador.fechar()
Depois de terminar, salve o Ex01.py Script Python.
A linha 1-8 é a mesma que em Ex00.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 () método. Este método usa o seletor CSS .Namelist 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 Ex01.py do seguinte modo:
$ python3 ex01.pyComo 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 () método, você também pode usar o navegador.find_elements_by_css_selector () o método como antes. Este método precisa apenas de um seletor CSS para funcionar. O resultado será o mesmo.
Noções básicas dos seletores CSS:
Você sempre pode encontrar o seletor CSS de um elemento da página da web usando a ferramenta de desenvolvedor do navegador do Firefox ou Chrome. Este seletor CSS gerado automaticamente pode não ser o que você deseja. Às vezes você pode ter que escrever seu seletor CSS.
Nesta seção, vou falar sobre o básico dos seletores CSS para que você possa entender o que um determinado seletor de CSS está selecionando em uma página da web e escreva seu seletor CSS personalizado, se necessário.
Se você deseja selecionar um elemento na página da web usando o ID mensagem, O seletor CSS será #mensagem.
O seletor CSS .verde Selecionará um elemento usando um nome de classe verde.
Se você deseja selecionar um elemento (classe msg) dentro de outro elemento (classe recipiente), o seletor CSS será .recipiente .msg
O seletor CSS .msg.sucesso selecionará o elemento que possui duas classes CSS msg e sucesso.
Para selecionar todos os p Tags, você pode usar o seletor CSS p.
Para selecionar apenas o p tags dentro do div Tags, você pode usar o seletor CSS div p
Para selecionar o p tags que são os irmãos diretos do div Tags, você pode usar o seletor CSS div> p
Para selecionar todos os período e p Tags, você pode usar o seletor CSS p, span
Para selecionar o p tag imediatamente após o div Tag, você pode usar o seletor CSS div + p
Para selecionar o p tag após o div Tag, você pode usar o seletor CSS div ~ p
Para selecionar todos os p Tags que têm o nome da classe msg, você pode usar o seletor CSS p.msg
Para selecionar todos os período Tags que têm o nome da classe msg, você pode usar o seletor CSS período.msg
Para selecionar todos os elementos que têm o atributo Href, você pode usar o seletor CSS [href]
Para selecionar o elemento que tem o atributo nome e o valor do nome atributo é nome de usuário, você pode usar o seletor CSS [nome = "nome de usuário"]
Para selecionar todos os elementos que têm o atributo alt e o valor do alt atributo contendo a substring vscode, você pode usar o seletor CSS [alt ~ = "vscode"]
Para selecionar todos os elementos que têm o Href atributo e o valor do Href atributo começa com a string https, você pode usar o seletor CSS [href^= "https"]
Para selecionar todos os elementos que têm o Href atributo e o valor do Href atributo terminando com a string .com, você pode usar o seletor CSS [href $ = ”.com ”]
Para selecionar todos os elementos que têm o Href atributo e o valor do Href atributo tem a substring Google, você pode usar o seletor CSS [href*= "google"]
Se você quiser selecionar o primeiro li etiqueta dentro do ul Tag, você pode usar o seletor CSS Ul Li: Primeiro filho
Se você quiser selecionar o primeiro li etiqueta dentro do ul tag, você também pode usar o seletor CSS Ul Li: Nth-Child (1)
Se você quiser selecionar o último li etiqueta dentro do ul Tag, você pode usar o seletor CSS Ul Li: Último filho
Se você quiser selecionar o último li etiqueta dentro do ul tag, você também pode usar o seletor CSS Ul Li: Nth-Last-Child (1)
Se você quiser selecionar o segundo li etiqueta dentro do ul Tag a partir do início, você pode usar o seletor CSS Ul Li: Nth Child (2)
Se você quiser selecionar o terceiro li etiqueta dentro do ul Tag a partir do início, você pode usar o seletor CSS Ul Li: Nth-Child (3)
Se você quiser selecionar o segundo li etiqueta dentro do ul tag a partir do final, você pode usar o seletor CSS Ul Li: Nth-Last-Child (2)
Se você quiser selecionar o terceiro li etiqueta dentro do ul tag a partir do final, você pode usar o seletor CSS Ul Li: Nth-Last-Child (3)
Estes são os seletores CSS mais comuns. Você se encontrará usando esses projetos quase em todos os selenium. Existem muitos outros seletores de CSS. Você pode encontrar uma lista de todos eles nas escolas W3S.referência de seletores com CSS.
Cnclusion:
Neste artigo, mostrei como localizar e selecionar elementos da página da web usando seletores CSS com Selenium. Eu também discuti o básico dos seletores de CSS. Você deve poder usar seletores CSS confortavelmente para seus projetos de selênio.