La guía definitiva de scraping web y automatización de Playwright para 2023

Suciu Dan el 21 abr 2023

El scraping web y la automatización van de la mano en el mundo digital actual. Desde los sitios web de comparación de precios hasta las empresas basadas en datos, la capacidad de extraer y procesar datos de la web se ha convertido en una parte integral de muchas empresas en línea.

Introduzca Playwright: una herramienta que le permite automatizar tareas de web scraping y testing con facilidad. Playwright le permite controlar un navegador sin cabeza, dándole la capacidad de raspar datos e interactuar con sitios web de una manera rápida y eficiente.

En este artículo, exploraremos las capacidades de Playwright para la automatización y el scraping. Le mostraré cómo instalar y configurar Playwright, proporcionaré ejemplos de código para tareas comunes y hablaré de técnicas avanzadas como el manejo de formularios de inicio de sesión, la realización de capturas de pantalla, etc.

¿Qué es Playwright?

Playwright es una biblioteca Node.js multiplataforma de código abierto desarrollada por Microsoft que permite automatizar tareas en un navegador web. Está diseñada para ser fiable y fácil de usar, y es compatible con funciones web modernas como CSS3 y JavaScript.

Playwright puede utilizarse para tareas como probar aplicaciones web, automatizar tareas basadas en la web y realizar raspado web. Se basa en la popular biblioteca de pruebas web Puppeteer y su objetivo es ofrecer una API más fácil de usar y mantener.

Playwright es compatible con varios navegadores, incluidos Chromium, Firefox y WebKit. Esto significa que puede utilizarlo para automatizar tareas y raspar datos en distintos navegadores. Playwright le permite cambiar fácilmente entre navegadores y aprovechar sus características únicas.

Primeros pasos

Para instalar y configurar Playwright en una máquina local, necesitará tener instalados Node.js y npm (el gestor de paquetes para Node.js). Si aún no los tiene, puede descargarlos e instalarlos desde el sitio web oficial de Node.js.

Una vez que tengas Node.js y npm instalados, puedes instalar Playwright siguiendo estos pasos:

Abra un terminal o símbolo del sistema
Crear una carpeta llamada `playwright` donde vivirá el código de nuestro proyecto
Vaya a la carpeta recién creada
Ejecute el comando `npm init` para inicializar el proyecto (y crear el archivo package.json)
Instale la dependencia necesaria mediante el comando `npm install playwright`.

Scraping básico con Playwright

Crea un archivo llamado `index.js` y pega el siguiente código:

const { chromium } = require('playwright');

(async () => {

    // Launch a Chromium browser

    const browser = await chromium.launch();

    // Create a new page in the browser

    const page = await browser.newPage();

    // Navigate to a website

    await page.goto('https://coinmarketcap.com');

    // Get the page content

    const content = await page.content();

    // Display the content

    console.log(content);

    // Close the browser

    await browser.close();

})();

Este código lanzará un navegador Chromium sin cabeza, creará una nueva página, navegará a la página principal de CoinMarketCap, obtendrá el contenido de la página, registrará el contenido y luego cerrará el navegador.

Puedes utilizar un código similar para lanzar los otros navegadores soportados (Firefox y WebKit) requiriendo el módulo apropiado y sustituyendo "chromium" por "firefox" o "webkit".

Búsqueda de elementos para la extracción de datos

Ahora que tenemos una base para nuestro scraper, vamos a extraer algunos datos del sitio web de destino. En este ejemplo, recuperaremos el nombre y el precio de las 10 primeras divisas mostradas en la página.

Para ver el árbol DOM de la página principal de CoinMarketCap, abra el sitio web en un navegador, haga clic con el botón derecho en el nombre de una moneda y seleccione "Inspeccionar". Esto abrirá las Herramientas para desarrolladores y mostrará el árbol DOM.

Seleccionar los selectores adecuados es un arte en sí mismo. En este caso, el elemento de la tabla que queremos seleccionar es el contexto. Esta tabla tiene una clase llamada "cmc-table" que será útil para nuestros propósitos.

