Puppeteer 爬虫开发入门与技巧

2025-4-1

Puppeteer 爬虫开发入门与技巧：驾驭现代 Web 数据的利器

在当今互联网世界，网页内容变得越来越动态和复杂。传统的基于 HTTP 请求库（如 Python 的 requests 或 Node.js 的 axios）的爬虫在面对大量使用 JavaScript 动态渲染、AJAX 加载、单页应用（SPA）技术的网站时，常常显得力不从心，因为它们只能获取到未经浏览器渲染的原始 HTML 源码。为了解决这一痛点，Headless Browser（无头浏览器）技术应运而生，而 Google 开发的 Puppeteer 正是其中的佼佼者，成为了现代 Web 爬虫开发的一大利器。

本文将详细介绍 Puppeteer 的基础知识、核心概念、常用爬虫技巧以及进阶实践，旨在帮助开发者快速入门并掌握使用 Puppeteer 进行高效、稳定爬虫开发的技能。

一、 Puppeteer 是什么？

Puppeteer 是一个 Node.js 库，它提供了一套高级 API，用于通过 DevTools 协议控制 Chrome 或 Chromium 浏览器。通俗地说，你可以用代码来驱动一个真实的（或无头的）Chrome 浏览器，执行几乎所有你能在浏览器中手动完成的操作，例如：

页面导航与交互： 打开网页、点击链接、填写表单、滚动页面等。
内容获取与截图： 获取页面 HTML、提取特定数据、生成页面截图或 PDF。
JavaScript 执行： 在目标页面上下文中执行自定义 JavaScript 代码。
网络监控： 拦截和修改网络请求与响应，监控网络流量。
自动化测试： 用于前端应用的自动化 UI 测试。
性能分析： 捕获时间线跟踪，分析页面加载性能。

对于爬虫开发而言，Puppeteer 最核心的价值在于它能够完整地渲染 JavaScript，获取到最终用户在浏览器中看到的内容，极大地扩展了爬虫能够处理的网站范围。

二、为什么选择 Puppeteer 进行爬虫开发？

相比于传统爬虫工具或其它 Headless Browser 方案，Puppeteer 具有以下显著优势：

强大的 JavaScript 渲染能力： 这是其核心优势。能够完美处理 SPA、AJAX 加载、懒加载等依赖客户端渲染的网页。
模拟真实用户行为： 可以精确模拟点击、输入、滚动、鼠标悬停等操作，更容易绕过一些基于用户行为检测的反爬机制。
与 Chrome DevTools 深度集成： 底层使用 DevTools 协议，功能强大且与 Chrome 浏览器的开发者工具保持一致，便于调试。
Google 官方维护： 更新及时，与 Chrome/Chromium 版本紧密结合，稳定性和兼容性有保障。
丰富的 API 和灵活性： 提供了大量易于使用的 API，覆盖了浏览器操作的方方面面，同时允许开发者深入控制浏览器行为。
活跃的社区与文档： 拥有庞大的开发者社区和完善的官方文档，遇到问题时容易找到解决方案。
截图与 PDF 功能： 内置的截图和 PDF 生成功能非常方便，可用于调试、存档或特定数据提取场景。

当然，Puppeteer 也有其缺点，主要是资源消耗相对较高（因为它需要运行一个完整的浏览器实例）以及执行速度可能慢于纯 HTTP 请求的爬虫。因此，在选择爬虫方案时，需要根据目标网站的特性进行权衡。对于静态或简单动态内容的网站，使用 axios + cheerio 可能更高效。

三、环境搭建与安装

开始使用 Puppeteer 前，你需要确保你的开发环境满足以下条件：

安装 Node.js: Puppeteer 是一个 Node.js 库，因此必须先安装 Node.js (推荐使用 LTS 版本)。安装 Node.js 时会自动包含 npm (Node Package Manager)。你可以访问 Node.js 官网下载安装。
- 在命令行中运行 node -v 和 npm -v 来检查是否安装成功及版本号。
创建项目并安装 Puppeteer:
- 在你希望存放项目的目录下，打开命令行工具。
- 创建一个新的项目目录：mkdir my-puppeteer-scraper && cd my-puppeteer-scraper
- 初始化 Node.js 项目：npm init -y (这将创建一个 package.json 文件)
- 安装 Puppeteer：npm install puppeteer
注意： 默认情况下，npm install puppeteer 会下载最新版本的 Puppeteer 以及与之兼容的 Chromium 浏览器。这个过程可能需要一些时间，并且会占用一定的磁盘空间（几百MB）。

