Requisitos previos
Antes de empezar, asegurémonos de que disponemos de las herramientas necesarias.
En primer lugar, descarga e instala Node.js desde el sitio web oficial, asegurándote de utilizar la versión Long-Term Support (LTS). Esto también instalará automáticamente Node Package Manager (NPM), que utilizaremos para instalar otras dependencias.
Para este tutorial, usaremos Visual Studio Code como nuestro Entorno de Desarrollo Integrado (IDE) pero puedes usar cualquier otro IDE de tu elección. Crea una nueva carpeta para tu proyecto, abre el terminal y ejecuta el siguiente comando para configurar un nuevo proyecto Node.js:
npm init -yEsto creará un archivo package.json en el directorio de su proyecto, que almacenará información sobre su proyecto y sus dependencias.
A continuación, tenemos que instalar TypeScript y las definiciones de tipo para Node.js. TypeScript ofrece tipado estático opcional que ayuda a prevenir errores en el código. Para ello, ejecuta en el terminal
npm install typescript @types/node --save-devPuede verificar la instalación ejecutando:
npx tsc --versionTypeScript utiliza un archivo de configuración llamado tsconfig.json para almacenar las opciones del compilador y otros ajustes. Para crear este archivo en su proyecto, ejecute el siguiente comando:
npx tsc -initAsegúrate de que el valor de "outDir" se establece en "dist". De esta forma separaremos los archivos TypeScript de los compilados. Puedes encontrar más información sobre este archivo y sus propiedades en la documentación oficial de TypeScript.
Ahora, crea un directorio "src" en tu proyecto, y un nuevo archivo "index.ts". Aquí es donde guardaremos el código de scraping. Para ejecutar código TypeScript tienes que compilarlo primero, así que para asegurarnos de que no olvidamos este paso extra, podemos usar un comando definido a medida.
Dirígete al archivo "package. json" y edita la sección "scripts" de la siguiente manera:
"scripts": {
"test": "npx tsc && node dist/index.js"
}De esta forma, cuando vayas a ejecutar el script, sólo tienes que escribir "npm run test" en tu terminal.
Por último, para escrapear los datos del sitio web utilizaremos Puppeteer, una librería de navegador headless para Node.js que permite controlar un navegador web e interactuar con sitios web de forma programática. Para instalarlo, ejecuta este comando en el terminal:
npm install puppeteerEs muy recomendable cuando se quiere asegurar la integridad de los datos, ya que hoy en día muchos sitios web contienen contenido generado dinámicamente. Si tienes curiosidad, puedes consultar antes de continuar la documentación de Puppeteer para ver completamente de lo que es capaz.
Localización de los datos
Ahora que ya tienes el entorno configurado, podemos empezar a ver cómo extraer los datos. Para este artículo, he decidido extraer datos de esta página de producto: https://www.walmart.com/ip/Keter-Adirondack-Chair-Resin-Outdoor-Furniture-Teal/673656371.
Vamos a extraer los siguientes datos:
- el nombre del producto;
- el número de valoración del producto;
- las opiniones sobre el producto cuentan;
- el precio del producto;
- las imágenes del producto;
- los detalles del producto.
Puede ver toda esta información resaltada en la siguiente captura de pantalla:
Abriendo las Herramientas de Desarrollador en cada uno de estos elementos podrás notar los selectores CSS que usaremos para ubicar los elementos HTML. Si eres bastante novato en el funcionamiento de los selectores CSS, no dudes en consultar esta guía para principiantes.
Extracción de datos
Antes de escribir nuestro script, vamos a verificar que la instalación de Puppeteer se ha realizado correctamente:
import puppeteer from 'puppeteer';
async function scrapeWalmartData(walmart_url: string): Promise<void> {
// Launch Puppeteer
const browser = await puppeteer.launch({
headless: false,
args: ['--start-maximized'],
defaultViewport: null
})
// Create a new page
const page = await browser.newPage()
// Navigate to the target URL
await page.goto(walmart_url)
// Close the browser
await browser.close()
}
scrapeWalmartData("https://www.walmart.com/ip/Keter-Adirondack-Chair-Resin-Outdoor-Furniture-Teal/673656371")Aquí abrimos una ventana del navegador, creamos una nueva página, accedemos a la URL de destino y, a continuación, cerramos el navegador. Para mayor simplicidad y facilitar la depuración visual, abro la ventana del navegador maximizada en modo no headless.
Ahora, echemos un vistazo a la estructura del sitio web:
Para obtener el nombre del producto, nos centramos en el atributo«itemprop»del elemento«h1». El resultado que buscamos es su contenido de texto.
// Extract product name
const product_name = await page.evaluate(() => {
const name = document.querySelector('h1[itemprop="name"]')
return name ? name.textContent : ''
})
console.log(product_name)En cuanto al número de valoración, hemos identificado como fiables los elementos«span»cuyo nombre de clase termina en«rating-number».
// Extract product rating number
const product_rating = await page.evaluate(() => {
const rating = document.querySelector('span[class$="rating-number"]')
return rating ? rating.textContent : ''
})
console.log(product_rating)Y, por último (en cuanto a la sección resaltada), para el número de reseñas y el precio del producto nos basamos en el atributo«itemprop», igual que antes.
// Extract product reviews count
const product_reviews = await page.evaluate(() => {
const reviews = document.querySelector('a[itemprop="ratingCount"]')
return reviews ? reviews.textContent : ''
})
console.log(product_reviews)
// Extract product price
const product_price = await page.evaluate(() => {
const price = document.querySelector('span[itemprop="price"]')
return price ? price.textContent : ''
})
console.log(product_price)Pasando a las imágenes del producto, nos desplazamos más abajo en el documento HTML:
Es un poco más complicado, pero no imposible. No podemos identificar las imágenes de forma unívoca por sí mismas, así que esta vez nos centraremos en sus elementos principales. Por lo tanto, extraemos los elementos «div» que tienen el atributo«data-testid»establecido en«media-thumbnail».
A continuación, convertimos el resultado en una matriz de JavaScript, para poder asignar cada elemento a su atributo«src».
// Extract product images
const product_images = await page.evaluate(() => {
const images = document.querySelectorAll('div[data-testid="media-thumbnail"] > img')
const images_array = Array.from(images)
return images ? images_array.map(a => a.getAttribute("src")) : []
})
console.log(product_images)Y, por último, pero no por ello menos importante, nos desplazamos hacia abajo en la página para consultar los detalles del producto:
Aplicamos la misma lógica que en la extracción de las imágenes y, en esta ocasión, simplemente utilizamos el nombre de clase«dangerous-html».
// Extract product details
const product_details = await page.evaluate(() => {
const details = document.querySelectorAll('div.dangerous-html')
const details_array = Array.from(details)
return details ? details_array.map(d => d.textContent) : []
})
console.log(product_details)El resultado final debería ser el siguiente:
Silla Keter Adirondack, muebles de exterior de resina, color verde azulado
(4,1)
269 opiniones
Ahora por 59,99 $
[
'https://i5.walmartimages.com/asr/51fc64d9-6f1f-46b7-9b41-8880763f6845.483f270a12a6f1cbc9db5a37ae7c86f0.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF', 'https://i5.walmartimages.com/asr/80977b5b-15c5-435e-a7d6-65f14b2ee9c9.d1deed7ca4216d8251b55aa45eb47a8f.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF',
'https://i5.walmartimages.com/asr/80c1f563-91a9-4bff-bda5-387de56bd8f5.5844e885d77ece99713d9b72b0f0d539.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF', 'https://i5.walmartimages.com/asr/fd73d8f2-7073-4650-86a3-4e809d09286e.b9b1277761dec07caf0e7354abb301fc.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF',
'https://i5.walmartimages.com/asr/103f1a31-fbc5-4ad6-9b9a-a298ff67f90f.dd3d0b75b3c42edc01d44bc9910d22d5.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF', 'https://i5.walmartimages.com/asr/120121cd-a80a-4586-9ffb-dfe386545332.a90f37e11f600f88128938be3c68dca5.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF',
'https://i5.walmartimages.com/asr/47b8397f-f011-4782-bbb7-44bfac6f3fcf.bb12c15a0146107aa2dcd4cefba48c38.jpeg?odnHeight=80&odnWidth=80&odnBg=FFFFFF'
]
[
'La silla Keter Adirondack te permite disfrutar de la comodidad y la sencillez de esta popular silla, pero sin las preocupaciones que conlleva la madera. Combinando el estilo tradicional y el aspecto y tacto de la madera con materiales duraderos y que no requieren mantenimiento, esta silla encontrará',
'Silla Keter Adirondack, muebles de exterior de resina, gris: Fabricada con una resina resistente a cualquier clima para una durabilidad máxima La estructura de polipropileno resistente a la intemperie evita la decoloración, el óxido, el desconchado y las abolladuras, a diferencia de la madera auténtica Montaje rápido y sencillo Portavasos giratorio La comodidad clásica redefinida Diseño ergonómico Duradera y resistente a la intemperie Relajación sin preocupaciones Dimensiones: 81 cm (largo) x 80 cm (ancho) x 97 cm (alto) La altura del asiento es de 39 cm, con un asiento envolvente profundo y un respaldo alto La silla pesa 10 kg: lo suficientemente pesada como para que no se la lleve el viento, pero lo suficientemente ligera como para reorganizar fácilmente el espacio de su terraza Capacidad de 159 kg '
]Eludir la detección de bots
Aunque extraer datos de Walmart pueda parecer fácil al principio, el proceso puede volverse más complejo y complicado a medida que amplías tu proyecto. La página web del minorista utiliza diversas técnicas para detectar y prevenir el tráfico automatizado, por lo que tu programa de extracción, al ampliarse, empieza a ser bloqueado.
Walmart utiliza el modelo CAPTCHA «Press & Hold» (pulsar y mantener pulsado), ofrecido por PerimeterX, que es conocido por ser prácticamente imposible de resolver desde el código. Además, el sitio web también utiliza las protecciones que ofrecen Akamai y ThreatMetrix, y recopila diversos datos del navegador para generar una huella digital única y asociarla al usuario.
Entre los datos recogidos del navegador encontramos:
- propiedades del objeto Navigator (deviceMemory, hardwareConcurrency, languages, platform, userAgent, webdriver, etc.)
- huellas digitales de Canvas
- controles de tiempo y rendimiento
- plugin y enumeración de voces
- trabajadores web
- comprobación de las dimensiones de la pantalla
- y muchos más
Una forma de superar estos retos y seguir realizando el scraping a gran escala es utilizar una API de scraping. Este tipo de servicios ofrecen una forma sencilla y fiable de acceder a los datos de sitios web como walmart.com, sin necesidad de crear y mantener tu propio programa de scraping.
WebScrapingAPI es un ejemplo de este tipo de producto. Su mecanismo de rotación de proxy evita por completo los CAPTCHA, y su base de conocimientos ampliada permite aleatorizar los datos del navegador para que se parezca a un usuario real.
La configuración es rápida y sencilla. Lo único que tienes que hacer es registrar una cuenta para recibir tu clave API. Puedes acceder a ella desde tu panel de control y se utiliza para autenticar las solicitudes que envías.
Como ya has configurado tu entorno Node.js, podemos hacer uso del SDK correspondiente. Ejecuta el siguiente comando para añadirlo a las dependencias de tu proyecto:
npm install webscrapingapiAhora sólo queda ajustar los selectores CSS anteriores a la API. La potente función de reglas de extracción permite analizar datos sin modificaciones significativas.
import webScrapingApiClient from 'webscrapingapi';
const client = new webScrapingApiClient("YOUR_API_KEY");
async function exampleUsage() {
const api_params = {
'render_js': 1,
'proxy_type': 'residential',
'timeout': 60000,
'extract_rules': JSON.stringify({
name: {
selector: 'h1[itemprop="name"]',
output: 'text',
},
rating: {
selector: 'span[class$="rating-number"]',
output: 'text',
},
reviews: {
selector: 'a[itemprop="ratingCount"]',
output: 'text',
},
price: {
selector: 'span[itemprop="price"]',
output: 'text',
},
images: {
selector: 'div[data-testid="media-thumbnail"] > img',
output: '@src',
all: '1'
},
details: {
selector: 'div.dangerous-html',
output: 'text',
all: '1'
}
})
}
const URL = "https://www.walmart.com/ip/Keter-Adirondack-Chair-Resin-Outdoor-Furniture-Teal/673656371"
const response = await client.get(URL, api_params)
if (response.success) {
console.log(response.response.data)
} else {
console.log(response.error.response.data)
}
}
exampleUsage();Conclusión
En este artículo te hemos ofrecido una visión general del web scraping en Walmart utilizando TypeScript junto con Puppeteer. Hemos explicado el proceso de configuración del entorno necesario, la identificación y la extracción de los datos, y hemos proporcionado fragmentos de código y ejemplos para guiarte a lo largo del proceso.
Entre las ventajas de extraer datos de Walmart se encuentran la obtención de información valiosa sobre el comportamiento de los consumidores, las tendencias del mercado, el seguimiento de precios y mucho más.
Además, recurrir a un servicio profesional de scraping puede ser una solución más eficaz, ya que garantiza que el proceso esté totalmente automatizado y se encargue de las posibles técnicas de detección de bots que puedan surgir.
Al aprovechar el potencial de los datos de Walmart, podrás llevar tu negocio al éxito y mantenerte por delante de la competencia. Recuerda respetar siempre las condiciones de uso del sitio web y no realizar un rastreo demasiado agresivo para evitar que te bloqueen.
