Introducción a XPath y selectores CSS

1. ¿Qué son XPath y los selectores CSS?

Hoy daremos un gran paso hacia el dominio de la automatización web con Selenium y conoceremos XPath y los selectores CSS. Estas herramientas pequeñas pero potentes se convertirán en tus fieles compañeras para buscar elementos en páginas web. Adentrémonos juntos en el mundo de los selectores y aprendamos a usarlos para realizar búsquedas más precisas y eficientes.

Si un documento HTML fuera un bosque espeso, entonces XPath y los selectores CSS serían tus mapas y chuletas. Te permiten trazar el camino hasta el árbol necesario (o elemento, si prefieres la programación). Estas herramientas te ayudan a encontrar elementos en las páginas web, incluso si se esconden detrás de líneas de código y millones de etiquetas.

XPath

XPath (XML Path Language) es un lenguaje diseñado para la navegación en documentos XML. Pero, ¿quién dijo que el HTML no es un híbrido de XML? Por eso el uso de XPath en documentos HTML es tan conveniente. Literalmente puede acceder a cualquier elemento a través de la ruta que indiques.

Selectores CSS

Los selectores CSS provienen del mundo de las hojas de estilo en cascada. No te preocupes, no necesitas convertirte en diseñador para aprenderlos. Son para seleccionar exactamente elementos por su tipo, clase, identificador e incluso estado. Usarlos es más fácil de lo que parece: probablemente ya los hayas usado inconscientemente al estilizar páginas web.

2. Aplicación de XPath y selectores CSS en el código

Ahora que sabes lo que son estos maravillosos selectores, vayamos directo a la práctica. ¡Aprenderemos a usarlos con Selenium y hacer magia!

Uso de XPath

Aquí tienes un ejemplo de cómo usar XPath para buscar un elemento con Selenium:

from selenium import webdriver

# Configuración del driver
driver = webdriver.Chrome()

# Abriendo la página
driver.get('https://example.com')

# Buscando un elemento con XPath
element = driver.find_element_by_xpath('//div[@id="menu"]/ul/li/a')

# Mostrando el texto del elemento
print(element.text)

# Cerrando el navegador
driver.quit()

Explicación:

• //div[@id="menu"]/ul/li/a — este es nuestro XPath. Indica: "Hey, driver, encuéntrame el elemento a que está dentro de li, que está dentro de ul, que está en el div con id="menu"."

Uso de selectores CSS

Ahora veamos cómo usar los selectores CSS:

from selenium import webdriver

# Configuración del driver
driver = webdriver.Chrome()

# Abriendo la página
driver.get('https://example.com')

# Buscando un elemento con un selector CSS
element = driver.find_element_by_css_selector('div#menu > ul > li > a')

# Mostrando el texto del elemento
print(element.text)

# Cerrando el navegador
driver.quit()

Explicación:

• div#menu > ul > li > a — este es nuestro selector CSS. Busca un elemento de manera similar a XPath, pero con una sintaxis más concisa.

3. Diferencias entre XPath y selectores CSS

¿Te preguntas cuál es la diferencia entre XPath y los selectores CSS? ¡Buena pregunta! Vamos a desglosarlo para saber cuándo usar cada uno.

Flexibilidad vs. Simplicidad

XPath es más flexible: puedes moverte "hacia arriba" en el árbol DOM y usar condiciones lógicas complejas. Esto lo hace útil para consultas más avanzadas. Sin embargo, a veces la simplicidad y concisión de los selectores CSS los hacen más preferibles. Son más fáciles de leer y escribir, especialmente al buscar elementos por clase o identificador.

Soporte de funciones

XPath admite el uso de funciones, como comprobar texto o trabajar con atributos, por ejemplo, contains() o starts-with(). Por otro lado, los selectores CSS no tienen ese soporte tan completo.

Velocidad

En algunos casos, los selectores CSS son más rápidos. Esto se debe a que los navegadores están optimizados para trabajar con ellos, lo que los convierte en la opción predeterminada para tareas sencillas.

Sintaxis

XPath tiene una sintaxis más compleja, lo que puede ser tanto una ventaja como una desventaja. Los selectores CSS son más simples de escribir y aprender.

4. Aplicación práctica

Pongamos en práctica estos conocimientos con un ejemplo. Supongamos que tenemos una página web con una tabla de productos y necesitamos recopilar todos los nombres y precios de los productos. Aquí cómo hacerlo:

Ejemplo usando XPath

from selenium import webdriver

# Configuración del driver
driver = webdriver.Chrome()

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

# Buscando todos los elementos de productos
products = driver.find_elements_by_xpath('//table[@class="product-table"]/tbody/tr')

# Extrayendo datos de cada producto
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"Producto: {name}, Precio: {price}")

# Cerrando el navegador
driver.quit()

Ejemplo usando selectores CSS

from selenium import webdriver

# Configuración del driver
driver = webdriver.Chrome()

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

# Buscando todos los elementos de productos
products = driver.find_elements_by_css_selector('table.product-table > tbody > tr')

# Extrayendo datos de cada producto
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"Producto: {name}, Precio: {price}")

# Cerrando el navegador
driver.quit()

5. Detalles y errores comunes

Cuando usas XPath y selectores CSS, hay algunas trampas de las que debes cuidarte. Por ejemplo, al usar rutas absolutas en XPath, cualquier cambio en la estructura del HTML puede romper tu script. Por eso, siempre intenta utilizar rutas relativas para ser más flexible.

Los selectores CSS, por otro lado, pueden volverse ilegibles si se vuelven demasiado complejos, por lo que es importante equilibrar la precisión y la simplicidad.

También es importante manejar los errores. Si no se encuentra un elemento, Selenium lanzará una NoSuchElementException. Usa bloques try-except o métodos de espera como WebDriverWait para lidiar con esto y hacer tus scripts más robustos.

1

Опрос

Introducción a Selenium,  35 уровень,  4 лекция

недоступен

Introducción a Selenium

Introducción a Selenium

Открыть