Guía de 2024 para el raspado web con Playwright

La web contiene una enorme cantidad de datos cuyo valor puede ser incalculable para la investigación y para tomar decisiones empresariales. Por eso es tan importante aprender a usar herramientas como Playwright.

Playwright es una potente biblioteca Node.js que ha sido desarrollada por Microsoft que puede extraer datos de sitios web. En este artículo, verás ejemplos prácticos y detallados de cómo utilizar Playwright para extraer datos de la página de inicio de Bright Data. Después, podrás aplicar estos ejemplos a cualquier otro sitio web del que quieras extraer datos con Playwright.

Motivos para utilizar Playwright

El raspado web o «web scraping» no es un concepto nuevo. En el ecosistema de JavaScript, herramientas como Ch e erio, Selenium, Puppeteer y Playwright ayudan a que el raspado web sea más sencillo.

Playwright, una de las bibliotecas más nuevas para el raspado web, es especialmente interesante debido a las siguientes características:

Localizadores potentes

Playwright hace uso de localizadores, que tienen una lógica integrada de espera y de reintento automáticos que sirve para seleccionar los elementos de una página web. La lógica de espera automática simplifica tu código de raspado web porque no tienes que esperar a que una página web se cargue de forma manual.

La lógica de reintento hace que Playwright sea una biblioteca ideal para extraer modernas aplicaciones de página única (SPA) que cargan datos de forma dinámica después de haber cargado la página inicial.

Varios métodos de localización

Al usar localizadores, Playwright te permite indicar qué elementos quieres localizar en la página web mediante varias sintaxis diferentes, incluida la sintaxis del selector CSS, la sintaxis de XPath y el contenido de texto de los elementos. También puedes aplicar filtros a los localizadores para afinar aún más la búsqueda.

Raspado web con Playwright

En este apartado, vas a crear un proyecto de Node.js y a instalar Playwright, y vas a aprender a localizar, a interactuar y a extraer datos de una página web con Playwright.

Requisitos previos

Los fragmentos de código de este artículo se ejecutan en la última versión de soporte a largo plazo (LTS) de Node.js, que, en el momento de escribir este artículo, era la 18.15.0. Comprueba que tienes Node.js instalado antes de empezar.

También es muy recomendable tener un editor de código que pueda señalar y completar de forma automática la sintaxis de JavaScript, como, por ejemplo, Visual Studio Code.

Crear un proyecto nuevo

Abre una ventana de terminal nueva y crea una carpeta nueva para tu proyecto de Node.js y ve a la ventana con el siguiente comando:

mkdir playwright-demo
cd playwright-demo

A continuación, crea tu proyecto de Node.js ejecutando el siguiente comando npm:

npm init -y

Instalar Playwright

Cuando ya hayas creado un proyecto de Node.js, instala la biblioteca Playwright usando el siguiente comando en la ventana de tu terminal:

npm install playwright

Puede que la biblioteca tarde un poco en instalarse porque Playwright tiene que descargar los navegadores necesarios como parte de la instalación.

Abrir la página de inicio de Bright Data

Cuando ya hayas instalado la biblioteca Playwright, crea un archivo nuevo en la carpeta de tu proyecto que se llame index.js. Después, copia el siguiente código en el archivo:

// Import the Playwright library to use it
const playwright = require("playwright");

(async () => {
  // Launch a new instance of a Chromium browser
  const browser = await playwright.chromium.launch({
    // Set headless to false so you can see how Playwright is
    // interacting with the browser
    headless: false,
  });
  // Create a new Playwright context
  const context = await browser.newContext();
  // Create a new page/tab in the context.
  const page = await context.newPage();

  // Navigate to the Bright Data home page.
  await page.goto("https://brightdata.com/");

  // Wait 10 seconds (or 10,000 milliseconds)
  await page.waitForTimeout(10000);

  // Close the browser
  await browser.close();
})();

Ejecuta el fragmento de código con el siguiente comando en tu terminal:

node index.js

Debería abrirse el navegador Chromium y cargar la página de inicio de Bright Data:

Elementos de localización

Ahora que ya has sido dirigido a la página de inicio de Bright Data con Playwright, puedes utilizar los localizadores para seleccionar elementos específicos de la página web. Playwright tiene varios localizadores y en los siguientes apartados se muestra cómo funciona cada uno de ellos.

Localizar elementos con selectores CSS

Playwright te permite localizar elementos en una página web a través de los selectores de CSS, una sintaxis concisa pero potente que se utiliza en CSS para aplicar estilos a ciertos elementos HTML de la página web.

Por ejemplo, el logotipo de Bright Data es un elemento <svg> del encabezado de la página y tiene la clase page_header_logo_svg adjunta:

