Como encontrar elementos por seletor CSS no Selenium

Os seletores CSS são uma ferramenta poderosa para localizar elementos em uma página da web ao automatizar testes de navegador com Selenium. O uso de seletores CSS permite direcionar elementos de maneira precisa e flexível. Neste guia completo, cobriremos tudo que você precisa saber para se tornar um profissional na localização de elementos pelo seletor CSS no Selenium.

Uma introdução aos seletores CSS

Os seletores CSS permitem selecionar elementos HTML com base em id, classe, atributo, posição na árvore DOM e muito mais. Aqui estão alguns dos seletores CSS mais comumente usados:

Seletor de ID – Seleciona um elemento com base em seu ID exclusivo. Por exemplo #main-header selecionará o elemento com id="main-header".
Seletor de classe – Seleciona elementos com base no nome da classe. Por exemplo .article selecionará todos os elementos com class="article".
Seletor de atributos – Seleciona elementos com base em um determinado atributo ou valor de atributo. Por exemplo input[type="text"] selecionará todos os elementos de entrada com type="text".
Seletor de descendentes – Seleciona elementos que são descendentes de outro elemento especificado. Por exemplo div p selecionará todos os elementos p dentro dos elementos div.
Seletor filho – Seleciona elementos que são filhos diretos de outro elemento especificado. Por exemplo div > p selecionará p elementos que são filhos diretos de div.
Seletor de irmãos adjacentes – Seleciona o elemento irmão que segue imediatamente outro elemento. Por exemplo h2 + p selecionará o elemento p que vem imediatamente após um elemento h2.
Seletor geral de irmãos – Seleciona todos os elementos irmãos que seguem outro elemento. Por exemplo h2 ~ p selecionará todos os p elementos que vêm após um elemento h2.

Estes são apenas alguns exemplos dos muitos tipos de seletores CSS. Você pode combinar vários seletores para direcionar elementos de uma maneira muito específica.

Encontrando Elementos por Seletor CSS no Selenium

O Selenium fornece dois métodos principais para encontrar elementos usando seletores CSS:

driver.find_element_by_css_selector()

Este método retornará o primeiro elemento correspondente.

element = driver.find_element_by_css_selector(‘#main-header‘)

driver.find_elements_by_css_selector()

Este método retornará uma lista de todos os elementos correspondentes.

elements = driver.find_elements_by_css_selector(‘.article‘)

Ao usar esses métodos, você passa o seletor CSS como uma string. Aqui estão alguns exemplos de como você localizaria elementos com seletores diferentes:

PorId:

driver.find_element_by_css_selector(‘#signup-form‘)

Por aula:

driver.find_element_by_css_selector(‘.footer-links‘)

Por Atributo:

driver.find_element_by_css_selector(‘input[name="first_name"]‘)

Descendente:

driver.find_element_by_css_selector(‘div#content p.summary‘)

Criança:

driver.find_element_by_css_selector(‘ul.menu > li.active‘)

Irmão adjacente:

driver.find_element_by_css_selector(‘h1 + p.intro‘)

Irmão Geral:

driver.find_element_by_css_selector(‘h2 ~ p.related-posts‘)

Como você pode ver, os seletores CSS oferecem muitas opções para direcionar elementos de diferentes maneiras.

Dicas para escrever seletores CSS eficazes

Aqui estão algumas dicas a seguir ao escrever seletores CSS para encontrar elementos no Selenium:

Seja o mais específico possível – Use id, classe, atributos e vários seletores juntos para direcionar elementos com precisão. Isso evita correspondências falso-positivas.
Prefira a classe ao nome da tag – Nomes de tags como div, p, a, etc. As aulas permitem uma segmentação mais específica.
Use atributos exclusivos como nome ou título – Os atributos nome e título normalmente têm valores exclusivos que podem identificar um único elemento.
Use seletores irmãos com cuidado – Seletores irmãos adjacentes e gerais podem corresponder a mais elementos do que o pretendido se não forem escritos corretamente.
Evite seletores aninhados complexos – Encadear muitos seletores descendentes pode tornar os seletores propensos a quebrar. Tente limitar cada seletor a 3-4 níveis encadeados.
Divida os seletores longos em várias linhas – os seletores CSS não precisam ser de uma única linha. Dividi-los em várias linhas pode melhorar a legibilidade.

Seguir essas dicas ajudará você a escrever seletores CSS robustos e fáceis de manter para automatizar testes da web.

Exemplos comuns e casos de uso

Agora vamos dar uma olhada em alguns exemplos comuns de como os seletores CSS são usados para web scraping e testes de navegador com Selenium:

Selecionando links de navegação

Para selecionar os principais links de navegação, podemos usar um seletor de classes:

nav_links = driver.find_elements_by_css_selector(‘ul.main-nav > li > a‘)

Selecionando campos do formulário

Podemos selecionar campos de entrada do formulário com base na tag de entrada e no atributo type:

username = driver.find_element_by_css_selector(‘input[type="text"][name="username"]‘)
password = driver.find_element_by_css_selector(‘input[type="password"]‘)

Selecionando linhas e colunas da tabela

Os seletores CSS facilitam a segmentação de linhas e células específicas em uma tabela HTML:

# Get second row 
row = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2)‘) 

# Get cell in specific row/column
cell = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2) td:nth-child(3)‘)