如果你希望使用系统中已安装的 Chrome/Chromium，或者想更精细地管理浏览器版本，可以安装 puppeteer-core：npm install puppeteer-core。使用 puppeteer-core 时，你需要在启动时明确指定浏览器的可执行文件路径。对于大多数入门场景，直接安装 puppeteer 更为便捷。

四、 Puppeteer 基础入门

掌握 Puppeteer 的基本用法是进行爬虫开发的第一步。下面是一个典型的 Puppeteer 脚本结构和常用操作：

```javascript
// 引入 puppeteer 库
const puppeteer = require('puppeteer');

// 使用 async/await 处理异步操作
(async () => {
// 1. 启动浏览器实例
// headless: false 会启动一个带界面的浏览器，方便调试
// slowMo: 减慢 Puppeteer 操作的速度（毫秒），方便观察
// defaultViewport: 设置默认视窗大小，null 表示禁用默认视窗，使用浏览器窗口大小
const browser = await puppeteer.launch({
headless: true, // 默认为 true (无头模式)
// headless: false, // 启动带界面的浏览器
// slowMo: 100, // 操作减慢 100ms
// defaultViewport: { width: 1920, height: 1080 }
});

// 2. 打开一个新的页面（标签页）
const page = await browser.newPage();

try {
// 3. 导航到指定的 URL
// waitUntil: 'networkidle0' 表示等待直到网络连接在 500ms 内最多只有 0 个连接
// 'networkidle2' 表示等待直到网络连接在 500ms 内最多只有 2 个连接
// 'domcontentloaded' 表示等待 DOMContentLoaded 事件触发
// 'load' 表示等待 load 事件触发 (默认)
const targetUrl = 'https://quotes.toscrape.com/'; // 一个适合练习爬虫的静态网站
console.log(Navigating to ${targetUrl}...);
await page.goto(targetUrl, { waitUntil: 'networkidle0' });
console.log('Page loaded successfully.');

// 4. 执行页面操作与数据提取

// 示例 A: 获取页面标题
const pageTitle = await page.title();
console.log(`Page Title: ${pageTitle}`);

// 示例 B: 获取页面完整 HTML 内容
// const pageContent = await page.content();
// console.log('Page Content:', pageContent.substring(0, 500) + '...'); // 打印部分内容

// 示例 C: 截屏
// await page.screenshot({ path: 'screenshot.png', fullPage: true });
// console.log('Screenshot saved as screenshot.png');

// 示例 D: 使用 page.evaluate() 在浏览器上下文中执行 JS，并提取数据
// 这是最常用和强大的数据提取方式
const quotesData = await page.evaluate(() => {
  // 这部分代码是在浏览器环境中执行的，可以访问 DOM
  const quotes = [];
  const quoteElements = document.querySelectorAll('.quote'); // 使用 CSS 选择器选取元素

  quoteElements.forEach(element => {
    const text = element.querySelector('.text')?.innerText;
    const author = element.querySelector('.author')?.innerText;
    const tags = Array.from(element.querySelectorAll('.tags .tag')).map(tag => tag.innerText);

    if (text && author) {
      quotes.push({ text, author, tags });
    }
  });
  return quotes; // 将提取到的数据返回给 Node.js 环境
});

console.log('Scraped Quotes:');
console.log(JSON.stringify(quotesData, null, 2)); // 格式化输出 JSON

// 示例 E: 使用 page.$eval() 和 page.$$eval() (更简洁的选择器 + 执行函数)
// $eval: 选择单个元素并对其执行函数
const firstQuoteText = await page.$eval('.quote .text', element => element.innerText);
console.log('\nFirst Quote Text:', firstQuoteText);

// $$eval: 选择多个元素并对它们组成的数组执行函数
const allAuthors = await page.$$eval('.quote .author', elements => elements.map(el => el.innerText));
console.log('\nAll Authors:', allAuthors);

// 5. 其他常用操作 (将在后面技巧部分详述)
//   - 点击元素: await page.click(selector);
//   - 输入文本: await page.type(selector, text);
//   - 等待特定元素出现: await page.waitForSelector(selector);
//   - 等待导航完成: await page.waitForNavigation();

} catch (error) {
console.error('An error occurred:', error);
} finally {
// 6. 关闭浏览器实例
console.log('\nClosing browser...');
await browser.close();
console.log('Browser closed.');
}
})();
```

