Puppeteer.js 一个可以不动手操作浏览的插件

目录

Puppeteer.js 简介

安装 Puppeteer

基础使用

1. 启动浏览器并打开页面

2. 核心 API 详解

浏览器对象（Browser）

页面对象（Page）

选择器

常见用例

用例 1：生成网页截图

用例 2：生成 PDF

用例 3：提交表单

用例 4：等待元素加载

用例 5：模拟移动设备

高级功能

1. 拦截网络请求

2. 执行自定义 JavaScript

3. 处理弹窗

4. 下载文件

最佳实践

总结

---

Puppeteer.js 简介

Puppeteer 是一个由 Google Chrome 团队开发的 Node.js 库，提供了一套高级 API 来控制无头（Headless）或非无头的 Chrome/Chromium 浏览器。它支持自动化操作，如网页截图、PDF 生成、表单提交、页面导航、JavaScript 执行、网络请求拦截等，常用于爬虫、自动化测试、性能监控等场景。

---

安装 Puppeteer

1. 环境要求：Node.js 12+（推荐 16+）。

2. 使用 npm 安装：

   npm install puppeteer

   安装时会自动下载兼容的 Chromium 浏览器（约 180MB）。

---

基础使用

1. 启动浏览器并打开页面

const puppeteer = require('puppeteer');

(async () => {
  // 启动浏览器（默认无头模式）
  const browser = await puppeteer.launch({ headless: false });
  // 创建新页面
  const page = await browser.newPage();
  // 导航到目标 URL
  await page.goto('https://example.com');
  // 等待 3 秒后关闭浏览器
  await new Promise(resolve => setTimeout(resolve, 3000));
  await browser.close();
})();

---

2. 核心 API 详解

浏览器对象（Browser）

• browser.newPage(): 创建新页面。

• browser.pages(): 获取所有打开的页面。

• browser.close(): 关闭浏览器。

页面对象（Page）

• page.goto(url): 导航到指定 URL。

• page.screenshot({ path: 'screenshot.png' }): 截取页面截图。

• page.pdf({ path: 'page.pdf' }): 生成页面 PDF。

• page.type(selector, text): 在输入框输入文本。

• page.click(selector): 点击元素。

• page.evaluate(() => {...}): 在页面上下文中执行 JavaScript。

选择器

支持 CSS 选择器、XPath 或文本匹配：

await page.waitForSelector('button#submit');
await page.click('button:has-text("Submit")');

---

常见用例

用例 1：生成网页截图

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', fullPage: true });
  await browser.close();
})();

用例 2：生成 PDF

await page.pdf({
  path: 'example.pdf',
  format: 'A4',
  printBackground: true
});

用例 3：提交表单

await page.goto('https://login-page.com');
await page.type('#username', 'my_username');
await page.type('#password', 'my_password');
await page.click('#login-button');
await page.waitForNavigation(); // 等待页面跳转
console.log('登录成功！');

用例 4：等待元素加载

await page.waitForSelector('.loaded-element', { timeout: 5000 });

用例 5：模拟移动设备

const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 12'];
await page.emulate(iPhone);

---

高级功能

1. 拦截网络请求

await page.setRequestInterception(true);
page.on('request', (request) => {
  if (request.url().includes('ads')) {
    request.abort(); // 拦截广告请求
  } else {
    request.continue();
  }
});

2. 执行自定义 JavaScript

const title = await page.evaluate(() => {
  return document.title;
});
console.log('页面标题:', title);

3. 处理弹窗

page.on('dialog', async (dialog) => {
  console.log('弹窗内容:', dialog.message());
  await dialog.dismiss(); // 关闭弹窗
});

4. 下载文件

const client = await page.target().createCDPSession();
await client.send('Page.setDownloadBehavior', {
  behavior: 'allow',
  downloadPath: './downloads' // 指定下载路径
});

---

最佳实践

1. 关闭浏览器：始终在结束时调用 browser.close()，避免内存泄漏。

2. 等待策略：优先使用 page.waitForSelector 或 page.waitForNavigation，而非 setTimeout。

3. 错误处理：用 try/catch 包裹可能失败的代码。

4. 资源优化：避免同时运行过多浏览器实例。

---

总结

Puppeteer 是前端自动化的瑞士军刀，覆盖了从简单截图到复杂交互的全场景。通过结合其丰富的 API 和异步操作，可以高效实现各类浏览器自动化任务。进一步学习可参考 官方文档。