Para encontrar el selector del nombre de la moneda, tendremos que desplazarnos hacia abajo en el árbol DOM. El elemento que buscamos se encuentra dentro del elemento `.cmc-table tbody tr td:nth-child(3) a .name-area p`.

Como regla general, es importante ser lo más preciso posible al seleccionar los elementos, ya que así se minimiza el número de errores que hay que tratar.

Utilizando la misma técnica, podemos encontrar el selector para el precio, que es `.cmc-table tbody tr td:nth-child(3) a span`. Para recapitular, esta es nuestra lista de selectores:

Nombre `.cmc-table tbody tr td:nth-child(3) a .name-area p`
Precio: `.cmc-table tbody tr td:nth-child(4) a span`

Extracción de datos

Utilizando los selectores que identificamos anteriormente, vamos a extraer los datos de la página web y almacenarlos en una lista. La función $$eval devuelve una matriz de elementos que coinciden con un selector, evaluados en el contexto del DOM de la página.

Sustituyamos la línea console.log(content); por esto:

// Extract the currencies data

const currencies = await page.$$eval('.cmc-table tbody tr:nth-child(-n+10)', trs => {

    const data = []

    trs.forEach(tr => {

        data.push({

            name: tr.querySelector('td:nth-child(3) a .name-area p').innerHTML,

            price: tr.querySelector('td:nth-child(4) a span').innerHTML,

        })

    })

    return data

})

// Display the results

console.log(currencies)

Este código utiliza la función $$eval para seleccionar los 10 primeros elementos tr dentro de la tabla .cmc-table. A continuación, itera sobre estos elementos, selecciona las celdas de datos de la tabla utilizando los selectores que identificamos anteriormente y extrae su contenido de texto. Los datos se devuelven como una matriz de objetos.

Puede leer más sobre la función $$eval en la documentación oficial.

El código completo es el siguiente:

const { chromium } = require('playwright');

(async () => {

    // Launch a Chromium browser

    const browser = await chromium.launch();

    // Create a new page in the browser

    const page = await browser.newPage();

    // Navigate to a website

    await page.goto('https://coinmarketcap.com');

    // Extract the currencies data

    const currencies = await page.$$eval('.cmc-table tbody tr:nth-child(-n+10)', trs => {

   	 const data = []

   	 trs.forEach(tr => {

   		 data.push({

   			 name: tr.querySelector('td:nth-child(3) a .name-area p').innerHTML,

   			 price: tr.querySelector('td:nth-child(4) a span').innerHTML,

   		 })

   	 })

   	 return data

    })

    // Display the results

    console.log(currencies)

    // Close the browser

    await browser.close();

})();

Gestión de contenidos dinámicos

Sólo raspamos las 10 primeras monedas porque es la cantidad que CoinMarketCap carga en la carga inicial de la página. Para raspar más, tenemos que hacer una acción humana que es desplazarse por la página. Afortunadamente, Playwright es muy adecuado para esta tarea.

Empecemos por refactorizar la función $$eval que utilizábamos anteriormente e implementar la paginación. Llamaremos a esta nueva función extractData:

const extractData = async (page, currentPage, perPage = 10) => {

}

Ampliamos el selector :nth-child seleccionando elementos por pasos (elementos de 0 a 10, de 11 a 21, de 22 a 32, etc). Definimos el selector inicial (10 primeros elementos):

let selector = `:nth-child(-n+${currentPage * perPage})`;

Por último, pero no menos importante, añadimos soporte para las siguientes páginas. El código tiene este aspecto:

if(currentPage > 1) {

    selector = `:nth-child(n+${(currentPage - 1) + perPage}):nth-child(-n+${(currentPage * perPage) + 1})`;

}

La función final tendrá este aspecto:

const extractData = async (page, currentPage, perPage = 10) => {

    let selector = `:nth-child(-n+${currentPage * perPage})`;

    if(currentPage > 1) {

   	 selector = `:nth-child(n+${(currentPage - 1) + perPage}):nth-child(-n+${(currentPage * perPage) + 1})`;

    }

    return await page.$$eval(`.cmc-table tbody tr${selector}`, trs => {

   	 const data = [];

   	 trs.forEach(tr => {

   		 data.push({

   			 name: tr.querySelector('td:nth-child(3) a .name-area p').innerHTML,

   			 price: tr.querySelector('td:nth-child(4) a span').innerHTML,

   		 });

   	 });

   	 return data;

    });

};

