本文共 2972 字，大约阅读时间需要 9 分钟。

Puppeteer 是一个强大的 Node.js 库，提供了操纵 Chrome 浏览器的能力。作为开发者，掌握 Puppeteer 可以帮助我们自动化测试、抓取网页内容、生成截图等任务。以下将从基础到实战详细介绍 Puppeteer 的使用方法。

1. Puppeteer 简介

Puppeteer 是 Chrome 官方团队维护的开源库，旨在模拟浏览器操作。与传统的工具如 Selenium 不同，Puppeteer 更注重用户操作的便捷性，适合执行复杂的自动化任务。以下是 Puppeteer 的主要功能：

• 网页截图和 PDF 生成：可以截取网页内容或生成 PDF 文件。
• 高级爬虫：支持异步渲染内容的抓取。
• UI 自动化测试：模拟键盘输入、表单提交等操作。
• 性能分析：捕获站点时间线，帮助诊断网站性能问题。

Puppeteer 远比 PhantomJS 更具前景，因为其由 Chrome 团队维护，兼容性和性能更优。

2. 运行环境

Puppeteer 的核心是基于 async/await 的异步编程模型，因此需要以下环境支持：

• Node.js 版本：建议使用 7.6.0 及以上版本，确保支持 async/await。
• ChromeDriver：Puppeteer 会自动下载最新版本的 ChromeDriver。

安装 Puppeteer 可以通过以下命令：

npm install puppeteer --save

3. 基本用法

Puppeteer 的 API 简单易用，以下是一个基本的示例：

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();})();

上述代码实现了网页截图的功能：

4. 实战应用

4.1 获取元素

Puppeteer 提供了 page.$(selector) 和 page.$$(selector) 两种方法来获取页面元素：

• page.$(selector) 获取单个元素。
• page.$$(selector) 获取多个元素。

示例：

const inputElement = await page.$('#search input');const links = await page.$$('.gl-item a');

4.2 获取元素属性

Puppeteer 提供 page.$eval() 和 page.$$eval() 方法来获取元素属性：

• page.$eval(selector, function) 返回单个元素的属性值。
• page.$$eval(selector, function) 返回多个元素的属性值数组。

示例：

const href = await page.$eval('#a', ele => ele.href);const content = await page.$eval('.content', ele => ele.textContent);

4.3 执行自定义 JavaScript

Puppeteer 提供 page.evaluate() 方法执行自定义 JavaScript：

const result = await page.evaluate(() => {  return 8 * 7;});

如果需要访问页面元素，可以使用 page.exposeFunction() 注册全局函数：

page.exposeFunction('md5', text => {  return crypto.createHash('md5').update(text).digest('hex');});

5. 模拟设备运行

Puppeteer 提供了模拟不同设备的功能，例如 iPhone、Mac 等。以下是模拟 iPhone 6 浏览 Google 的示例：

const devices = require('puppeteer/DeviceDescriptors');const iPhone = devices['iPhone 6'];puppeteer.launch().then(async browser => {  const page = await browser.newPage();  await page.emulate(iPhone);  await page.goto('https://www.google.com');  await browser.close();});

6. 键盘和鼠标操作

Puppeteer 提供了丰富的键盘和鼠标 API：

• 键盘操作：

  • page.keyboard.down(key) 和 page.keyboard.up(key) 模拟键盘按下和释放。
  • page.keyboard.sendCharacter(char) 输入单个字符。
  • page.keyboard.type(text) 输入多个字符。

• 鼠标操作：

  • page.mouse.move(x, y) 移动鼠标。
  • page.mouse.click(x, y) 点击鼠标。

示例：

page.keyboard.type('Hello');page.mouse.move(100, 100);page.mouse.click(100, 100);

7. 其他有用 API

7.1 Page.waitFor 系列 API

• page.waitForSelector(selector) 等待指定选择器的元素加载。
• page.waitForNavigation() 等待页面完全加载。

示例：

const links = await page.waitForSelector('.gl-item');const result = await page.waitForFunction(() => {  return document.querySelector('.gl-item').textContent;});

7.2 Performance 数据

page.getMetrics() 返回页面性能数据，用于分析网站速度。

8. 总结

Puppeteer 是一款强大的自动化工具，适合开发者执行复杂的网页操作。通过其丰富的 API，我们可以轻松实现网页截图、模拟设备运行、UI 自动化等任务。在实际开发中，Puppeteer 能显著提升工作效率，成为每个开发者的必备工具。

转载地址：http://bzafk.baihongyu.com/