Introdução ao XPath e Seletores CSS

1. O que são XPath e Seletores CSS?

Hoje a gente vai dar um passo enorme no caminho para dominar a automação web com Selenium e conhecer os XPath e os Seletores CSS. Essas ferramentas pequenas, mas poderosas, vão se tornar suas companheiras fiéis na busca de elementos em páginas web. Bora mergulhar juntos no mundo dos seletores e aprender a usá-los para buscas mais precisas e eficientes.

Se um documento HTML fosse uma floresta densa, então XPath e Seletores CSS seriam seus mapas de bolso. Eles permitem que você trace o caminho para a árvore certa (ou elemento, se você prefere falar em programação). Essas ferramentas ajudam a encontrar elementos em páginas web, mesmo quando eles estão escondidos entre linhas de código e milhões de tags.

XPath

XPath (XML Path Language) é uma linguagem criada para navegar em documentos XML. Mas alguém disse que HTML é tipo um híbrido de XML, né? Por isso que XPath é tão fácil de usar em documentos HTML também. Ele consegue literalmente alcançar um elemento por qualquer caminho que você indicar.

Seletores CSS

Seletores CSS vêm do mundo das folhas de estilo em cascata. Calma, aprender isso não significa que você precisa se tornar designer! Eles servem para selecionar elementos com precisão pelo tipo, classe, id e até pelo estado do elemento. Usar seletores é mais simples do que parece — você provavelmente já usou sem perceber enquanto estiliza páginas web.

2. Usando XPath e Seletores CSS no código

Agora que você já sabe o que são essas maravilhas chamadas seletores, bora direto para a prática. Vamos descobrir como usá-los com Selenium e fazer mágica!

Usando XPath

Aqui vai um exemplo de como usar XPath para encontrar um elemento no Selenium:

from selenium import webdriver

# Configurando o driver
driver = webdriver.Chrome()

# Abrindo a página
driver.get('https://example.com')

# Encontrando o elemento via XPath
element = driver.find_element_by_xpath('//div[@id="menu"]/ul/li/a')

# Exibindo o texto do elemento
print(element.text)

# Fechando o navegador
driver.quit()

Explicação:

• //div[@id="menu"]/ul/li/a — esse é o nosso XPath. Ele diz: "Ei, driver, encontre o elemento a que está dentro de li, que está dentro de ul, que está dentro de um div com id="menu"."

Usando Seletores CSS

Agora vamos ver como usar os Seletores CSS:

from selenium import webdriver

# Configurando o driver
driver = webdriver.Chrome()

# Abrindo a página
driver.get('https://example.com')

# Encontrando o elemento via Seletor CSS
element = driver.find_element_by_css_selector('div#menu > ul > li > a')

# Exibindo o texto do elemento
print(element.text)

# Fechando o navegador
driver.quit()

Explicação:

• div#menu > ul > li > a — esse é o nosso Seletor CSS. Ele procurou o elemento de forma semelhante ao XPath, mas com uma sintaxe mais curta.

3. Diferenças entre XPath e Seletores CSS

Você deve estar se perguntando qual é a diferença entre XPath e Seletores CSS? Boa pergunta! Vamos analisar quando usar um ou outro.

Flexibilidade vs. Simplicidade

XPath é mais flexível: com ele, é possível navegar "para cima" na árvore DOM e usar condições lógicas avançadas. Isso o torna útil para buscas mais complexas. No entanto, às vezes a simplicidade dos Seletores CSS e sua sintaxe concisa os tornam mais preferíveis. Eles são mais fáceis de ler e escrever, especialmente para buscar elementos por classe ou id.

Suporte a Funções

XPath suporta o uso de funções — desde verificar texto até trabalhar com atributos, como contains() ou starts-with(). Os Seletores CSS, por outro lado, não têm um suporte tão completo.

Velocidade

Em alguns cenários, os Seletores CSS funcionam mais rápido. Isso acontece porque os navegadores são otimizados para trabalhar com Seletores CSS, fazendo deles a escolha padrão para tarefas simples.

Sintaxe

XPath tem uma sintaxe mais complicada, o que pode ser tanto uma vantagem quanto uma desvantagem. Já os Seletores CSS são mais simples de escrever e aprender.

4. Aplicando na prática

Bora aplicar esse conhecimento em uma tarefa real. Vamos supor que temos uma página web com uma tabela de produtos e precisamos coletar todos os nomes dos produtos e seus preços. Veja como isso pode ser feito:

Exemplo usando XPath

from selenium import webdriver

# Configurando o driver
driver = webdriver.Chrome()

# Abrindo a página
driver.get('https://example.com/products')

# Encontrando todos os elementos dos produtos
products = driver.find_elements_by_xpath('//table[@class="product-table"]/tbody/tr')

# Extraindo os dados de cada produto
for product in products:
    name = product.find_element_by_xpath('.//td[@class="product-name"]').text
    price = product.find_element_by_xpath('.//td[@class="product-price"]').text
    print(f"Produto: {name}, Preço: {price}")

# Fechando o navegador
driver.quit()

Exemplo usando Seletores CSS

from selenium import webdriver

# Configurando o driver
driver = webdriver.Chrome()

# Abrindo a página
driver.get('https://example.com/products')

# Encontrando todos os elementos dos produtos
products = driver.find_elements_by_css_selector('table.product-table > tbody > tr')

# Extraindo os dados de cada produto
for product in products:
    name = product.find_element_by_css_selector('td.product-name').text
    price = product.find_element_by_css_selector('td.product-price').text
    print(f"Produto: {name}, Preço: {price}")

# Fechando o navegador
driver.quit()

5. Particularidades e erros comuns

Quando você usa XPath e Seletores CSS, tem alguns detalhes importantes para evitar. Por exemplo, se você usar caminhos absolutos no XPath, o menor ajuste na estrutura do HTML pode quebrar seu script. Por isso, sempre tente usar caminhos relativos para manter a flexibilidade.

Seletores CSS, por sua vez, podem ficar difíceis de ler se forem muito complexos. Então, é importante buscar um equilíbrio entre precisão e simplicidade.

Também vale a pena mencionar o tratamento de erros. Se o elemento não for encontrado, o Selenium vai lançar uma NoSuchElementException. Use blocos try-except ou métodos de espera, como WebDriverWait, para lidar com isso e tornar seus scripts mais confiáveis.

1

Опрос

Introdução ao Selenium,  35 уровень,  4 лекция

недоступен

Introdução ao Selenium

Introdução ao Selenium

Открыть