Ahora es el momento de volver a nuestro código scraper, implementar scroll, y ampliar la extracción de datos. Hacemos todo el trabajo después de esta línea:

await page.goto('https://coinmarketcap.com');

Redefinimos la variable monedas:

// Extract the currencies data

let currencies = await extractData(page, 1, 10);

Usando la función evaluar, desplazamos la página a 1.5x de la ventana gráfica. Esto hará que se carguen los siguientes elementos de la tabla:

// Scroll the page to a little more than the viewport height

await page.evaluate(() => {

    window.scrollTo(0, window.innerHeight * 1.5);

});

El segundo de espera dará a la interfaz de usuario algo de espacio para rellenar la tabla con los datos recuperados de la API:

// Wait for the new elements to load

await page.waitForTimeout(1000);

Por último, extraigamos los datos de la segunda página y registremos los resultados:

// Extract the next 10 elements

currencies = [...currencies, ...await extractData(page, 2, 10)]

// Display the results

console.log(currencies)

El código completo para el scraper debería tener este aspecto:

const { chromium } = require('playwright');

const extractData = async (page, currentPage, perPage = 10) => {

    let selector = `:nth-child(-n+${currentPage * perPage})`;

    if(currentPage > 1) {

   	 selector = `:nth-child(n+${(currentPage - 1) + perPage}):nth-child(-n+${(currentPage * perPage) + 1})`;

    }

    return await page.$$eval(`.cmc-table tbody tr${selector}`, trs => {

   	 const data = [];

   	 trs.forEach(tr => {

   		 data.push({

   			 name: tr.querySelector('td:nth-child(3) a .name-area p').innerHTML,

   			 price: tr.querySelector('td:nth-child(4) a span').innerHTML,

   		 });

   	 })

   	 return data;

    })

};

(async () => {

    // Launch a Chromium browser

    const browser = await chromium.launch();

    // Create a new page in the browser

    const page = await browser.newPage();

    // Navigate to a website

    await page.goto('https://coinmarketcap.com');

    // Extract the currencies data

    let currencies = await extractData(page, 1, 10)

    // Scroll the page to a little more than the viewport height

    await page.evaluate(() => {

   	 window.scrollTo(0, window.innerHeight * 1.5);

    });

    // Wait for the new elements to load

    await page.waitForTimeout(1000);

    // Extract the next 10 elements

    currencies = [...currencies, ...await extractData(page, 2, 10)];

    // Display the results

    console.log(currencies);

    // Close the browser

    await browser.close();

})();

Para recapitular, el scraper abrirá la página de inicio de CoinMarketCap, extraerá los datos de las 10 primeras divisas, se desplazará por la página, extraerá los datos de las 10 divisas siguientes y mostrará los resultados.

Deberías obtener resultados similares a estos:

[

  { name: 'Bitcoin', price: '$16,742.58' },

  { name: 'Ethereum', price: '$1,244.45' },

  { name: 'Tether', price: '$0.9997' },

  { name: 'USD Coin', price: '$1.00' },

  { name: 'BNB', price: '$255.78' },

  { name: 'XRP', price: '$0.335' },

  { name: 'Binance USD', price: '$1.00' },

  { name: 'Dogecoin', price: '$0.07066' },

  { name: 'Cardano', price: '$0.2692' },

  { name: 'Polygon', price: '$0.7762' },

  { name: 'Dai', price: '$0.9994' },

  { name: 'Litecoin', price: '$73.80' },

  { name: 'Polkadot', price: '$4.59' },

  { name: 'Solana', price: '$12.95' },

  { name: 'TRON', price: '$0.0505' },

  { name: 'Shiba Inu', price: '$0.000008234' },

  { name: 'Uniswap', price: '$5.29' },

  { name: 'Avalanche', price: '$11.43' },

  { name: 'UNUS SED LEO', price: '$3.47' },

  { name: 'Wrapped Bitcoin', price: '$16,725.03' },

  { name: 'Cosmos', price: '$9.97' }

]

