Puppeteer 爬虫网页数据抓取：详细分步指南

如果你曾经试过从那些需要不停下拉加载、登录后才能看到价格，或者页面结构经常变动的网站抓数据，你一定懂那种抓狂的感觉。现在的静态爬虫早就不够用了。其实，现在有超过靠网页爬虫搞另类数据，用自动化工具盯着竞争对手的价格。但问题是，这些数据大多藏在动态网页里，要么靠 JavaScript 加载，要么藏在各种交互动作后面。这时候，无头浏览器自动化工具（比如 Puppeteer）就成了救命稻草。

作为一个长期做自动化和 AI 工具开发的人（也帮销售和运营团队爬过不少网站），我太清楚 Puppeteer 能帮你搞定传统爬虫搞不定的数据。但我也见过，很多业务同学一看到要写代码就头大。所以这篇指南会带你搞懂什么是 Puppeteer 爬虫，怎么用它抓网页数据，以及什么时候你可以选更简单的方案——比如我们的 AI 网页爬虫 ，完全不用写代码。

什么是 Puppeteer 爬虫？一分钟上手

先来点基础知识。 是 Google 推出的开源 Node.js 库，可以用 JavaScript 控制无头版的 Chrome 或 Chromium 浏览器。简单说，它就像一个“网页机器人”，能自动打开网页、点按钮、填表单、滚动页面，最重要的是——悄悄帮你把数据都扒下来。

Puppeteer 有哪些独特优势？

• 能渲染动态内容——也就是说，它会像真人一样等 JavaScript 加载完。
• 能模拟用户操作：点、输、滚动，弹窗也能搞定。
• 特别适合抓那些要交互后才显示数据的网站，比如电商列表、社交信息流、数据看板。

和其他工具比起来怎么样？

• Selenium：浏览器自动化的“老大哥”，支持多种浏览器和语言，但体积大、用法偏传统。适合做跨浏览器测试，但如果你只用 Chrome/Node.js，Puppeteer 更轻便。
• Thunderbit：我最推荐的。Thunderbit 是一款零代码、AI 驱动的网页爬虫，直接在浏览器用。无需写脚本，只要点“AI 智能识别字段”，AI 自动帮你提取想要的数据。特别适合想高效拿数据的业务同学（后面会详细说）。

一句话总结：Puppeteer = 代码高手的终极武器；Thunderbit = 不会写代码也能轻松搞定。

为什么 Puppeteer 网页爬虫对企业用户很重要

说实话，网页数据抓取早就不是黑客或者数据科学家的专利了。销售、运营、市场，甚至房产团队都在用网页数据提升竞争力。很多关键业务信息都藏在动态网站里，Puppeteer 往往就是打开这些数据大门的钥匙。

下面这些都是实打实的应用场景：

别忘了：每周有四分之一时间都在做重复性数据收集。用网页爬虫自动化这些流程，不只是锦上添花，简直是提升竞争力的必备利器。

入门指南：如何搭建你的 Puppeteer 爬虫

准备好动手了吗？只要你有点 JavaScript 基础，10 分钟就能跑起来：

1. 安装 Node.js
Puppeteer 需要 Node.js。去 下最新版 LTS。

2. 新建项目文件夹
打开终端，输入：

1mkdir puppeteer-scraper-demo
2cd puppeteer-scraper-demo
3npm init -y

3. 安装 Puppeteer

1npm install puppeteer

这一步会自动下载兼容的 Chromium 浏览器（大概 100MB）。

4. 写你的第一个脚本
新建 scrape.js 文件：

1const puppeteer = require('puppeteer');
2(async () => {
3  const browser = await puppeteer.launch();
4  const page = await browser.newPage();
5  await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
6  const title = await page.title();
7  console.log('Page title:', title);
8  await browser.close();
9})();

运行：

1node scrape.js

如果看到“Page title: Example Domain”，恭喜你，已经自动化 Chrome 了！

实战：写一个 Puppeteer 网页爬虫脚本

举个例子，假如你想从 （一个爬虫练习站）抓名言。

步骤 1：打开页面

1await page.goto('http://quotes.toscrape.com', { waitUntil: 'networkidle0' });

步骤 2：提取数据