Con estos datos, puedes localizar el elemento SVG con un selector CSS:

const logoSvg = page.locator(".page_header_logo_svg");

El localizador se almacena en la variable logoSVG y, después, se puede usar para interactuar con el elemento o para extraerlo.

Localizar elementos con consultas XPath

XPath es otra sintaxis de selector que puedes utilizar para localizar elementos en un documento XML. Como HTML es XML, puedes usar esta sintaxis para buscar elementos HTML en una página web.

Por ejemplo, puedes seleccionar el mismo logotipo SVG que vimos en el apartado anterior con la siguiente consulta XPath:

const logoSvg = page.locator("//*[@class='page_header_logo_svg']");

Esta consulta que haces busca todos los elementos con la clase page_header_logo_svg adjunta y almacena su ubicación en la variable logoSVG.

Localizar elementos por función

Los elementos HTML pueden tener distintas funciones asociadas. Estas funciones aportan un significado semántico a la página web y esto facilita que los lectores de pantalla y otras herramientas puedan ayudar a que la página funcione. Puedes encontrar más información sobre las funciones aquí.

El siguiente fragmento de código muestra cómo puedes encontrar el botón Registrarse con la función y el nombre que se le asignan:

const signupButton = page.getByRole("button", {
  name: "Start free trial",
});

Este fragmento de código localizará el botón Iniciar prueba gratuita en la página de inicio:

const signupButton = page.getByRole("button", {
  name: "Start free trial",
});

Este fragmento de código localizará el botón Iniciar prueba gratuita en la página de inicio:

Localizar elementos por texto

Si un elemento HTML no tiene ningún atributo importante que lo identifique, como un atributo id o class, puedes elegir el elemento según su texto con el método getByText.

Por ejemplo, la página de inicio de Bright Data tiene un título en la sección «hero» con las palabras «datos estructurados» en azul:

Captura de pantalla de la página principal de Bright Data con las palabras «datos estructurados»

Puedes seleccionar el elemento <span> que contiene estas palabras utilizando el siguiente fragmento de código de Playwright:

const structuredData = page.getByText("structured data");

Localizar elementos por etiqueta

En un formulario HTML, los elementos de entrada suelen tener etiquetas. Playwright puede hacer uso de estas etiquetas para identificar el elemento de entrada que está asociado a esa etiqueta mediante el método getByLabel.

Por ejemplo, la página de Inicio de sesión de Bright Data tiene un elemento de entrada que incluye las palabras «correo electrónico del trabajo»:

Puedes localizar el elemento de entrada en la página y almacenarlo en una variable para utilizarlo más adelante con el siguiente fragmento de código:

// Navigate to the Bright Data login page.
await page.goto("https://brightdata.com/cp/start");

// Locate the <input> using the label
const emailInput = page.getByLabel("Work email");

Localizar elementos por marcador de posición

También puedes localizar un elemento de entrada en función del valor del marcador de posición que se muestra utilizando el método getByPlaceholder.

Verás que el campo del correo electrónico que aparece en la página Iniciar sesión de Bright Data tiene un texto de marcador de posición que le da contexto al usuario sobre la información que debe introducir.

El siguiente fragmento de código localizará este elemento en función del valor del marcador de posición que aparece en la entrada:

// Navigate to the Bright Data login page.
await page.goto("https://brightdata.com/cp/start");

// Locate the <input> using the placeholder
const emailInput = page.getByPlaceholder("[email protected]");

Localizar elementos por texto alternativo

HTML te permite añadirles a las imágenes una descripción de texto mediante el atributo alt, que aparece si la imagen no se carga y que los lectores de pantalla leen en voz alta para describir la imagen. El método getByAltText de Playwright te permite localizar un elemento img utilizando su atributo alt.

Por ejemplo, Bright Data enumera los sectores que utilizan sus datos. Puedes recuperar la imagen que se utiliza para el sector sanitario usando su valor alternativo, «caso práctico de sanidad»:

El siguiente fragmento de código localizará el elemento de imagen:

const healthcareImage = page.getByAltText("healthcare use case");

Localizar elementos por título

El último selector de Playwright que puedes usar para extraer datos es el método getByTitle, que localiza un elemento HTML por su atributo de título. Verás el valor del título cuando pases el cursor por encima del componente HTML.

Por ejemplo, el sitio web del servicio técnico de Bright Data incluye un enlace de inicio de sesión con un atributo de título:

Puedes usar el siguiente fragmento de Playwright para localizar el enlace por su atributo de título:

// Navigate to the Bright Data helpdesk webpage.
await page.goto("https://help.brightdata.com/hc/en-us");

