什么是 Puppeteer？核心原理和实战场景有哪些？

什么是 Puppeteer？

Puppeteer 是 Google Chrome 团队开发的 Node.js 库，通过 Chrome DevTools 协议（CDP）提供高级 API 来控制无头或有头 Chrome/Chromium 浏览器。简单说，它让你用代码驱动浏览器完成截图、爬虫、自动化测试等操作，是前端工程师最常接触的浏览器自动化工具之一。

核心架构

Puppeteer 的 API 围绕几个核心对象组织，理解它们的层级关系是掌握 Puppeteer 的基础：

• Browser：浏览器实例，通过 puppeteer.launch() 创建，是所有操作的入口
• BrowserContext：隔离的浏览器会话，类似隐身模式，多个 Context 之间 Cookie、localStorage、缓存互不干扰，适合多账号并行场景
• Page：一个标签页，绝大部分操作（导航、点击、截图）都在 Page 上进行
• Frame：页面中的 iframe，每个 Page 有一个主 Frame，通过 page.frames() 访问子 Frame

javascript
const browser = await puppeteer.launch({ headless: true });
const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();
await page.goto('https://example.com');
// 操作完成后
await browser.close();

面试要点：Browser 和 BrowserContext 的区别在于——一个 Browser 可以有多个 BrowserContext，它们之间完全隔离，这在爬虫需要多账号并行或测试需要干净环境时非常关键。

主要特性

1. 无头浏览器控制

默认以 headless 模式运行，不显示浏览器界面但功能完整。Puppeteer 从 v20 起默认使用新的 Headless 模式（headless: 'new'），性能更接近有头模式。设置 headless: false 可打开可视化窗口调试脚本执行过程。

2. 页面交互与等待机制

Puppeteer 的等待机制是面试高频考点，它决定了脚本的稳定性和效率：

• page.waitForSelector(selector) — 等待元素出现在 DOM 中
• page.waitForFunction(fn) — 等待自定义 JS 函数返回 truthy
• page.waitForNavigation() — 等待页面跳转完成
• page.waitForResponse(urlOrPredicate) — 等待特定网络响应

javascript
await page.click('#submit-btn');
await page.waitForSelector('.result', { visible: true });
const text = await page.$eval('.result', el => el.textContent);

面试常问：为什么不推荐用 setTimeout 硬等待？因为网络延迟不可控，硬等待要么浪费时间要么不够等导致报错。Puppeteer 的 waitFor 系列基于轮询 + 事件监听，条件满足时立即继续执行，既可靠又高效。

另一个高频问题：点击后等待导航应该怎么写？

javascript
// 错误写法：click 和 waitForNavigation 竞态
await page.click('#link');
await page.waitForNavigation();

// 正确写法：用 Promise.all 并行等待
await Promise.all([
  page.waitForNavigation(),
  page.click('#link')
]);

3. 网络拦截与请求控制

通过 page.setRequestInterception(true) 可以拦截、修改或 abort 请求，这是爬虫和测试场景的核心能力：

javascript
await page.setRequestInterception(true);
page.on('request', request => {
  if (request.resourceType() === 'image') {
    request.abort(); // 屏蔽图片，加速爬虫
  } else if (request.url().includes('/api/data')) {
    request.continue({
      headers: { ...request.headers(), 'X-Custom': 'value' }
    }); // 修改请求头
  } else {
    request.continue();
  }
});

实际应用：屏蔽无用资源提升页面加载速度（图片、字体、CSS）、mock 接口返回进行前端测试、修改请求头绕过反爬检测。

4. 截图与 PDF 生成

javascript
// 整页截图
await page.screenshot({ path: 'full.png', fullPage: true });

// 指定元素截图
const element = await page.$('.chart');
await element.screenshot({ path: 'chart.png' });

// 生成 PDF
await page.pdf({ path: 'output.pdf', format: 'A4', printBackground: true });

注意：PDF 生成仅在无头模式下支持，有头模式调用会报错。

5. 执行上下文与 page.evaluate

page.evaluate() 在浏览器环境中执行 JS，可以访问 DOM 和 window 对象。这是一个容易踩坑的点：

javascript
// 正确：通过参数传入
const title = await page.evaluate((sel) => {
  return document.querySelector(sel)?.textContent;
}, 'h1');

// 错误：闭包变量无法访问
const sel = 'h1';
const title = await page.evaluate(() => {
  return document.querySelector(sel)?.textContent; // sel 未定义！
});

原因：page.evaluate 的回调函数会被序列化后发送到浏览器环境执行，Node.js 侧的闭包变量不会跟随过去。需要传参的变量必须是可以被结构化克隆算法处理的类型（基本类型、普通对象、数组等），函数和 DOM 元素不行。

如果需要传递复杂对象，可以用 page.exposeFunction(name, callback) 把 Node.js 函数暴露到浏览器环境中。

主要应用场景

场景	说明	关键 API
SPA 爬虫	抓取 Vue/React 等单页应用的动态渲染内容	page.goto + waitForSelector
E2E 自动化测试	模拟用户操作流程，验证功能正确性	page.click + page.type + 断言
PDF/截图服务	将网页批量转成 PDF 或截图	page.pdf + page.screenshot
性能监控	录制性能轨迹分析加载瓶颈	page.tracing.start/stop
Chrome 扩展测试	加载扩展并测试交互	launch({ args: ['--load-extension=...'] })
预渲染（SSR 替代）	构建时生成静态 HTML，提升 SEO	rendertron / puppeteer-renderer

与 Selenium、Playwright 的对比

维度	Puppeteer	Selenium	Playwright
底层协议	Chrome DevTools Protocol	WebDriver 协议	CDP + 自有协议
浏览器支持	仅 Chrome/Chromium	Chrome/Firefox/Safari/Edge	Chromium/Firefox/WebKit
自动等待	waitFor 系列需手动调用	需显式等待（WebDriverWait）	内置 auto-waiting
测试框架	无内置，常搭配 Jest/Mocha	无内置	内置 test runner
多标签/多上下文	支持 BrowserContext	支持 Window handles	原生支持，API 更完善
维护方	Google	社区（Selenium 4 由 W3C 标准驱动）	Microsoft
学习曲线	低，API 直观	中，需要理解 WebDriver 概念	中低，API 设计更现代

面试高频追问：2026 年还要学 Puppeteer 吗？Playwright 由原 Puppeteer 团队打造，功能更全面，跨浏览器支持好，新项目优先推荐。但 Puppeteer 在 Chrome 专属场景（扩展测试、CDP 深度调试、Chrome 特性验证）仍有优势，且生态成熟、Stack Overflow 上的资料更多。理解 Puppeteer 的 CDP 原理后迁移到 Playwright 成本很低，两者核心概念一致。

反爬处理常见策略

实际用 Puppeteer 做爬虫时，网站的反爬检测是绕不开的问题：

• 设置 User-Agent：page.setUserAgent('Mozilla/5.0 ...') 模拟真实浏览器
• 隐藏 WebDriver 特征：page.evaluateOnNewDocument(() => { Object.defineProperty(navigator, 'webdriver', { get: () => false }); }) 去除自动控制标识
• 使用 puppeteer-extra-plugin-stealth：社区插件，自动注入十余项反检测脚本，最省事的方案
• 代理轮换：puppeteer.launch({ args: ['--proxy-server=...'] }) 配合代理池避免 IP 封禁
• 模拟人类行为：用 page.type(selector, text, { delay: 100 }) 模拟逐字输入，避免瞬间填写触发风控