如何使用 Puppeteer 和 Node.JS 进行 Web 抓取？

最新推荐文章于 2026-06-18 09:04:42 发布

原创

最新推荐文章于 2026-06-18 09:04:42 发布 · 1.7k 阅读

什么是 Headlesschrome？

Headless？是的，这意味着这个浏览器没有图形用户界面 (GUI)。不用鼠标或触摸设备与视觉元素交互，你需要使用命令行界面 (CLI) 来执行自动化操作。

Headlesschrome 和 Puppeteer

很多网页抓取工具都可适用于 Headlesschrome，并且 Headlesschrome 通常可以消除很多麻烦。

你可能还喜欢：如何检测和反检测 Headlesschrome？

Puppeteer 是什么？它是一个 Node.js 库，提供了一个高级 API 来控制 Headlesschrome 或 Chromium，或与 DevTools 协议进行交互。

今天我们将通过 Puppeteer 深入探索 Headlesschrome。

使用 Puppeteer 进行网页抓取的优势是什么？

正如你所想象的，使用 Puppeteer 进行网页抓取有几个很大的优势：

Puppeteer 抓取工具能够提取动态数据，因为 Headlesschrome 可以像普通浏览器一样渲染 JavaScript、图像等。
Puppeteer 网页抓取脚本更难检测和阻止。由于连接配置看起来像普通用户的配置，因此难以将其识别为自动化操作。

如何使用 Puppeteer 和 Node.JS 进行网页抓取？

在以下示例中，我们将执行基本的网页抓取，帮助你快速入门 Puppeteer。我们选择抓取的页面是 Amazon 的 Apple AirPods Pro 评论区。

但别担心，在此之前，我们还需要做一些准备工作：

安装和配置 Puppeteer

步骤 1. 请确保你已经安装了 Node.js。

如果没有，请直接安装 Node.js (LST)，然后通过 Node.js 的包管理器 npm 安装 Puppeteer。这个过程可能会有点长，因为 Puppeteer 还需要安装相应的 Chrome。

npm i puppeteer

步骤 2. 安装后，你可以运行以下演示代码，确保你的安装是正确的。

你也可以使用此演示代码对 Puppeteer 有一个大致的了解。不要在这里卡住，因为我们稍后将详细介绍 Puppeteer 的用法和相关场景。

Puppeteer 默认启用了 headless 模式。在这里，通过 puppeteer.launch({ headless: false }) 关闭 headless 模式，以便你看到抓取过程。

import puppeteer from 'puppeteer';
// 启动浏览器并打开一个新标签页
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
// 导航到指定的 URL
await page.goto('https://developer.chrome.com/');
// 设置屏幕大小
await page.setViewport({width: 1080, height: 1024});
// 定位搜索框元素并在搜索框中输入内容
await page.locator('.devsite-search-field').fill('automate beyond recorder');
// 等待并点击第一个搜索结果
await page.locator('.devsite-result-item-link').click();
// 使用唯一字符串定位完整标题
const textSelector = await page
  .locator('text/Customize and automate')
  .waitHandle();
const fullTitle = await textSelector?.evaluate(el => el.textContent);
// 打印完整标题
console.log('这篇博客文章的标题是 "%s".', fullTitle);
// 关闭浏览器实例
await browser.close();

Puppeteer 是一个基于 Promise 的异步库，通过 async await 可以非常直观地展示其功能。以上演示和后续示例不需要异步函数。这是因为 package.json 中设置了 "type": "module"，使其运行为 ES 模块。

页面分析

好了，我们开始吧。

请先打开 Apple AirPods Pro 的评论区，然后我们需要识别要抓取内容的元素。你可以通过按 Ctrl + Shift + I (Windows/Linux) 或 Cmd + Option + I (Mac) 打开 Devtools。

步骤 1. 点击控制台左上角的元素选择器
步骤 2. 使用鼠标悬停并选择你想要抓取的元素节点。控制台还会突出显示与此元素对应的 HTML 代码

Puppeteer 支持多种元素选择方法（puppeteer 选择器），但最推荐入门使用简单的 CSS 选择器。上面使用的 .devsite-search-field 也是一个 CSS 选择器。

对于复杂的 CSS 结构，调试控制台可以直接复制 CSS 选择器。右键单击需要抓取的元素 HTML，打开 菜单 > 复制 > 复制选择器。

但不建议你这样做，因为从复杂结构复制的选择器可读性非常差，不利于代码维护。当然，对于一些简单的选择和个人测试学习，完全没问题。

现在，元素选择器已经确定。我们可以使用 Puppeteer 尝试抓取我上面选择的用户名。

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(
  `https://www.amazon.com/Apple-Generation-Cancelling-Transparency-Personalized/product-reviews/B0CHWRXH8B/ref=cm_cr_dp_d_show_all_btm?ie=UTF8&reviewerType=all_reviews`
);

const username = await page.$eval('div[data-hook="genome-widget"] .a-profile-name', node => node.textContent)

console.log('[username]===>', username);

如你所见，上面的代码使用 page.goto 跳转到指定页面。然后 page.$eval 可以获取第一个匹配的元素节点，并通过回调

标签