Selecionando elementos filhos

Para selecionar apenas div filhos diretos de um contêiner, podemos usar o seletor de filhos:

children = driver.find_elements_by_css_selector(‘#container > div‘)

Selecionando elementos com base no texto

Podemos corresponder parcialmente ao texto do link usando o seletor *:

contact_link = driver.find_element_by_css_selector(‘a[href*="contact"]‘]

Estes exemplos demonstram como os seletores CSS podem ser usados em cenários reais de automação de testes.

Usando seletores CSS em outros idiomas

Os exemplos até agora usaram Python, mas seletores CSS podem ser usados em qualquer ligação de linguagem para Selenium:

Java

// By.cssSelector 
WebElement element = driver.findElement(By.cssSelector("div.main #login-form"));

// FindElement 
IWebElement element = driver.FindElement(By.CssSelector("div.main #login-form"));

JavaScript

// $ 
const element = await driver.$(‘div.main #login-form‘);

Não importa qual linguagem você esteja usando, os seletores CSS fornecem uma maneira poderosa e flexível de direcionar elementos.

Localizando Elementos por Nome de Classe

Um caso de uso comum é localizar elementos por nome de classe. Aqui estão algumas dicas para selecionar por classe no Selenium:

Combine o nome exato da classe – driver.find_element_by_class_name(‘primary-btn‘)
Use um seletor de classe CSS – driver.find_element_by_css_selector(‘.primary-btn‘)
Correspondência parcial de múltiplas classes – driver.find_element_by_css_selector(‘.primary.btn‘)
Combine o descendente com a classe – driver.find_element_by_css_selector(‘div .primary-btn‘)
Use várias classes para exclusividade – driver.find_element_by_css_selector(‘.primary-btn.large‘)

A correspondência por nome de classe é muito útil, mas certifique-se de direcionar classes que sejam exclusivas na página.

Encontrando Elementos por Nome de Tag

Localizar elementos pelo nome da tag HTML é outra tarefa comum do Selenium. aqui estão alguns exemplos:

Encontre a primeira instância do nome da tag:

element = driver.find_element_by_tag_name(‘button‘)

Encontre todas as instâncias do nome da tag:

buttons = driver.find_elements_by_tag_name(‘button‘)

Combine com o seletor CSS:

submit_btn = driver.find_element_by_css_selector(‘form button[type="submit"]‘)

Já que nomes de tags como <div> e <span> são comuns, tente também usar IDs, classes ou atributos para identificar exclusivamente o elemento.

Encontrando Elementos por Nome ou ID

Se os elementos tiverem atributos id ou name, a opção mais simples é localizar por nome ou ID.

Encontre por ID preciso:

element = driver.find_element_by_id(‘signup-form‘)

Encontre pelo nome exato:

element = driver.find_element_by_name(‘email‘)

Os localizadores de ID e nome corresponderão apenas aos valores exatos dos atributos. Isso os torna muito específicos, mas também propensos a quebrar se os IDs ou nomes mudarem.

Encontrando Elementos por XPath vs. Seletor CSS

XPath é a outra estratégia de localização de elemento comum no Selenium. Então, quando você deve usar seletores XPath vs. CSS?

Aqui estão algumas diferenças:

legibilidade – Os seletores CSS são mais legíveis e fáceis de entender para a maioria dos desenvolvedores.
Manutenção – Os seletores CSS são menos frágeis e propensos a quebrar alterações em comparação com XPaths longos e complexos.
Empresa – XPath pode acessar algumas propriedades de elementos que os seletores CSS não conseguem, como conteúdo de texto.
Performance – Os seletores CSS são mais rápidos para os navegadores combinarem em comparação com XPaths complexos.

Em geral, prefira seletores CSS para manutenção e desempenho. Use XPath apenas quando necessário para acessar algo que não é possível com CSS.

Melhores práticas ao usar seletores CSS

Aqui estão algumas práticas recomendadas a serem seguidas ao localizar elementos com seletores CSS:

Favoreça a exclusividade em vez da complexidade – Evite longas cadeias de seletores aninhados, se possível.
Use IDs e classes em vez de nomes de tags e aninhamento.
Tente combinar 3 ou menos níveis encadeados – Mais níveis aumentam a fragilidade.
Evite seletores universais como * – Estes são propensos a correspondências falso-positivas.
Divida seletores longos em múltiplas linhas – Melhora a legibilidade.
Seletores comumente usados em cache – salva pesquisas repetidas de seletores.
Use nomes descritivos de seletores – ajuda a esclarecer a intenção e evita sequências mágicas.

Seguir essas práticas recomendadas ajudará a escrever seletores CSS robustos, legíveis e confiáveis para automação Selenium.

Dicas para depurar seletores CSS

A depuração de seletores CSS é uma habilidade essencial para automação de testes. Aqui estão algumas dicas para solução de problemas:

Use as ferramentas de desenvolvedor do seu navegador para testar seletores – o Chrome DevTools fornece um inspetor de elementos conveniente.
Imprimir e inspecionar elementos correspondentes – Após a execução find_elements(), imprima os resultados para ver o que foi correspondido.
luta NoSuchElementException – Envolva as descobertas em um bloco try/except para capturar quando um elemento não for encontrado.
Gere XPath a partir do elemento de destino – Muitos navegadores permitem copiar o XPath, o que pode ajudar a construir o seletor CSS.
Simplifique seletores complexos – Tente remover atributos/classes/aninhamento até que o seletor funcione.
Use esperas explícitas, se necessário – páginas dinâmicas podem exigir esperas para que os seletores fiquem disponíveis.
Validar a precisão do seletor – Certifique-se de que o seletor esteja realmente encontrando o elemento desejado, não apenas qualquer elemento.

Reservar um tempo para depurar cuidadosamente os seletores será recompensado por meio de testes mais estáveis.

Conclusão

Este guia cobriu todos os aspectos principais da localização de elementos pelo seletor CSS no Selenium:

Sintaxe e tipos do seletor CSS
Uso com Selênio find_element métodos
Escrevendo seletores precisos e fáceis de manter
Casos de uso e exemplos comuns
Comparação com XPath
Depuração e práticas recomendadas

Os seletores CSS fornecem uma maneira poderosa e flexível de direcionar elementos para web scraping e automação de testes. Ao dominar as técnicas mostradas aqui, você pode escrever scripts de automação robustos que são resistentes a alterações na interface do usuário do aplicativo. O uso adequado de seletores CSS é uma habilidade obrigatória para qualquer engenheiro Selenium experiente.