puppeteer（三）常用API-白红宇

puppeteer（三）常用API

阅读量：795 次

发布时间：2023-03-04

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

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

puppeteer.launch() 创建浏览器实例。

page.newPage() 创建新页面。

page.goto() 访问目标网页。

page.screenshot() 生成截图。

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