Prérequis
Avant de commencer, assurons-nous de disposer des outils nécessaires.
Tout d'abord, téléchargez et installez Node.js depuis le site officiel, en veillant à utiliser la version à support à long terme (LTS). Cela installera également automatiquement Node Package Manager (NPM), que nous utiliserons pour installer d'autres dépendances.
Pour ce tutoriel, nous utiliserons Visual Studio Code comme environnement de développement intégré (IDE), mais vous pouvez utiliser tout autre IDE de votre choix. Créez un nouveau dossier pour votre projet, ouvrez le terminal et exécutez la commande suivante pour configurer un nouveau projet Node.js :
npm init -yCela créera un fichier package.json dans le répertoire de votre projet, qui stockera des informations sur votre projet et ses dépendances.
Ensuite, nous devons installer TypeScript et les définitions de types pour Node.js. TypeScript offre un typage statique facultatif qui aide à prévenir les erreurs dans le code. Pour ce faire, exécutez dans le terminal :
npm install typescript @types/node --save-devVous pouvez vérifier l'installation en exécutant :
npx tsc --versionTypeScript utilise un fichier de configuration appelé tsconfig.json pour stocker les options du compilateur et d'autres paramètres. Pour créer ce fichier dans votre projet, exécutez la commande suivante :
npx tsc -initAssurez-vous que la valeur de « outDir » est définie sur « dist ». De cette façon, nous séparerons les fichiers TypeScript des fichiers compilés. Vous trouverez plus d'informations sur ce fichier et ses propriétés dans la documentation officielle de TypeScript.
Créez maintenant un répertoire « src » dans votre projet, ainsi qu'un nouveau fichier « index.ts ». C'est là que nous conserverons le code de scraping. Pour exécuter du code TypeScript, vous devez d'abord le compiler. Afin de ne pas oublier cette étape supplémentaire, nous pouvons utiliser une commande personnalisée.
Rendez-vous dans le fichier « package.json » et modifiez la section « scripts » comme suit :
"scripts": {
"test": "npx tsc && node dist/index.js"
}Ainsi, lorsque vous exécuterez le script, il vous suffira de taper « npm run test » dans votre terminal.
Enfin, pour extraire les données du site web, nous utiliserons Puppeteer, une bibliothèque de navigateur sans interface graphique pour Node.js qui vous permet de contrôler un navigateur web et d’interagir avec des sites web par programmation. Pour l’installer, exécutez cette commande dans le terminal :
npm install puppeteerC'est fortement recommandé si vous souhaitez vous assurer de l'exhaustivité de vos données, car de nombreux sites web contiennent aujourd'hui du contenu généré dynamiquement. Si vous êtes curieux, vous pouvez consulter la documentation de Puppeteer avant de continuer pour découvrir toutes ses capacités.
Localisation des données
Maintenant que votre environnement est configuré, nous pouvons commencer à nous intéresser à l'extraction des données. Pour cet article, j'ai choisi d'extraire des données de cette page produit : https://www.walmart.com/ip/Keter-Adirondack-Chair-Resin-Outdoor-Furniture-Teal/673656371.
Nous allons extraire les données suivantes :
- le nom du produit ;
- la note attribuée au produit ;
- le nombre d'avis sur le produit ;
- le prix du produit ;
- les images du produit ;
- les détails du produit.
Vous pouvez voir toutes ces informations mises en évidence dans la capture d'écran ci-dessous :
En ouvrant les outils de développement sur chacun de ces éléments, vous pourrez repérer les sélecteurs CSS que nous utiliserons pour localiser les éléments HTML. Si vous débutez avec les sélecteurs CSS, n'hésitez pas à consulter ce guide pour débutants.
Extraction des données
Avant d'écrire notre script, vérifions que l'installation de Puppeteer s'est bien déroulée :
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")Ici, nous ouvrons une fenêtre de navigateur, créons une nouvelle page, accédons à notre URL cible, puis fermons le navigateur. Par souci de simplicité et pour faciliter le débogage visuel, j'ouvre la fenêtre de navigateur en mode non headless et en plein écran.
Examinons maintenant la structure du site web :
Pour obtenir le nom du produit, nous ciblons l'attribut « itemprop » de l'élément « h1 ». Le résultat que nous recherchons est son contenu textuel.
// Extract product name
const product_name = await page.evaluate(() => {
const name = document.querySelector('h1[itemprop="name"]')
return name ? name.textContent : ''
})
console.log(product_name)Pour le nombre d’évaluations, nous avons identifié comme fiables les éléments « span » dont le nom de classe se termine par « 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)Et enfin (pour la section surlignée), pour le nombre d'avis et le prix du produit, nous nous appuyons sur l'attribut « itemprop », comme ci-dessus.
// 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)Passons maintenant aux images des produits, en explorant plus en profondeur le document HTML :
C'est un peu plus délicat, mais pas impossible. Nous ne pouvons pas identifier les images de manière unique par elles-mêmes, nous allons donc cette fois-ci cibler leurs éléments parents. Nous extrayons donc les éléments « div » dont l'attribut « data-testid » est défini sur « media-thumbnail ».
Ensuite, nous convertissons le résultat en un tableau JavaScript, afin de pouvoir associer chaque élément à son attribut « 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)Enfin, nous faisons défiler la page vers le bas pour inspecter les détails du produit :
Nous appliquons la même logique que pour l'extraction des images, et cette fois-ci, nous utilisons simplement le nom de classe « 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)Le résultat final devrait ressembler à ceci :
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 '
]Contourner la détection des bots
Si le scraping de Walmart peut sembler facile au premier abord, le processus peut devenir plus complexe et difficile à mesure que vous développez votre projet. Le site web de vente au détail met en œuvre diverses techniques pour détecter et empêcher le trafic automatisé, de sorte que votre scraper à grande échelle commence à être bloqué.
Walmart utilise le modèle CAPTCHA « Press & Hold » proposé par PerimeterX, réputé pour être pratiquement impossible à résoudre à partir de votre code. En outre, le site web utilise également les protections offertes par Akamai et ThreatMetrix et collecte de nombreuses données de navigateur pour générer et vous associer à une empreinte digitale unique.
Parmi les données de navigateur collectées, on trouve :
- les propriétés de l'objet Navigator (deviceMemory, hardwareConcurrency, languages, platform, userAgent, webdriver, etc.)
- l'empreinte digitale canvas
- vérifications de timing et de performances
- énumération des plugins et de la voix
- les web workers
- vérifications des dimensions de l'écran
- et bien d'autres encore
Une façon de surmonter ces défis et de continuer à effectuer du scraping à grande échelle consiste à utiliser une API de scraping. Ce type de services offre un moyen simple et fiable d'accéder aux données de sites web tels que walmart.com, sans avoir à développer et à maintenir votre propre outil de scraping.
WebScrapingAPI est un exemple de ce type de produit. Son mécanisme de rotation de proxys permet d'éviter complètement les CAPTCHA, et sa base de connaissances étendue permet de randomiser les données du navigateur afin qu'il ressemble à un véritable utilisateur.
La configuration est rapide et facile. Il vous suffit de créer un compte pour recevoir votre clé API. Celle-ci est accessible depuis votre tableau de bord et sert à authentifier les requêtes que vous envoyez.
Comme vous avez déjà configuré votre environnement Node.js, nous pouvons utiliser le SDK correspondant. Exécutez la commande suivante pour l'ajouter aux dépendances de votre projet :
npm install webscrapingapiIl ne reste plus qu'à adapter les sélecteurs CSS précédents à l'API. La fonctionnalité puissante des règles d'extraction permet d'analyser les données sans modifications significatives.
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();Conclusion
Cet article vous a présenté un aperçu du web scraping de Walmart à l'aide de TypeScript et de Puppeteer. Nous avons abordé le processus de configuration de l'environnement nécessaire, d'identification et d'extraction des données, et fourni des extraits de code et des exemples pour vous guider tout au long du processus.
Le scraping des données de Walmart présente de nombreux avantages, notamment l'obtention d'informations précieuses sur le comportement des consommateurs, les tendances du marché, la surveillance des prix, et bien plus encore.
De plus, opter pour un service de scraping professionnel peut s'avérer une solution plus efficace, car cela garantit que le processus est entièrement automatisé et gère les éventuelles techniques de détection de bots rencontrées.
En exploitant la puissance des données de Walmart, vous pouvez mener votre entreprise vers le succès et garder une longueur d'avance sur la concurrence. N'oubliez pas de toujours respecter les conditions d'utilisation du site web et de ne pas effectuer de scraping de manière trop agressive afin d'éviter d'être bloqué.
