【亲测免费】 Puppeteer API 中文文档教程

项目介绍

Puppeteer 是一个 Node 库，它提供了一套高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。Puppeteer 默认以无头模式运行，但也可以配置为有头模式运行。

Puppeteer 的主要用途包括：

• 网页截图和生成 PDF
• 自动化表单提交、UI 测试、键盘输入等
• 抓取 SPA（单页应用）并生成预渲染内容（即“SSR”（服务器端渲染））
• 自动化性能分析

项目快速启动

安装 Puppeteer

首先，确保你已经安装了 Node.js。然后，在你的项目目录中运行以下命令来安装 Puppeteer：

npm install puppeteer

基本示例

以下是一个简单的示例，展示如何使用 Puppeteer 截图：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})();

应用案例和最佳实践

网页截图

如上所述，Puppeteer 可以轻松地对网页进行截图。这对于监控网页变化或生成网页快照非常有用。

生成 PDF

Puppeteer 还可以将网页转换为 PDF 文件：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle2' });
  await page.pdf({ path: 'example.pdf', format: 'A4' });

  await browser.close();
})();

自动化表单提交

Puppeteer 可以模拟用户操作，如填写表单并提交：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/login');
  await page.type('#username', 'myusername');
  await page.type('#password', 'mypassword');
  await page.click('button[type="submit"]');
  await page.waitForNavigation();

  await browser.close();
})();

典型生态项目

Lighthouse

Lighthouse 是一个开源的自动化工具，用于提高网页质量。它可以集成到 Puppeteer 中，用于性能分析和优化建议。

jest-puppeteer

jest-puppeteer 是一个 Jest 的预设，它集成了 Puppeteer，使得编写端到端测试变得更加容易。

puppeteer-extra

puppeteer-extra 是一个插件包，它扩展了 Puppeteer 的功能，例如添加对 Adblockers 的支持。

通过这些工具和插件，Puppeteer 的生态系统变得更加丰富和强大，可以满足各种自动化和测试需求。