先决条件
在开始之前，让我们先确保我们已经准备好了必要的工具。
首先，从官方网站下载并安装 Node.js，确保使用长期支持 (LTS) 版本。这也将自动安装 Node Package Manager（NPM），我们将使用它来安装更多依赖项。
在本教程中，我们将使用 Visual Studio Code 作为集成开发环境 (IDE)，但您也可以选择使用任何其他 IDE。为项目创建一个新文件夹，打开终端，运行以下命令建立一个新的 Node.js 项目：
npm init -y这将在项目目录中创建package.json文件，其中将存储有关项目及其依赖项的信息。
接下来，我们需要安装 TypeScript 和 Node.js 的类型定义。TypeScript 提供可选的静态类型，有助于防止代码出错。为此，请在终端运行
npm install typescript @types/node --save-dev您可以运行
npx tsc --versionTypeScript 使用名为tsconfig.json的配置文件来存储编译器选项和其他设置。要在项目中创建该文件，请运行以下命令：
npx tsc -init确保 "outDir"的值设置为 "dist"。这样我们就能将 TypeScript 文件与编译文件分开。有关此文件及其属性的更多信息，请参阅TypeScript 官方文档。
现在，在项目中创建一个 "src"目录和一个新的 "index.ts"文件。我们将在这里保存刮擦代码。要执行 TypeScript 代码，必须先编译它，因此为了确保我们不会忘记这个额外的步骤，我们可以使用自定义命令。
前往 "package.json"文件，然后像这样编辑 "脚本"部分：
"scripts": {
"test": "npx tsc && node dist/index.js"
}这样，在执行脚本时，只需在终端中输入 "npm run test"即可。
最后，我们将使用 Puppeteer 从网站上抓取数据。Puppeteer 是 Node.js 的无头浏览器库，可以控制网络浏览器并以编程方式与网站交互。要安装它，请在终端运行以下命令：
npm install puppeteer当你想确保数据的完整性时，强烈建议使用它，因为如今许多网站都包含动态生成的内容。如果你很好奇，可以在继续阅读Puppeteer 文档之前先查看一下它的功能。
查找数据
现在你已经设置好了环境，我们可以开始提取数据了。在本文中，我选择从以下产品页面抓取数据：https://www.walmart.com/ip/Keter-Adirondack-Chair-Resin-Outdoor-Furniture-Teal/673656371。
我们将提取以下数据：
- 产品名称；
- 产品评级编号；
- 产品评论很重要；
- 产品价格；
- 产品图片；
- 产品详情。
您可以在下面的截图中看到所有这些信息：
打开每个元素上的 "开发工具"，你就能看到我们用来定位 HTML 元素的 CSS 选择器。如果你对 CSS 选择器的工作原理还不太了解，请参考这本新手指南。
数据提取
在编写脚本之前，让我们验证一下 Puppeteer 的安装是否顺利：
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")在这里，我们打开一个浏览器窗口，创建一个新页面，导航到目标 URL，然后关闭浏览器。为了简化和可视化调试，我将浏览器窗口最大化为无头模式。
现在，让我们来看看网站的结构：
要获取产品名称，我们的目标是 "h1"元素的 "itemprop"属性。我们要查找的结果是其文本内容。
// Extract product name
const product_name = await page.evaluate(() => {
const name = document.querySelector('h1[itemprop="name"]')
return name ? name.textContent : ''
})
console.log(product_name)对于评级编号，我们认为类名以 "评级编号"结尾的 "span"元素是可靠的。
// 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)最后（对于高亮部分），对于评论数量和产品价格，我们依赖于 "itemprop"属性，就像上面说的那样。
// 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)接下来，我们在 HTML 文档中进一步浏览产品图像：
稍微有点麻烦，但并非不可能。我们无法唯一识别图片本身，因此这次我们将以图片的父元素为目标。因此，我们提取属性 "data-testid"设置为 "media-thumbnail"的 "div "元素。
然后，我们将结果转换为 Javascript 数组，这样就可以将每个元素映射到其 "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)最后，我们向下滚动页面，查看产品详情：
我们采用与提取图像相同的逻辑，这次只需使用 "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)最终结果应该是这样的
Keter 阿迪朗达克椅，树脂户外家具，青绿色
(4.1)
269 条评论
现价 $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'
]
[
'Keter Adirondack 椅让您体验这款热门座椅带来的惬意舒适，却无需担心木材的各种问题。它将传统风格与木材的外观和质感相结合，采用耐用且无需维护的材料，这款椅子将'
'Keter 阿迪朗达克椅，树脂户外家具，灰色： 采用全天候耐候树脂制成，确保极致耐用性 耐候聚丙烯结构可防止褪色、生锈、剥落和凹陷——与实木不同 快速简便的组装 旋转式杯架 重新定义经典舒适感 符合人体工学的设计 耐用且耐候 无忧放松 尺寸： 长 31.9 英寸 x 宽 31.5 英寸 x 高 38 英寸 座高 15.4 英寸，配有深桶形座椅和高靠背 椅子重 22 磅——足够稳固，不会被风吹倒，却又足够轻便，可轻松调整露台布局 承重 350 磅 '
]绕过僵尸检测
虽然沃尔玛的搜索起初看起来很容易，但随着项目规模的扩大，过程会变得更加复杂和具有挑战性。该零售网站采用了各种技术来检测和防止自动流量，因此您扩大规模后的搜刮程序会开始被阻止。
沃尔玛使用 PerimeterX 提供的 "按住 "模式验证码，众所周知，这种验证码几乎不可能从您的代码中破解。除此以外，该网站还使用 Akamai 和 ThreatMetrix 提供的保护措施，并收集多个浏览器数据，以生成并关联您的唯一指纹。
在收集到的浏览器数据中，我们发现
- Navigator 对象的属性（deviceMemory、hardwareConcurrency、languages、platform、userAgent、webdriver 等）。
- 帆布指纹
- 时间和性能检查
- 插件和语音识别
- 网络工作者
- 屏幕尺寸检查
- 以及更多
克服这些挑战并继续进行大规模刮擦的方法之一是使用刮擦 API。这类服务提供了一种简单可靠的方法来访问 walmart.com 等网站的数据，而无需构建和维护自己的刮擦器。
WebScrapingAPI 就是这样一款产品。它的代理旋转机制完全避免了验证码，其扩展知识库可以随机化浏览器数据，使其看起来像真实用户。
设置简单快捷。你只需注册一个账户，就会收到 API 密钥。您可以在仪表板上访问该密钥，它用于验证您发送的请求。
由于您已经设置了 Node.js 环境，我们可以使用相应的 SDK。运行以下命令将其添加到项目依赖项中：
npm install webscrapingapi现在只需根据 API 调整之前的 CSS 选择器即可。提取规则的强大功能使我们可以在不做重大修改的情况下解析数据。
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();结论
本文向您介绍了使用 TypeScript 和 Puppeteer 的 Web scraping Walmart 概述。我们讨论了设置必要环境、识别和提取数据的过程，并提供了代码片段和示例，以帮助指导您完成整个过程。
利用沃尔玛数据的优势包括获得对消费者行为、市场趋势、价格监控等方面的宝贵见解。
此外，选择专业的搜索服务可能是更有效的解决方案，因为它能确保搜索过程完全自动化，并能处理可能遇到的僵尸检测技术。
通过利用沃尔玛数据的力量，您可以推动您的业务取得成功，并在竞争中保持领先地位。切记始终尊重网站的服务条款，不要过于激烈地搜索，以免被屏蔽。