// Locate the Sign in link using its title attribute
const signInLink = page.getByTitle("Opens a dialog");

Ahora que has visto algunos métodos que puedes utilizar para localizar elementos en una página web con Playwright, vamos a aprender a interactuar con estos elementos y a extraer datos de ellos.

Interactuar con elementos

Después de localizar un elemento en una página web, puedes interactuar con él. Por ejemplo, puede que tengas que iniciar sesión en un sitio web antes de extraer datos de las páginas protegidas.

Este fragmento de código muestra distintos métodos de Playwright para interactuar con los elementos de una página web. Encontrarás una explicación de cada función en el siguiente código:

// Import the Playwright library to use it
const playwright = require("playwright");

(async () => {
  // Launch a new instance of a Chromium browser
  const browser = await playwright.chromium.launch({
    // Set headless to false so you can see how Playwright is
    // interacting with the browser
    headless: false,
  });
  // Create a new Playwright context
  const context = await browser.newContext();
  // Create a new page/tab in the context.
  const page = await context.newPage();

  // Navigate to the Bright Data login page.
  await page.goto("https://brightdata.com/");

  // Locate and click on the signup button
  await page
    .locator("#hero_new")
    .getByRole("button", {
      name: "Start free trial",
    })
    .click();

  // Locate the first name field and FILL in a first name
  await page.locator(".hs_firstname input").fill("John");

  // Locate the last name field and FILL in a last name
  await page.locator(".hs_lastname input").fill("Smith");

  // Locate the email field and TYPE in an email address
  await page.locator(".hs_email input").type("[email protected]");

  // Locate the company size field and SELECT an option
  await page.locator(".hs_numemployees select").selectOption("1-9 employees");

  // Locate the terms and conditions checkbox and CHECK it.
  await page.locator(".legal-consent-container input").check();

  // Wait 10 seconds so you can see the result.
  await page.waitForTimeout(10000);

  // Close the browser
  await browser.close();
})();

Pega este fragmento de código en tu archivo index.js y vuelve a ejecutarlo con el siguiente comando:

node index.js

La página de inicio de Bright Data aparecerá un momento antes de mostrar un cuadro de diálogo del registro. A continuación, verás cómo Playwright rellena el formulario Regístrate con los diferentes métodos en este fragmento de código:

Hacer clic en elementos

En el fragmento de código anterior, Playwright primero hizo clic en el botón Registrarse para que apareciera el cuadro de diálogo:

// Locate and click on the signup button
await page
  .getByRole("button", {
    name: "Start free trial",
  })
  .click();

Playwright tiene dos métodos para hacer clic en los elementos:

click es el método que simula hacer un solo clic en un elemento.
dblclick es el método que simula hacer doble clic en un elemento.

En este ejemplo, solo había que hacer clic una vez en el botón Registrarse, por lo que el fragmento de código usa el método click.

Rellenar campos de texto

En este ejemplo, el fragmento de código hizo uso de dos métodos para rellenar los campos de texto del formulario Registrarse:

// Locate the first name field and FILL in a first name
await page.locator(".hs_firstname input").fill("John");

// Locate the last name field and FILL in a last name
await page.locator(".hs_lastname input").fill("Smith");

// Locate the email field and TYPE in an email address
await page.locator(".hs_email input").type("[email protected]");

El fragmento utiliza los métodos fill y type en diferentes campos. Ambas funciones rellenan un campo de texto, pero lo hacen de formas un poco distintas:

fill es un método que inserta el valor indicado en el campo de texto. Aunque esto funciona con la mayoría de los formularios, es posible que algunos sitios web impidan que insertes un valor completo.
type es un método que ayuda a paliar este problema porque simula la pulsación de cada tecla para introducir el valor indicado.

Lo más probable es que utilices el método fill en la mayoría de los casos, pero cuando haga falta, puedes usar el método type para simular que el valor se está introduciendo a mano.

Seleccionar una opción desplegable

El formulario Registrarse tiene un campo desplegable para elegir el tamaño de la empresa y Playwright lo rellenó con la opción «1 a 9 empleados»:

// Locate the company size field and SELECT an option
await page.locator(".hs_numemployees select").selectOption("1-9 employees");

Playwright te permite usar el método selectOption, que sirve para seleccionar los campos desplegables de un formulario. La función te permite seleccionar un elemento de una lista desplegable según el valor o la etiqueta y también elegir varias opciones en una selección múltiple.

Marcar los botones de opción y las casillas de verificación

Antes de enviar el formulario, tienes que aceptar los términos y condiciones. El siguiente fragmento de código marca la casilla de verificación correspondiente:

