Uso de selectores CSS para buscar elementos en una página web

1. Recordando los selectores CSS

Bienvenid@ a nuestro mundo, donde las páginas HTML revelan sus secretos no por arte de magia, sino con selectores CSS precisos. Si crees que los selectores CSS solo sirven para estilizar páginas (o sea, para que tu sitio no parezca un cuaderno lleno de garabatos), es hora de que despiertes tu tercer ojo de scraper. Hoy veremos cómo los selectores CSS pueden convertirse en tu herramienta favorita para buscar y extraer datos.

Los selectores CSS, como una caricia dulce, nos permiten referirnos a los elementos de HTML. Ayudan a definir qué elementos en la página deseas manipular. Si una página HTML es un laberinto, los selectores CSS son el hilo rojo que te ayuda a encontrar la salida.

Ejemplos de selectores CSS

• Etiqueta: p — selecciona todos los elementos <p> (párrafos).
• Clase: .classname — selecciona todos los elementos con la clase especificada.
• ID: #idname — selecciona el elemento con el ID especificado.
• Combinaciones: div > p — selecciona todos los <p> que son elementos hijos directos de <div>.

2. Uso de selectores en BeautifulSoup

¡Adiós a la vida aburrida sin selectores CSS en BeautifulSoup! Es hora de refrescar nuestro enfoque. Imagina esto: te topas con un sitio y simplemente tienes que extraer todas las citas de grandes sabios, para impresionar en una entrevista. Para esto usamos el método select(), que funciona exactamente con selectores CSS.

El método select() y select_one()

El método select() te devuelve una lista de todos los elementos que coinciden con tu selector. Y select_one() encuentra para ti el primer elemento que coincide con el selector — como un motor de búsqueda que te da justo lo que necesitas, y no una lista interminable de resultados irrelevantes.

Supongamos que tienes una página HTML con citas:

<div class="quote">
    <h2 class="author">Pushkin</h2>
    <p class="text">Ay da Pushkin.</p>
    <a href="https://example.com" class="link">Leer más</a>
</div>
<div class="quote">
    <h2 class="author">Lenin</h2>
    <p class="text">Estudiar, estudiar y más estudiar.</p>
    <a href="https://example.com" class="link">Leer más</a>
</div>
<div class="quote">
    <h2 class="author">Stalin</h2>
    <p class="text">Hay persona — hay problema. No hay persona — no hay problema.</p>
    <a href="https://example.com" class="link">Leer más</a>
</div>

Así es como podemos obtenerlas:

from bs4 import BeautifulSoup
import requests

# Obtenemos el código HTML de la página
response = requests.get('http://quotes.toscrape.com/')
soup = BeautifulSoup(response.text, 'html.parser')

# Buscamos todas las citas usando selectores CSS
quotes = soup.select('.quote')

for quote in quotes:
    text = quote.select_one('.text').get_text()
    author = quote.select_one('.author').get_text()
    print(f'Cita: {text}\\nAutor: {author}\\n')

¿No es mágico? La clase .quote nos ayuda a obtener todos los elementos marcados como citas, mientras que .text y .author son elementos hijos desde los que extraemos el texto de la cita y el autor.

3. Ejemplos de búsqueda con selectores CSS

Practiquemos ejemplos para que tu cerebro brillante sepa qué hacer cuando vea un div con diez clases. Los selectores pueden ser utilizados para búsquedas más específicas en las páginas. Puedes combinarlos para obtener exactamente lo que necesitas.

Selector por clase y etiqueta

# Buscar todos los enlaces en el bloque del menú
menu_links = soup.select('nav.menu a')

for link in menu_links:
    print(link['href'])

Selector por ID

# Extraer el título principal de la página
main_heading = soup.select_one('#main-heading')
print(main_heading.text)

Combinación de selectores

# Buscar todas las frases en la sección destacada
highlighted_sentences = soup.select('.highlighted p')

for sentence in highlighted_sentences:
    print(sentence.text)

4. Errores y cómo evitarlos

Tu trabajo como scraper no siempre será tan sencillo como una taza de café. Hay casos en los que los selectores CSS pueden fallar, si:

• La página tiene contenido dinámico cambiante y los elementos necesarios se cargan a través de JavaScript.
• Estás refiriéndote a un selector que no existe (por ejemplo, hay un error al escribir la clase o el ID).
• La estructura HTML cambia, lo que lleva a una escena de terror en la que buscas desesperadamente los elementos necesarios.

Para evitar tales errores, asegúrate de trabajar con una versión estática y actualizada del documento HTML, y presta atención a la precisión al escribir los selectores.

Aplicación práctica

Ahora tienes la oportunidad de usar selectores CSS en proyectos reales de extracción de datos. Esta habilidad será útil para crear herramientas de análisis y monitoreo de precios, obtener noticias o incluso rastrear cambios en un sitio web. La belleza de este enfoque radica en que, incluso si el estilo del sitio cambia gracias a CSS, tu código permanecerá funcional, porque depende de la estructura HTML y no del estilizado.

1

Опрос

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

недоступен

Introducción a BeautifulSoup

Introducción a BeautifulSoup

Открыть