Puppeteer 在实际项目中怎么用？

Puppeteer 是 Google 维护的 Node.js 浏览器自动化库，通过 Chrome DevTools Protocol 控制无头浏览器。它的实际应用远不止"跑个脚本打开网页"，在爬虫、测试、文档生成、性能监控等场景中都是生产级方案。

核心应用场景一览

场景	典型用途	复杂度
网页爬虫	SPA 数据采集、价格监控	中
自动化测试	E2E 测试、视觉回归	中高
PDF 生成	报表、发票批量输出	低
性能监控	页面加载分析、Core Web Vitals	中
SEO 审计	页面结构检查、可访问性扫描	低
自动化运维	表单批量填写、数据录入	中

下面逐个场景拆解关键实现和踩坑要点。

网页爬虫：SPA 和动态内容的克星

传统爬虫（requests/axios）面对 Vue、React 渲染的页面基本无能为力，因为拿到的 HTML 只是空壳。Puppeteer 的优势在于它能等 JavaScript 执行完毕再提取数据。

价格监控是最常见的爬虫场景。核心逻辑：启动浏览器 → 设置 User-Agent 伪装 → 等待目标元素出现 → 提取数据。一段精简实现：

javascript
const puppeteer = require('puppeteer');

async function monitorPrice(url) {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  await page.setUserAgent(
    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
  );
  await page.goto(url, { waitUntil: 'networkidle2' });
  await page.waitForSelector('.price', { timeout: 10000 });

  const data = await page.evaluate(() => ({
    title: document.querySelector('.product-title')?.textContent,
    price: document.querySelector('.price')?.textContent,
  }));

  await browser.close();
  return data;
}

踩坑经验： networkidle2 不等于页面完全加载。如果目标元素是懒加载的，建议用 waitForSelector 配合超时做二次保障。另外，大批量采集时务必控制并发数，同时打开 20 个标签页会直接把内存撑爆。

反爬虫要点： 裸跑 Puppeteer 会被大多数反爬系统识别——navigator.webdriver 属性默认为 true，WebGL 指纹也暴露无头浏览器特征。生产环境中需要配合 puppeteer-extra-plugin-stealth 插件修补这些泄露点，或者使用代理池轮换 IP。

自动化测试：E2E 与视觉回归

Puppeteer 在测试领域有两个典型用法：

端到端流程测试——模拟用户完整操作路径，验证业务逻辑正确性。比如注册-登录-下单流程，每个步骤的页面跳转和状态变化都能断言。

关键技巧是用 Promise.all 包裹点击和等待导航，避免竞态条件：

javascript
await Promise.all([
  page.waitForNavigation(),
  page.click('#submit-button'),
]);

视觉回归测试——截取页面快照与基线图对比，像素级检测 UI 变更。核心依赖 pixelmatch 库做图片 diff，差异超过阈值（通常 0.5%）即判定为回归。

实际项目中建议把视觉回归集成到 CI 流程，每次提交自动跑一遍。注意截图的稳定性：字体渲染、动画状态、抗锯齿差异都可能产生误报。解决方法是截图前等动画完成，并用固定视口宽度。

PDF 生成：报表和发票的批量引擎

服务端生成 PDF 是个老大难问题。用 PDFKit 手动排版太痛苦，用 wkhtmltopdf 中文渲染经常出问题。Puppeteer 的方案最直接：渲染 HTML → 调用 page.pdf() 输出。

javascript
await page.setContent(htmlContent);
await page.pdf({
  path: 'report.pdf',
  format: 'A4',
  printBackground: true,
  margin: { top: '20px', bottom: '20px', left: '20px', right: '20px' },
});

批量生成发票时，不要每个发票都启停浏览器。用一个浏览器实例复用 Page，速度能提升 5-10 倍。但要注意内存泄漏——每次 setContent 后如果页面越来越慢，说明需要定期 page.close() 再开新 Page。

性能监控：比 Lighthouse 更灵活

Lighthouse 适合一次性审计，但线上持续监控需要自定义方案。Puppeteer 可以精确采集每个页面的 FCP、LCP、DOM 节点数等指标，写入时序数据库做趋势分析。

javascript
const client = await page.target().createCDPSession();
await client.send('Performance.enable');
await page.goto(url, { waitUntil: 'networkidle2' });

const fcp = await page.evaluate(() =>
  performance.getEntriesByType('paint')
    .find(e => e.name === 'first-contentful-paint')?.startTime
);

通过 CDP Session 还能拦截网络请求、监控 JS 堆内存变化，这些是 Lighthouse 做不到的细粒度采集。

SEO 审计：自动化页面健康检查

Puppeteer 可以批量扫描网站的 SEO 问题：缺少 title 标签、meta description 过长、H1 缺失或重复、图片缺少 alt 属性等。核心是 page.evaluate 在页面上下文中执行 DOM 查询，把结果结构化返回。

相比纯 HTTP 请求的方式，Puppeteer 能检查 JS 渲染后的真实 DOM，对 SPA 应用尤其重要——很多 SPA 的 SEO 问题只有运行后才能发现。

请求拦截与资源优化

这是一个跨场景的通用技巧。通过拦截请求可以大幅降低资源消耗：

javascript
await page.setRequestInterception(true);
page.on('request', (req) => {
  const blocked = ['image', 'font', 'stylesheet'];
  blocked.includes(req.resourceType()) ? req.abort() : req.continue();
});

爬虫场景下屏蔽图片和字体能提速 40% 以上；测试场景下可以 mock 接口返回，实现更可控的测试环境。

面试高频追问

Q: Puppeteer 和 Playwright 怎么选？

Puppeteer 只支持 Chromium，API 简洁，适合 Chrome 专属场景。Playwright 支持三浏览器（Chromium/Firefox/WebKit），自动等待机制更智能，新增项目推荐 Playwright。但 Puppeteer 生态更成熟，puppeteer-extra 插件体系（stealth、recaptcha）在爬虫场景无可替代。选型看需求：爬虫偏 Puppeteer，跨浏览器测试偏 Playwright。

Q: 无头浏览器如何降低被检测概率？

三层防护：第一层用 stealth 插件修补 navigator.webdriver、Chrome 对象等指纹；第二层用 ghost-cursor 模拟真人鼠标轨迹，避免点击坐标过于精确；第三层用代理池轮换 IP 和 User-Agent，避免单 IP 高频请求触发风控。没有银弹，三层全上才能通过中高级反爬。

Q: Puppeteer 采集任务如何稳定运行在生产环境？

三个关键点：一是进程管理，用 puppeteer.connect 连接常驻浏览器实例而非每次启动，配合 pm2 做进程守护；二是内存控制，每处理 50 个页面重启一次浏览器，防止内存泄漏积累；三是错误恢复，page.on('error') 监听页面崩溃，browser.on('disconnected') 监听浏览器断连，两者都要有自动重连逻辑。

Puppeteer 的应用边界还在扩展——AI Agent 的浏览器操作层、RPA 流程自动化、竞品数据监控，都是 2026 年依然活跃的场景。掌握核心 API 再结合上述实战经验，基本能覆盖日常开发中 90% 的浏览器自动化需求。