// Locate the terms and conditions checkbox and CHECK it.
await page.locator(".legal-consent-container input").check();

Para modificar una casilla de verificación, puedes utilizar los métodos check y uncheck:

check es un método que garantiza que la casilla esté marcada.
uncheck es un método que garantiza que la casilla no esté marcada.

Ahora que has visto cómo Playwright te permite interactuar con los elementos HTML de una página, en el siguiente apartado verás cómo extraer datos de la página.

Extraer datos de elementos

La extracción de datos es fundamental para el raspado web. Playwright te permite utilizar varios métodos para recuperar distintos tipos de datos de los elementos que has localizado previamente. En los siguientes apartados se explican algunos de estos métodos.

Extraer el texto interno

El método innerText permite extraer el texto interno de un elemento. Por ejemplo, la página de inicio de Bright Data tiene un elemento «hero» en la parte superior:

Puedes extraer el título del «hero» de la página de inicio de Bright Data utilizando el siguiente fragmento de código:

const headerText = await page.locator(".brd_hero__title.h1").innerText();
// headerText = "Turn websites\ninto structured data"

Si tu localizador apunta a más de un elemento, puede recuperar el texto de todos los elementos como si fuera una cadena de matrices usando el método allInnerTexts. Por ejemplo, la página de inicio de Bright Data tiene una lista de casos prácticos para sus datos:

Puedes extraer un listado de todos los casos prácticos de Bright Data con el siguiente fragmento de código:

  const useCases = await page
    .locator(".section_cases_row_col  .elementor-image-box-title")
    .allInnerTexts();
  // useCases = [
  //   'E-commerce',
  //   'Social Media for Marketing',
  //   'SERP & SEO',
  //   'Ad Tech',
  //   'Market Research',
  //   'Travel',
  //   'Financial Services',
  //   'Healthcare',
  //   'Real Estate',
  //   'Data for Good'
  // ]

Extraer el HTML interno

Playwright también te permite extraer el HTML interno de un elemento utilizando el método innerHTML. Por ejemplo, puedes obtener el código HTML del pie de página de la página principal de Bright Data con el siguiente fragmento de código:

const footerHtml = await page.locator("#footer").innerHTML();
// footerHtml = '<div class="container"><div class="footer__logo">...'

Extraer valores de atributos

Es posible que tengas que extraer datos de los atributos de un elemento HTML, como el atributo href de un enlace. En el siguiente fragmento de código de Playwright, puedes ver cómo eliminar la propiedad href del enlace Iniciar sesión:

const signUpHref = await page.getByText("Log in").getAttribute("href");
// signUpHref = '/cp/start'

Hacer capturas de pantalla

Cuando extraes datos, cabe la posibilidad de que tengas que hacer capturas de pantalla para futuras revisiones. Para ello, puedes utilizar el método screenshot. Esta función te permite configurar varias opciones, como dónde guardar la captura de pantalla y si la captura de pantalla tiene que ser de la página completa.

El siguiente fragmento de código hace una captura de pantalla de página completa de la página principal de Bright Data y la guarda:

await page.screenshot({
  // Save the screenshot to the "homepage.png" file
  path: "homepage.png",
  // Take a screenshot of the entire page
  fullPage: true,
});

Usar servicios automatizados de raspado web

Los fragmentos de código anteriores te enseñan a localizar, a interactuar y a extraer datos de una página web. Estos métodos te permitirán extraer casi cualquier dato de una página web. Sin embargo, requieren un trabajo previo porque hay que identificar los elementos adecuados antes de localizarlos. También tienes que tener en cuenta los CAPTCHA y los límites de velocidad al extraer datos de varias páginas de un único sitio web.

Bright Data ofrece varias soluciones que te ayudarán a centrarte en la extracción de datos. Bright Data cuenta con la herramienta Web Scraper IDE que tiene funciones y plantillas de JavaScript listas para usar que te ayudarán a extraer contenido de sitios web populares. También puedes omitir los CAPTCHA utilizando Web Unlocker y, además, evitar los límites de velocidad y los bloqueos de geolocalización con los servicios de proxy de Bright Data. Estos servicios suprimen muchos obstáculos en Playwright y te ayudan a extraer datos de forma más rápida y sencilla.

Empezar la prueba gratuita

Conclusión

En este artículo, has conocido Playwright, una biblioteca que ha sido desarrollada por Microsoft y que ayuda a extraer datos de sitios web, y, además, has aprendido a utilizar Playwright para localizar, interactuar y extraer datos de los elementos de una página web. Por último, has visto cómo un servicio automatizado de raspado web como Bright Data puede ayudarte a simplificar tus procesos de extracción de datos.

Guía para el raspado web con Playwright