运行脚本： 将以上代码保存为 scraper.js，然后在命令行中运行 node scraper.js。

五、核心概念详解

理解 Puppeteer 的几个核心概念对于高效开发至关重要：

Browser (浏览器):
- 通过 puppeteer.launch() 或 puppeteer.connect() 创建。
- 代表一个浏览器实例 (Chromium)。
- 可以包含多个浏览器上下文 (Browser Context)，通常用于隔离会话 (例如，无痕模式)。
- 主要方法包括 newPage(), pages(), close(), createIncognitoBrowserContext() 等。
Page (页面):
- 通过 browser.newPage() 创建。
- 代表浏览器中的一个标签页或弹窗。
- 绝大多数操作都在 Page 对象上进行，如导航 (goto)、DOM 操作 (evaluate, $eval, $$eval)、交互 (click, type)、等待 (waitForSelector, waitForNavigation) 等。
- 一个 Browser 可以同时管理多个 Page 实例，实现并发爬取。
Selectors (选择器):
- Puppeteer 主要使用 CSS 选择器和 XPath 选择器来定位页面上的元素。
- CSS 选择器是首选，因为它们通常更简洁易读。
- XPath 在处理复杂层级关系或基于文本内容查找时可能更有用。
- 相关方法：page.$(selector) (同 querySelector), page.$$(selector) (同 querySelectorAll), page.$x(xpath) (XPath 选择器)。
Execution Context (执行上下文):
- page.evaluate(fn, ...args) 和 page.evaluateHandle(fn, ...args) 是在浏览器页面本身的上下文中执行 JavaScript 代码的关键。
- evaluate 中的代码可以访问页面的 window, document 等对象，就像在浏览器控制台中写代码一样。
- Node.js 环境和浏览器环境是隔离的，数据需要通过 evaluate 的返回值或参数传递。
- 传递给 evaluate 的函数和参数必须是可序列化的 (Serializable)。复杂对象、函数、DOM 元素不能直接在两个环境间传递，需要转换。
Waiting (等待):
- 由于现代网页大量使用异步加载，显式等待 是 Puppeteer 爬虫稳定性的关键。
- 绝对不要 使用固定的 setTimeout 来等待内容加载，因为加载时间是不确定的。
- 常用等待方法：
  - page.waitForSelector(selector, options): 等待匹配选择器的元素出现在 DOM 中。可以设置 visible: true 或 hidden: true 等待元素可见或隐藏。
  - page.waitForNavigation(options): 等待页面导航完成。通常在点击链接或提交表单后使用。依赖 waitUntil 选项。
  - page.waitForFunction(fn, options, ...args): 等待传入的函数在浏览器上下文中执行并返回真值 (truthy value)。非常灵活，可用于等待复杂的条件满足。
  - page.waitForTimeout(milliseconds): (即以前的 page.waitFor) 强制等待固定时间。应尽量避免使用，仅在没有更好的等待条件时作为最后的手段。
  - page.waitForRequest(urlOrPredicate, options) / page.waitForResponse(urlOrPredicate, options): 等待特定的网络请求或响应。

六、常用爬虫技巧

掌握基础后，可以运用以下技巧处理更复杂的爬虫任务：