Técnicas avanzadas

Ahora que hemos cubierto los aspectos básicos del scraping web con Playwright, como la creación de un scraper, la búsqueda de selectores, la extracción de datos y la implementación del desplazamiento infinito, es hora de profundizar en algunas de las funciones más avanzadas que ofrece Playwright.

Por ejemplo, hacer capturas de pantalla, rellenar formularios, utilizar XPaths en lugar de selectores de clase y utilizar proxies para eludir los bloqueos de IP.

Hacer una captura de pantalla

Una de las ventajas de hacer capturas de pantalla durante el web scraping es que permite ver el aspecto de un sitio o aplicación web en distintos navegadores y resoluciones.

Esto puede ser especialmente útil para los desarrolladores, que pueden utilizar capturas de pantalla para depurar problemas de diseño y probar el aspecto de sus aplicaciones web en distintas plataformas.

Para tomar una captura de pantalla de página completa, puede utilizar el método de captura de pantalla del objeto Page. He aquí un ejemplo:

const screenshot = await page.screenshot();

Este código toma una captura de pantalla de toda la página y la devuelve como un Buffer. La función `screenshot` acepta propiedades. Podemos definir la ruta donde queremos que se guarde la captura de pantalla y si la captura de pantalla debe contener sólo la ventana gráfica o toda la página.

Este es el código completo:

const { chromium } = require('playwright');

(async () => {

    const browser = await chromium.launch();

    const page = await browser.newPage();

    await page.goto('https://coinmarketcap.com');

    // Take a full page screenshot and save the file

    await page.screenshot({

   	 path: "screenshot.png",

   	 fullPage: false

    });

    await browser.close();

})();

Puedes almacenar este código en un archivo llamado `screenshot.js` y ejecutar el código con el comando `node screenshot.js`. Tras la ejecución, se creará un archivo `screenshot.png` en la carpeta de tu proyecto.

Podemos hacer una captura de pantalla de un área de la página utilizando la propiedad `clip`. Necesitamos definir cuatro propiedades:

x: el desplazamiento horizontal desde la esquina superior izquierda
y: el desplazamiento vertical desde la esquina superior izquierda
anchura: la anchura del área
altura: la altura del área

La función de captura de pantalla con la propiedad clip establecida tendrá el siguiente aspecto:

// Take a screenshot of a part of the page

await page.screenshot({

    path: "screenshot.png",

    fullPage: false,

    clip: {

        x: 50,

        y: 50,

        width: 320,

        height: 160

    }

});

Rellenar formularios

Una de las ventajas de utilizar Playwright es que permite acceder a páginas protegidas. Al emular acciones humanas como hacer clic en botones, desplazarse por la página y rellenar formularios, Playwright puede eludir los requisitos de inicio de sesión y acceder a contenidos restringidos.

Utilicemos Playwright para acceder a nuestra cuenta de Reddit (si no tienes una cuenta de Reddit, hazte una ahora mismo).

Vaya a la página de inicio de sesión y utilice las técnicas que aprendimos en la sección "Encontrar elementos para la extracción de datos" para extraer las clases para las entradas de nombre de usuario y contraseña.

Los selectores deberían tener este aspecto:

Nombre de usuario: `#loginUsername`
Entrada de contraseña: `#loginPassword`
Botón de envío: `button[type="submit"]`

Usemos estos selectores en el código. Crea un archivo `login.js` y pega este código:

const { chromium } = require('playwright');

(async () => {

    const browser = await chromium.launch();

    const page = await browser.newPage();

    await page.goto('https://reddit.com/login');

    // Fill up the form

    await page.fill('#loginUsername', "YOUR_REDDIT_USERNAME");

    await page.fill('#loginPassword', "YOUR_REDDIT_PASSWORD");

    // Click the submit button

    await page.click('button[type="submit"]');

    // Wait for the new page to load

    await page.waitForNavigation()

    // Take a screenshot of the new page

    await page.screenshot({

   	 path: "reddit.png",

   	 fullPage: false

    });

    // Close the browser

    await browser.close();

})();