1const quotes = await page.evaluate(() => {
2  return Array.from(document.querySelectorAll('.quote')).map(node => ({
3    text: node.querySelector('.text')?.innerText.trim(),
4    author: node.querySelector('.author')?.innerText.trim(),
5    tags: Array.from(node.querySelectorAll('.tag')).map(tag => tag.innerText.trim())
6  }));
7});
8console.log(quotes);

步骤 3：处理分页

1let hasNext = true;
2let allQuotes = [];
3while (hasNext) {
4  // 如上提取 quotes
5  const quotes = await page.evaluate(/* ... */);
6  allQuotes.push(...quotes);
7  const nextButton = await page.$('li.next > a');
8  if (nextButton) {
9    await Promise.all([
10      page.click('li.next > a'),
11      page.waitForNavigation({ waitUntil: 'networkidle0' })
12    ]);
13  } else {
14    hasNext = false;
15  }
16}

步骤 4：保存为 JSON 文件

1const fs = require('fs');
2fs.writeFileSync('quotes.json', JSON.stringify(allQuotes, null, 2));

这样你就有了一个能自动翻页、提取并保存数据的 Puppeteer 爬虫。

进阶技巧：搞定动态内容的 Puppeteer 爬虫

大多数真实网站比静态列表复杂多了。下面这些是常见难题的解决办法：

1. 等待动态元素加载

1await page.waitForSelector('.product-list-item');

确保你要的数据已经加载出来。

2. 模拟用户操作

• 点击按钮： await page.click('#load-more');
• 输入内容： await page.type('#search', 'laptop');
• 滚动页面（无限加载）：

  1let previousHeight = await page.evaluate('document.body.scrollHeight');
  2while (true) {
  3  await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
  4  await page.waitForTimeout(1500);
  5  const newHeight = await page.evaluate('document.body.scrollHeight');
  6  if (newHeight === previousHeight) break;
  7  previousHeight = newHeight;
  8}

3. 处理登录流程

1await page.goto('https://exampleshop.com/login');
2await page.type('#login-username', 'myusername');
3await page.type('#login-password', 'mypassword');
4await page.click('#login-button');
5await page.waitForNavigation({ waitUntil: 'networkidle0' });

4. 抓取 AJAX 加载的数据 有时候数据不是直接在页面里，而是通过 API 返回。你可以监听网络响应：

1page.on('response', async response => {
2  if (response.url().includes('/api/products')) {
3    const data = await response.json();
4    // 处理数据
5  }
6});

实战案例：抓取电商网站商品数据

综合一下，假设你想在登录后抓某电商网站的商品名称、价格和图片。

1const puppeteer = require('puppeteer');
2const fs = require('fs');
3(async () => {
4  const browser = await puppeteer.launch({ headless: true });
5  const page = await browser.newPage();
6  // 步骤 1：登录
7  await page.goto('https://exampleshop.com/login');
8  await page.type('#login-username', 'myusername');
9  await page.type('#login-password', 'mypassword');
10  await page.click('#login-button');
11  await page.waitForNavigation({ waitUntil: 'networkidle0' });
12  // 步骤 2：进入商品分类页
13  await page.goto('https://exampleshop.com/category/laptops', { waitUntil: 'networkidle0' });
14  // 步骤 3：提取商品信息
15  const products = await page.evaluate(() => {
16    return Array.from(document.querySelectorAll('.product-item')).map(item => ({
17      name: item.querySelector('.product-title')?.innerText.trim() || '',
18      price: item.querySelector('.product-price')?.innerText.trim() || '',
19      image: item.querySelector('img.product-image')?.src || ''
20    }));
21  });
22  // 步骤 4：保存为 JSON 文件
23  fs.writeFileSync('products.json', JSON.stringify(products, null, 2));
24  await browser.close();
25})();

这个脚本会自动登录、跳转、抓取并保存数据。更复杂的需求可以加分页循环，甚至进每个商品详情页补充更多信息。

Thunderbit：用 AI 让 Puppeteer 爬虫更简单

如果你看到这里，心想“这些很酷，但我真不想每次都写代码”，你绝对不是一个人。这也是我们做 的原因。

Thunderbit 有哪些亮点？

