¿Cómo encontrar elementos por selector CSS en Puppeteer?

Los selectores CSS son una de las formas más eficientes de realizar el parseo de páginas HTML al realizar Scraping web. En Node.js y Puppeteer, puede utilizar selectores CSS con los métodos page.$ y page.$$. Estos métodos le permiten interactuar con elementos de la página utilizando la sintaxis CSS habitual.

A continuación se muestra un código de ejemplo que muestra cómo utilizar estos métodos para encontrar elementos en una página, junto con comentarios detallados que le ayudarán a comprender cada paso.

      const puppeteer = require('puppeteer');

async function run() {
    // Iniciar una nueva instancia del navegador
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    // Navega a la página web de destino.
    await page.goto("https://httpbin.dev/html", { waitUntil: 'domcontentloaded' });

    // Obtén el primer elemento coincidente.
    const firstParagraph = await page.$("p");
    console.log("Primer elemento de párrafo encontrado:", firstParagraph);

    // Obtener todos los elementos coincidentes
    const allParagraphs = await page.$$("p");
    console.log("Total de párrafos encontrados:", allParagraphs.length);

    // Extraer y registrar el contenido de texto del primer párrafo
    const firstParagraphText = await page.$eval("p", element => element.innerText);
    console.log("Texto del primer párrafo:", firstParagraphText);

    // Extraer y registrar el atributo href de la primera etiqueta de anclaje
    const firstAnchorHref = await page.$eval("a", element => element.href);
    console.log("Href de la primera etiqueta de anclaje:", firstAnchorHref);

    // Contar el número total de elementos de párrafo.
    const paragraphCount = await page.$$eval("p", elements => elements.length);
    console.log("Número total de elementos de párrafo:", paragraphCount);

    // Modificar el texto interno del primer párrafo.
    await page.$eval("p", element => element.innerText = "Nuevo texto para el primer párrafo");
console.log("Modificado el texto del primer párrafo.");

// Cerrar el navegador
await browser.close();
}

// Ejecutar la función
run();

En este ejemplo, realizamos las siguientes acciones:

Iniciar una nueva instancia del navegador: esto inicia un nuevo navegador controlado por Puppeteer.
Navegar a la página web de destino: el método goto navega a la URL especificada y espera hasta que el contenido DOM de la página se haya cargado por completo.
Obtener el primer elemento coincidente: el método page.$ recupera el primer elemento que coincide con el selector CSS p.
Obtener todos los elementos coincidentes: el método page.$$ recupera todos los elementos que coinciden con el selector CSS p.
Extraer y registrar el contenido de texto del primer párrafo: el método page.$eval evalúa una función en el contexto del primer elemento coincidente y devuelve su innerText.
Extraer y registrar el atributo href de la primera etiqueta de anclaje: El método page.$eval recupera el atributo href de la primera etiqueta a.
Contar el número total de elementos de párrafo: El método page.$$eval evalúa una función en el contexto de todos los elementos coincidentes y devuelve el recuento total.
Modificar el texto interno del primer párrafo: el método page.$eval cambia el innerText del primer elemento p coincidente.
Cierre el navegador: esto garantiza que la instancia del navegador se cierre correctamente una vez finalizado el script.

Nota:

Es esencial esperar a que la página se cargue completamente antes de intentar buscar elementos, especialmente en páginas con contenido dinámico. Para obtener más información, consulte ¿Cómo esperar a que se cargue una página en Puppeteer?

Para conocer otras formas de localizar elementos, también puede consultar ¿Cómo encontrar elementos por XPath en Puppeteer?

Conclusión

El uso de selectores CSS con Puppeteer hace que las tareas de Scraping web y automatización sean sencillas y eficientes. Al comprender y aprovechar estos métodos, puede interactuar de manera eficaz con los elementos de las páginas web y extraer datos valiosos.

Prueba gratuita Empiece con Google.