Para ejecutar el código y tomar una captura de pantalla de la página protegida, simplemente introduce node login.js en el terminal. Tras unos segundos, aparecerá una captura de pantalla llamada reddit.png en el directorio de tu proyecto.

Por desgracia, no puedo compartir la captura de pantalla resultante con vosotros, ya que la mayor parte de mi cuenta de Reddit no es segura para el trabajo.

Puede obtener más información sobre la autenticación con Playwright en la documentación oficial.

Uso de XPath para la extracción de datos

XPath puede ser una opción más estable para el web scraping porque es menos probable que cambie que los nombres de clase. Sitios web como Reddit y Google actualizan a menudo sus nombres de clase, lo que puede causar problemas a los scrapers que dependen de ellos.

En cambio, las expresiones XPath se basan en la estructura del documento HTML y es menos probable que cambien. Esto significa que puede utilizar XPath para identificar elementos de forma más fiable y estable, incluso en sitios web que actualizan con frecuencia sus nombres de clase.

Como resultado, el uso de XPath puede ayudarle a construir un raspador web más robusto y resistente que sea menos propenso a romperse cuando el sitio web se actualiza.

En este artículo sólo rascaremos la superficie de lo que puede hacer con XPath. Para una guía más completa, echa un vistazo a este artículo.

Volvamos a Reddit, abramos un subreddit y abramos las Herramientas para desarrolladores. Yo usaré el subreddit /r/webscraping, pero puedes elegir el subreddit que quieras.

Si examinas el árbol DOM, puedes notar que las clases para los elementos parecen ser generadas aleatoriamente. El uso de estas clases disminuiría la fiabilidad del rascador y requeriría un mantenimiento continuo.

Haga clic con el botón derecho en la etiqueta `h3`, vaya a Copiar y seleccione `Copiar XPath`. El resultado debería ser el siguiente:

//*[@id="t3_104ocrd"]/div[3]/div[2]/div[1]/a/div/h3

Antes de utilizar esta regla, vamos a eliminar la parte @id para que la ruta cubra todos los mensajes y no sólo el primero.

Es hora de ponerlo a trabajar. Crea el archivo `xpath.js` y pega este código:

const { chromium } = require('playwright');

(async () => {

    const browser = await chromium.launch();

    const page = await browser.newPage();

    await page.goto('https://reddit.com/r/webscraping');

    const titles = await page.$$eval("//*/div[3]/div[2]/div[1]/a/div/h3", element => {

   	 const data = []

   	 element.forEach(el => {

   		 data.push(el.innerHTML)

   	 })

   	 return data

    })

    console.log(titles)

    // Close the browser

    await browser.close();

})();

Para ejecutar el código, utiliza el comando `node xpath.js`. Esto devolverá una lista de títulos del subreddit que hayas seleccionado. Por ejemplo, mi lista tiene este aspecto:

¡[

 'A Year of Writing about Web Scraping in Review',

 'Linkedin Comments Scraper - Script to scrape comments (including name, profile picture, designation, email(if present), and comment) from a LinkedIn post from the URL of the post.',

 'Best Proxy Lists?',

 'Sorry if this is the wrong sub, but is it possible to extract an email from an old youtube account?',

 'Looking for people with datasets for sale!',

 '¿Los nombres de las clases de reddit cambian periódicamente (esos con letras y números aleatorios y demás)?',

 'Scrapear vídeos de múltiples sitios web',

 '¿Alguien quiere escribirme un programa que pueda automatizar la generación de un pdf de una suscripción a una revista?',

 'Scraping a Dynamic Webpage with rSelenium',

 'Is there a way to convert LinkedIn Sales Navigator URLs to a LinkedIn public URL?',

 'Gurufocus / Implemented new cloudflare protection?',

 'Scraper to collect APY data from Web3 frontends'

]

