Requisitos previos
Antes de empezar, asegurémonos de que contamos con las herramientas necesarias.
En primer lugar, descarga e instala Node.js desde el sitio web oficial, asegurándote de utilizar la versión de soporte a largo plazo (LTS). Esto también instalará automáticamente Node Package Manager (NPM), que utilizaremos para instalar otras dependencias.
Para este tutorial, utilizaremos Visual Studio Code como nuestro entorno de desarrollo integrado (IDE), pero puedes utilizar 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 de Node.js:
npm init -yEsto creará un archivo package.json en el directorio de tu proyecto, que almacenará información sobre tu proyecto y sus dependencias.
A continuación, debemos instalar TypeScript y las definiciones de tipos para Node.js. TypeScript ofrece tipado estático opcional, lo que ayuda a prevenir errores en el código. Para ello, ejecuta en la terminal:
npm install typescript @types/node --save-devPuedes 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 tu proyecto, ejecuta el siguiente comando:
npx tsc -initAsegúrate de que el valor de «outDir» esté establecido en «dist». De esta forma separaremos los archivos de 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 nos olvidamos de este paso adicional, podemos usar un comando definido por nosotros mismos.
Ve 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 ejecutes el script, solo tendrás que escribir «npm run test» en tu terminal.
Por último, para extraer los datos del sitio web utilizaremos Puppeteer, una biblioteca de navegador sin interfaz gráfica para Node.js que te permite controlar un navegador web e interactuar con sitios web mediante programación. Para instalarlo, ejecuta este comando en la terminal:
npm install puppeteerEs muy recomendable si quieres asegurarte de que tus datos estén completos, ya que muchos sitios web actuales contienen contenido generado dinámicamente. Si tienes curiosidad, puedes echar un vistazo a la documentación de Puppeteer antes de continuar para ver todo lo que es capaz de hacer.
Localización de los datos
Ahora que ya tienes tu entorno configurado, podemos empezar a ver cómo extraer los datos. Para este artículo, he elegido 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;
- la puntuación del producto;
- el número de reseñas del producto;
- el precio del producto;
- las imágenes del producto;
- los detalles del producto.
Puedes ver toda esta información resaltada en la captura de pantalla siguiente:
Al abrir las Herramientas de desarrollador en cada uno de estos elementos, podrás ver los selectores CSS que utilizaremos para localizar los elementos HTML. Si eres bastante nuevo 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, comprobemos 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, navegamos a nuestra URL de destino y, a continuación, cerramos el navegador. En aras de la simplicidad y 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)Para el número de valoración, identificamos 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 (para 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 adentramos más en el documento HTML:
Es un poco más complicado, pero no imposible. No podemos identificar las imágenes de forma única por sí mismas, así que esta vez nos centraremos en sus elementos padres. 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 menos importante, nos desplazamos hacia abajo en la página para inspeccionar los detalles del producto:
Aplicamos la misma lógica que para extraer 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 tener este aspecto:
Keter Adirondack Chair, Resin Outdoor Furniture, Teal
(4.1)
269 reviews
Now $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'
]
[
'The Keter Adirondack chair lets you experience the easy-living comfort of the popular chair but with none of the worries of wood. Combining traditional styling and the look and feel of wood with durable and maintenance-free materials, this chair will find',
'Keter Adirondack Chair, Resin Outdoor Furniture, Gray: Made from an all-weather resistant resin for ultimate durability Weather-resistant polypropylene construction prevents fading, rusting, peeling, and denting - unlike real wood Quick and easy assembly Rotating cup holder Classic comfort redefined Ergonomic design Durable and weather-resistant Worry-free relaxation Dimensions: 31.9" L x 31.5" W x 38" H Seat height is 15.4 in. for a deep bucket seat and tall backrest Chair Weighs 22 lbs. - heavy enough to not blow over in the wind, yet light enough to easily rearrange your patio space 350 lbs. capacity '
]Evitar la detección de bots
Aunque extraer datos de Walmart puede parecer fácil al principio, el proceso puede volverse más complejo y desafiante a medida que amplías tu proyecto. El sitio web minorista implementa diversas técnicas para detectar y prevenir el tráfico automatizado, por lo que tu extractor ampliado empieza a ser bloqueado.
Walmart utiliza el modelo «Press & Hold» de CAPTCHA, ofrecido por PerimeterX, que es conocido por ser casi imposible de resolver desde tu código. Además de esto, el sitio web también utiliza protecciones ofrecidas por Akamai y ThreatMetrix y recopila múltiples datos del navegador para generar y asociarte con una huella digital única.
Entre los datos del navegador recopilados encontramos:
- propiedades del objeto Navigator (deviceMemory, hardwareConcurrency, languages, platform, userAgent, webdriver, etc.)
- huellas de canvas
- comprobaciones de tiempo y rendimiento
- enumeración de plugins y voz
- web workers
- comprobaciones de las dimensiones de la pantalla
- y mucho más
Una forma de superar estos retos y seguir realizando scraping a gran escala es utilizar una API de scraping. Este tipo de servicios ofrecen una forma sencilla y fiable de acceder a datos de sitios web como walmart.com, sin necesidad de crear y mantener tu propio scraper.
WebScrapingAPI es un ejemplo de este tipo de productos. Su mecanismo de rotación de proxies evita por completo los CAPTCHAs, y su amplia base de conocimientos permite aleatorizar los datos del navegador para que parezca un usuario real.
La configuración es rápida y sencilla. Solo tienes que registrarte para obtener tu clave API. Puedes acceder a ella desde tu panel de control y se utiliza para autenticar las solicitudes que envías.
Como ya ha configurado su entorno Node.js, podemos utilizar el SDK correspondiente. Ejecute el siguiente comando para añadirlo a las dependencias de su proyecto:
npm install webscrapingapiAhora solo queda ajustar los selectores CSS anteriores a la API. La potente función de reglas de extracción permite analizar los 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
Este artículo te ha presentado una visión general del web scraping de Walmart utilizando TypeScript junto con Puppeteer. Hemos analizado el proceso de configuración del entorno necesario, la identificación y extracción de los datos, y hemos proporcionado fragmentos de código y ejemplos para guiarte a lo largo del proceso.
Las ventajas de extraer datos de Walmart incluyen 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, optar por un servicio profesional de scraping puede ser una solución más eficiente, ya que garantiza que el proceso esté completamente 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, puedes impulsar tu negocio hacia el éxito y mantenerte por delante de la competencia. Recuerda respetar siempre los términos de servicio del sitio web y no realizar el scraping de forma demasiado agresiva para evitar ser bloqueado.