• 不用写代码：只要装好 ，打开目标网页，点“AI 智能识别字段”就行。
• AI 智能字段识别：Thunderbit 会自动分析页面，推荐最合适的字段，比如“商品名称”、“价格”、“图片”等。
• 支持动态内容：不管是无限滚动、弹窗还是子页面，Thunderbit 的 AI 都能自动搞定，甚至能自动点分页或进详情页补数据。
• 一键导出：数据可以直接导出到 Excel、Google Sheets、Notion 或 Airtable，完全免费。
• 热门网站模板：想抓亚马逊、Zillow 或领英？Thunderbit 有现成模板，直接用。
• 云端/本地双模式：大批量任务可以用云端模式，一次最多抓 50 个页面。

我见过很多用户从“我想要这些数据”到“数据表已经生成”不到五分钟。最爽的是，网站结构变了也不用担心脚本失效——Thunderbit 的 AI 会自动适应。

Puppeteer vs. Thunderbit：怎么选最适合你的网页爬虫工具

到底选哪个？我一般这样建议团队：

总结：

• 需要极致控制、会编程或要集成到大型系统时，选 Puppeteer。
• 想要快速出结果、不想写代码或要让非技术同事也能用，选 Thunderbit。

其实，很多团队会两者结合：Thunderbit 用来快速试错和原型，Puppeteer 负责深度集成或特殊场景。

实用清单：高效运行 Puppeteer 网页爬虫项目的 10 步

下面是我常用的 Puppeteer 抓取项目流程清单：

1. 明确目标：你到底要哪些数据？数据在哪？
2. 分析目标网站：页面是动态的吗？要登录吗？有反爬机制吗？
3. 搭建环境：装好 Node.js、Puppeteer 和相关依赖。
4. 写初版脚本：先抓一页，调试好选择器。
5. 处理动态内容：用 waitForSelector，必要时模拟点击/滚动。
6. 加分页或循环：确保能抓全所有页面。
7. 防止被封：随机延迟、设置真实 User-Agent、必要时用代理。
8. 导出并校验数据：保存为 JSON/CSV，检查完整性。
9. 优化与容错：加 try/catch，记录进度，优雅处理缺失数据。
10. 持续监控与维护：网站变动要及时更新脚本。

常见问题排查：

• 选择器返回 null？检查 HTML 结构，适当加等待。
• 被封禁？放慢速度、切 IP 或用隐身插件。
• 脚本崩溃？排查内存泄漏或未处理异常。

总结与核心建议

网页数据抓取已经是数据驱动团队的必备技能。Puppeteer 能帮你搞定各种动态、复杂的 JavaScript 网站，但需要一定编程能力和后期维护。如果你想省去写代码的麻烦，Thunderbit 提供了一个 AI 驱动、零代码的高效选择，速度快、灵活性强，而且超级易用。

我的建议：

• 技术能力强、需要深度定制时，优先用 Puppeteer。
• 追求效率、简单和低维护，建议试试 （非常适合新手）。
• 大多数团队结合两者，几乎能满足 99% 的网页数据需求。

想看更多实用教程？欢迎访问 ，获取更多 AI 网页爬虫的技巧、对比和最新动态。

常见问题解答

1. 什么是 Puppeteer 爬虫？为什么适合网页数据抓取？
Puppeteer 是一个 Node.js 库，可以用 JavaScript 控制无头 Chrome 浏览器。它能加载动态内容、模拟用户操作，抓取传统爬虫搞不定的网站数据。

2. Puppeteer、Selenium 和 Thunderbit 有什么区别？
Selenium 支持多浏览器和多语言，但体积大。Puppeteer 针对 Chrome/Node.js 优化，速度更快。Thunderbit 则是零代码、AI 驱动的工具，适合非技术用户一键抓数据。

3. Puppeteer 网页爬虫对企业有哪些好处？
自动化数据收集能省时间、减少出错，还能为销售、市场、运营等提供实时洞察。应用场景包括客户挖掘、价格监控、市场调研等。

4. 用 Puppeteer 抓网页的最大挑战是什么？
主要难点是处理动态内容、防反爬，以及网站变动后的脚本维护。你需要写代码来管理等待、模拟交互和异常处理。

5. 什么时候该用 Thunderbit 而不是 Puppeteer？
如果你不想写代码、需要快速出结果，或者希望让非技术同事也能用，Thunderbit 是理想选择。它适合标准抓取、快速项目，或一键导出到 Excel、Google Sheets 等。

想体验更智能的数据抓取方式？，或者去 看看更多实用指南。祝你抓取顺利！

延伸阅读