提取文本和属性：
- 使用 page.$eval(selector, el => el.textContent) 或 page.$eval(selector, el => el.innerText) 获取单个元素的文本。
- 使用 page.$$eval(selector, els => els.map(el => el.textContent)) 获取多个元素的文本列表。
- 使用 page.$eval(selector, el => el.getAttribute('href')) 获取属性值。
处理动态加载内容（滚动加载、按钮加载）：
- 滚动加载：
  javascript async function scrollToBottom(page) { await page.evaluate(async () => { await new Promise((resolve) => { let totalHeight = 0; const distance = 100; // 每次滚动距离 const timer = setInterval(() => { const scrollHeight = document.body.scrollHeight; window.scrollBy(0, distance); totalHeight += distance; if (totalHeight >= scrollHeight) { clearInterval(timer); resolve(); } }, 100); // 滚动间隔 }); }); } // 在需要时调用 await scrollToBottom(page); // 等待新内容加载完成，例如等待某个新元素出现 await page.waitForSelector('.newly-loaded-item');
- 点击“加载更多”按钮：
  javascript const loadMoreButtonSelector = '#load-more-button'; while (await page.$(loadMoreButtonSelector)) { // 检查按钮是否存在 try { await page.click(loadMoreButtonSelector); // 等待新内容加载，或者等待按钮状态变化/消失 await page.waitForFunction( (selector) => !document.querySelector(selector) || document.querySelector(selector).disabled, {}, // options loadMoreButtonSelector // pass selector as argument ); // 或者等待新元素出现 // await page.waitForSelector('.new-item-selector'); await page.waitForTimeout(1000); // 短暂等待，确保JS执行 } catch (e) { console.log('Load more button likely gone or unclickable.'); break; // 出错或按钮消失则跳出循环 } }
处理分页：
- 找到“下一页”按钮的选择器。
- 循环：
  - 提取当前页数据。
  - 查找并点击“下一页”按钮 (page.click())。
  - 使用 page.waitForNavigation() 或 page.waitForSelector() 等待下一页内容加载完成。
  - 如果找不到“下一页”按钮或按钮被禁用，则结束循环。
```javascript
const nextButtonSelector = '.pagination .next a';
while (true) {
// ... 提取当前页数据 ...

const nextButton = await page.$(nextButtonSelector);
if (!nextButton) {
console.log('No next page button found. Ending pagination.');
break;
}

// 检查按钮是否被禁用 (示例，具体类名需根据网站调整)
const isDisabled = await page.$eval(nextButtonSelector, btn => btn.classList.contains('disabled'));
if (isDisabled) {
console.log('Next page button is disabled. Ending pagination.');
break;
}

console.log('Clicking next page...');
// 点击后可能触发页面跳转，需要等待导航
await Promise.all([
page.waitForNavigation({ waitUntil: 'networkidle0' }), // 等待页面加载完成
page.click(nextButtonSelector),
]);
// 如果是 AJAX 翻页，则可能需要 waitForSelector 或 waitForFunction
// await page.click(nextButtonSelector);
// await page.waitForSelector('.some-element-on-next-page');
}
```
表单提交与登录：
- 使用 page.type(selector, text, options) 向输入框输入文本（options 可设置 delay 模拟真实输入）。
- 使用 page.select(selector, ...values) 选择 <select> 元素的值。
- 使用 page.click(selector) 点击复选框、单选按钮或提交按钮。
- 登录后，通常需要 page.waitForNavigation() 等待跳转，或 page.waitForSelector() 等待登录成功后的某个特定元素出现。
- Cookie 管理： 登录成功后，可以使用 page.cookies() 获取当前页面的 Cookies，并使用 page.setCookie(...cookies) 在后续请求或新的 Page 实例中设置 Cookies，以维持登录状态。
javascript await page.type('#username', 'your_username'); await page.type('#password', 'your_password'); await Promise.all([ page.waitForNavigation(), // 等待登录跳转 page.click('#login-button'), ]); // 验证登录是否成功，例如检查是否有欢迎信息 await page.waitForSelector('.welcome-message'); console.log('Login successful!'); // 保存 cookies // const cookies = await page.cookies(); // 保存到文件或数据库...
处理 Iframe：
- 网页中的 Iframe 有自己的 window 和 document 对象。
- 首先需要获取 Iframe 元素句柄 (ElementHandle)。
- 然后使用 iframeHandle.contentFrame() 获取 Iframe 的 Frame 对象。
- 之后，所有针对 Iframe 内部的操作（如选择元素、执行 evaluate）都应在 Frame 对象上进行，而不是 Page 对象。
javascript // 假设 iframe 的选择器是 '#my-iframe' const iframeElement = await page.$('#my-iframe'); if (iframeElement) { const frame = await iframeElement.contentFrame(); if (frame) { // 现在可以在 frame 内部操作 await frame.waitForSelector('#element-inside-iframe'); const text = await frame.$eval('#element-inside-iframe', el => el.textContent); console.log('Text inside iframe:', text); } else { console.error('Could not get content frame of the iframe.'); } } else { console.error('Iframe element not found.'); }

七、进阶技巧与最佳实践

为了构建更健壮、高效且不易被反爬虫机制检测到的 Puppeteer 爬虫，可以采用以下策略：

错误处理：
- 使用 try...catch 包裹可能出错的操作（如 goto, waitForSelector, click, evaluate 等）。
- 记录详细的错误日志，包括 URL、时间、错误信息和堆栈跟踪，方便排查问题。
- 考虑添加重试机制，特别是对于网络波动或目标网站临时不稳定的情况。
设置 User-Agent 和 Headers：
- 默认的 Puppeteer User-Agent 很容易被识别。使用 page.setUserAgent(userAgentString) 设置一个常见的浏览器 User-Agent。
- 使用 page.setExtraHTTPHeaders(headers) 设置其他 HTTP 头信息，如 Accept-Language, Referer 等，使其看起来更像普通浏览器请求。
- 可以维护一个 User-Agent 池，每次请求随机选择一个。
javascript const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36'; // 示例 await page.setUserAgent(userAgent); await page.setExtraHTTPHeaders({ 'Accept-Language': 'en-US,en;q=0.9' });
使用代理 (Proxy)：
- 对于需要大量请求或目标网站有 IP 限制的情况，使用代理 IP 是必要的。
- 可以在 puppeteer.launch() 的 args 选项中配置代理：
  javascript const browser = await puppeteer.launch({ args: ['--proxy-server=http://your_proxy_ip:port'] // 如果代理需要认证: // args: ['--proxy-server=http://username:password@your_proxy_ip:port'] }); // 对于需要认证的代理，还可能需要监听 'authenticate' 事件 // await page.authenticate({ username: 'proxy_user', password: 'proxy_password' });
- 使用代理池，并实现 IP 轮换和失败重试逻辑。
优化性能 - 阻止不必要的资源加载：
- 很多时候爬虫只需要 HTML 和 JS 来渲染内容，并不需要加载图片、CSS、字体等。阻止这些资源可以显著加快页面加载速度，减少带宽消耗和内存占用。
- 通过 page.setRequestInterception(true) 启用请求拦截，并监听 request 事件来决定是继续 (request.continue()) 还是阻止 (request.abort()) 请求。
javascript await page.setRequestInterception(true); page.on('request', (request) => { const resourceType = request.resourceType(); if (['image', 'stylesheet', 'font', 'media'].includes(resourceType)) { request.abort(); // 阻止图片、CSS、字体、媒体文件加载 } else { request.continue(); // 其他请求（如 document, script, xhr）正常加载 } });
反爬虫策略与“隐身”技巧：
- Headless 检测规避： 一些网站会检测 navigator.webdriver 等属性来识别 Headless 浏览器。可以使用 puppeteer-extra 库及其 puppeteer-extra-plugin-stealth 插件来自动应用多种反检测技术。
  bash npm install puppeteer-extra puppeteer-extra-plugin-stealth
```javascript
const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(StealthPlugin());

// 之后正常使用 puppeteer.launch()
const browser = await puppeteer.launch({ headless: true });
// ...
`` * **模拟更真实的行为：** * 设置合理的视窗大小 (page.setViewport())。 * 在操作之间加入随机短暂延时 (await page.waitForTimeout(Math.random() * 1000 + 500);)，避免过于规律的操作。 * 模拟鼠标移动 (page.mouse.move())，尤其是在点击按钮之前。 * 模拟滚动而不是直接跳转 (page.evaluate('window.scrollBy(...)')`)。
* 处理验证码 (CAPTCHA)： 这是爬虫的一大挑战。
* 简单的图形验证码可以尝试使用 OCR 库识别。
* 复杂的 CAPTCHA（如 reCAPTCHA, hCaptcha）通常需要接入第三方打码平台服务 (如 2Captcha, Anti-Captcha) 的 API 来解决。Puppeteer 可以用于展示验证码，并将相关信息发送给打码平台，获取结果后再填入页面。
资源管理：
- 及时关闭不再需要的 Page 对象 (page.close())，释放内存。
- 对于长时间运行的爬虫，考虑定期重启 Browser 实例，防止内存泄漏或浏览器崩溃。
- 控制并发 Page 的数量，避免耗尽系统资源。可以使用 Promise.all 配合限制并发数的库（如 p-limit）来管理。

八、法律与道德考量

在进行爬虫开发时，必须注意以下法律和道德规范：

遵守 robots.txt： 检查目标网站根目录下的 robots.txt 文件，了解网站所有者不希望爬虫访问的路径。虽然 Puppeteer 不会自动遵守，但道义上应当尊重。
阅读服务条款 (Terms of Service)： 很多网站的服务条款明确禁止或限制自动化访问和数据抓取。违反条款可能导致 IP 被封禁甚至法律风险。
避免过度请求： 设置合理的请求间隔（延时），控制并发量，避免给目标服务器带来过大压力，做一个友好的爬虫。
数据使用限制： 抓取到的数据可能受版权保护或涉及个人隐私 (如 GDPR)。确保数据的使用方式合法合规。不要抓取敏感个人信息。
表明身份 (可选但推荐)： 在 User-Agent 或 HTTP Headers 中包含能识别你爬虫身份的信息（如联系方式或项目名称），方便网站管理员在必要时联系你。

九、 Puppeteer 的替代方案

虽然 Puppeteer 功能强大，但在某些场景下，其他工具可能是更好的选择：

Playwright: 由 Microsoft 开发，API 与 Puppeteer 非常相似，但提供了跨浏览器支持（Chromium, Firefox, WebKit），并且在某些方面可能更稳定或功能更先进。是 Puppeteer 的强力竞争对手。
Selenium: 最老牌、最成熟的 Web 自动化框架，支持多种编程语言 (Java, Python, C#, Ruby, JavaScript等) 和所有主流浏览器。生态系统庞大，但相比 Puppeteer/Playwright，API 可能稍显繁琐，有时性能较低。
Cheerio + Axios/Request (Node.js) 或 BeautifulSoup + Requests (Python): 对于不需要执行 JavaScript 渲染的静态页面或简单 AJAX 请求，这种组合速度快得多，资源消耗也小得多。先用 HTTP 库获取 HTML，再用 Cheerio/BeautifulSoup 解析 DOM。

选择哪个工具取决于目标网站的复杂程度、是否需要跨浏览器、开发语言偏好以及性能要求。

十、总结

Puppeteer 以其强大的 JavaScript 渲染能力和模拟用户交互的功能，为爬取现代动态网站提供了极佳的解决方案。从基础的页面导航、内容提取，到处理动态加载、分页、登录，再到应用代理、优化性能、规避反爬虫策略，掌握 Puppeteer 的各种技巧能够让你构建出功能强大且稳定的网络爬虫。

然而，技术能力应与责任感并存。在享受 Puppeteer 带来的便利时，务必遵守法律法规和道德规范，尊重网站所有者的权益，进行负责任的数据抓取。

Puppeteer 的学习曲线相对平缓，特别是对于熟悉 JavaScript 和浏览器开发者工具的开发者。通过不断实践和探索其丰富的 API，你将能够驾驭这个强大的工具，在数据获取的道路上走得更远。

作者：admin

链接：https://hostlocvps.com/2025/04/01/puppeteer-%e7%88%ac%e8%99%ab%e5%bc%80%e5%8f%91%e5%85%a5%e9%97%a8%e4%b8%8e%e6%8a%80%e5%b7%a7/

文章版权归作者所有，未经允许请勿转载。

THE END

LM Studio 深度评测：本地部署 LLM 的最佳选择？

<<上一篇

SQLite 数据类型选择与最佳实践

下一篇>>

Puppeteer 爬虫开发入门与技巧

Puppeteer 爬虫开发入门与技巧：驾驭现代 Web 数据的利器

一、 Puppeteer 是什么？

二、 为什么选择 Puppeteer 进行爬虫开发？

三、 环境搭建与安装

四、 Puppeteer 基础入门

五、 核心概念详解

六、 常用爬虫技巧

七、 进阶技巧与最佳实践

八、 法律与道德考量