Puede obtener más información sobre XPath en la documentación oficial de Playwright. Puede encontrarla aquí.

El dramaturgo contra los otros

Playwright, Puppeteer y Selenium WebDriver son herramientas que se pueden utilizar para el web scraping y la automatización.

Playwright, desarrollada por Microsoft, es una herramienta más reciente que pretende ser una solución "completa" para la automatización web. Es compatible con varios navegadores (Chromium, Firefox y WebKit) y varios lenguajes de programación (JavaScript, TypeScript, Python y C#).

Puppeteer es una herramienta desarrollada por Google para el web scraping y la automatización que se basa en el protocolo Chrome DevTools. Se utiliza principalmente con JavaScript y tiene muchas características, incluyendo la toma de capturas de pantalla, la generación de archivos PDF, y la interacción con el DOM.

Selenium WebDriver es una herramienta de automatización y pruebas web compatible con múltiples lenguajes de programación y navegadores. Está orientada a las pruebas y puede requerir más configuración que otras herramientas.

Comparación del rendimiento

El rendimiento es una consideración importante a la hora de elegir una herramienta de web scraping. En esta sección, compararemos el rendimiento de Playwright, Puppeteer y Selenium WebDriver para ver qué herramienta es la más rápida y eficiente.

Durante nuestras pruebas, encontramos que Playwright y Puppeteer tenían tiempos de respuesta casi idénticos cuando se trataba de tareas de web scraping y automatización. Sin embargo, Selenium WebDriver fue significativamente más lento al inicio en comparación con las otras dos herramientas.

Conclusión

El web scraping permite extraer y procesar datos de sitios web, lo que proporciona una gran cantidad de información y oportunidades para empresas y particulares. Algunas de las ventajas del web scraping son:

Ahorro de costes: El scraping web puede ser una forma rentable de recopilar datos, ya que permite obviar la necesidad de adquirir costosas bases de datos o API.
Ahorro de tiempo: El raspado de grandes cantidades de datos puede hacerse mucho más rápido que su recopilación manual.
Datos actualizados: El raspado web puede ayudarle a mantener sus datos actualizados al permitirle raspar y actualizar periódicamente sus fuentes de datos.

Playwright es una potente herramienta para el web scraping, que ofrece una variedad de características que la convierten en la mejor opción para muchos usuarios. Algunas de las ventajas de utilizar Playwright son:

Compatibilidad con Chromium: Playwright está construido sobre Chromium, el proyecto de navegador de código abierto que impulsa Google Chrome, lo que le da acceso a las últimas características de la plataforma web y una amplia compatibilidad con sitios web.
Compatibilidad con varios navegadores: Playwright permite automatizar tareas en varios navegadores, incluidos Chrome, Firefox y Safari.
Facilidad de uso: Playwright tiene una API sencilla e intuitiva, lo que facilita empezar a realizar tareas de raspado web y automatización.
Versatilidad: Playwright se puede utilizar para una amplia gama de tareas, incluyendo web scraping, pruebas y automatización.

En general, los beneficios del web scraping y las ventajas de utilizar Playwright lo convierten en una herramienta esencial para cualquiera que desee extraer y procesar datos de la web.

Si está buscando una solución más sencilla para sus necesidades de web scraping, considere el uso de WebScrapingAPI. Nuestro servicio le permite raspar datos de cualquier sitio web sin necesidad de lidiar con las complejidades de configurar y mantener un raspador web.

Con WebScrapingAPI, sólo tiene que enviar una solicitud HTTP a nuestra API con la URL del sitio web que desea raspar, y nosotros le devolveremos los datos en el formato que prefiera (JSON, HTML, PNG).

Nuestra API se encarga de todo el trabajo pesado por usted, incluido eludir CAPTCHAs, gestionar bloqueos de IP y gestionar contenido dinámico.

Entonces, ¿por qué perder tiempo y recursos construyendo y manteniendo su propio raspador web cuando puede utilizar WebScrapingAPI y obtener los datos que necesita con sólo unas simples solicitudes de API? Pruébenos y vea cómo podemos ayudarlo a optimizar sus necesidades de raspado web.