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 的生态系统变得更加丰富和强大,可以满足各种自动化和测试需求。