什么是Puppeteer

Puppeteer 是由 Google Chrome 团队 开发的一款 Node.js 库。它通过 Chrome DevTools 协议，提供了一个高级 API 来控制 Chrome 或 Chromium 浏览器。

简单来说，它就像一个‍“提线木偶”‍，可以模拟人类的操作（点击、输入、滚动等），让你的代码直接与浏览器对话。它的核心特点是默认以 ‍“无头模式”（Headless）‍ 运行——即在后台运行浏览器，不需要打开可视化的浏览器窗口，从而提高效率。

以下是对 Puppeteer 的详细介绍：

1. 核心特性 (Key Features)

Puppeteer 主要提供了以下几大核心能力：

• 浏览器自动化：可以自动打开页面、点击按钮、填写表单、滚动页面等，模拟真实用户操作。
• 网页抓取（Web Scraping）‍：特别适合抓取那些需要执行 JavaScript 渲染的单页应用（SPA），如动态加载内容的网页。
• 页面截图与 PDF：可以截取整个网页或特定元素的图片，也能将网页保存为 PDF 文件。
• 自动化测试：用于 UI 自动化测试，特别是配合 Jest 等测试框架，能在真实的 Chrome 环境下运行测试。
• 性能分析：支持捕获网站的 Timeline Trace，帮助分析页面性能瓶颈。
• 生成静态站点（SSR）‍：可以预渲染 SPA 页面，生成 SEO 友好的静态 HTML 内容。

2. 工作原理 (How It Works)

Puppeteer 通过 Chrome DevTools 协议 与浏览器进行通信。它本质上是一个 Node.js 库（JavaScript 环境），你需要在本地或服务器上运行 Node.js 程序，然后通过 Puppeteer 发起指令，让浏览器执行相应的操作。

3. 运行模式

• 无头模式 (Headless Mode)：默认模式，浏览器没有图形界面，运行速度快，适合自动化任务。
• 有头模式 (Headful Mode)：可以配置为可视化浏览器，观察实际的操作过程，适合调试或演示。

4. 常见使用场景 (Common Use Cases)

• UI 自动化测试：验证网页的交互逻辑是否正确。
• 网页抓取：爬取需要登录或需要执行 JS 才能显示内容的网站。
• 生成文档：将网页转化为 PDF 或图片报告。
• 性能监控：分析页面加载速度、资源耗时等。

5. 使用示例

下面是一个典型的 Puppeteer 脚本示例，用于打开百度首页并截取全屏截图：

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

(async () => {
  // 启动浏览器
  const browser = await puppeteer.launch({
    headless: true, // true:无头模式，false:有头模式
  });
  // 创建新页面
  const page = await browser.newPage();
  // 设置视口大小
  await page.setViewport({ width: 1280, height: 800 });
  // 导航到指定网址
  await page.goto('https://www.baidu.com');
  // 截图
  await page.screenshot({ path: 'baidu.png' });
  // 关闭浏览器
  await browser.close();
})();

总结：Puppeteer 就像一个高效的‍“浏览器机器人”‍，它让你可以用代码来“看”网页、“操作”网页，解决了很多手动操作网页的繁琐任务。