Puppeteer教程

puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。你可以使用 Puppeteer 来生成网页截图、生成 PDF、自动化表单提交、模拟用户交互等。本教程将带你从安装 Puppeteer 到进行一些基本的自动化任务。

一、安装 Puppeteer

首先，你需要确保你的系统已经安装了 Node.js。然后，你可以通过 npm（Node 包管理器）来安装 Puppeteer。

npm install puppeteer

这个命令会安装 Puppeteer 和它依赖的 Chromium 浏览器。你也可以选择只安装 Puppeteer，而不自动下载 Chromium，但这需要你手动指定 Chrome 的路径。

二、基本用法

以下是一个简单的例子，演示如何使用 Puppeteer 启动浏览器，访问一个网页，并截图保存。

const puppeteer = require('puppeteer');

(async () => {
  // 启动浏览器
  const browser = await puppeteer.launch();
  // 打开一个新页面
  const page = await browser.newPage();
  // 导航到指定 URL
  await page.goto('https://www.tides.cn');
  // 截图并保存
  await page.screenshot({ path: 'example.png' });

  // 关闭浏览器
  await browser.close();
})();

将上述代码保存为一个 JavaScript 文件（例如 example.js），然后在命令行中运行：

node example.js

运行完成后，你应该会在当前目录下看到一个名为 example.png 的截图文件。

三、高级用法

1. 生成 PDF

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.tides.cn');
  await page.pdf({ path: 'example.pdf', format: 'A4' });
  await browser.close();
})();

2. 模拟用户交互

你可以使用 Puppeteer 来模拟用户点击、输入文本等操作。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.tides.cn/login');

  // 输入用户名
  await page.type('#username', 'your-username');
  // 输入密码
  await page.type('#password', 'your-password');
  // 点击登录按钮
  await page.click('#login-button');

  // 等待页面加载完成
  await page.waitForNavigation();

  // 进行其他操作...

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

3. 处理表单和数据抓取

Puppeteer 可以方便地抓取网页数据，例如从表格中提取信息。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.tides.cn/data');

  // 获取所有表格行
  const rows = await page.$$('table tr');
  
  for (let row of rows) {
    const cells = await row.$$('td');
    const cellTexts = await Promise.all(cells.map(cell => cell.innerText()));
    console.log(cellTexts.join('\t'));
  }

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

四、最佳实践

1. 使用无头模式

为了节省资源，可以在生产环境中使用无头模式（不打开浏览器窗口）。

const browser = await puppeteer.launch({ headless: true });

2. 处理异常

在实际使用中，处理可能的异常是非常重要的。

try {
  // 你的 Puppeteer 代码
} catch (error) {
  console.error('Error:', error);
} finally {
  await browser.close();
}

3. 使用慢动作模式调试

你可以通过设置 slowMo 选项来减慢 Puppeteer 的操作速度，以便更容易地调试。

const browser = await puppeteer.launch({ slowMo: 100 });

五、总结

Puppeteer 是一个强大的工具，可以用来自动化浏览器任务，从简单的网页截图到复杂的用户交互和数据抓取。通过本教程，你应该能够掌握 Puppeteer 的基本用法，并能够开始构建自己的自动化脚本。

本文地址：https://www.tides.cn/p_node-peppeteer