npm 包 puppeteer 使用教程

什么是 Puppeteer？

Puppeteer 是一个由 Google 开源的 Node.js 库，它提供了一套 API，可用于通过编程方式控制 Chrome 或 Chromium 浏览器。Puppeteer 允许用户以程序化方式模拟人类操作浏览器，例如导航、填写表单、截图或生成 PDF 等操作。

在前端开发领域，Puppeteer 可以帮助我们完成诸如自动化测试、网站截图、爬虫等任务，提高工作效率和质量。

安装 Puppeteer

使用 Puppeteer 前，需要先安装它。可以通过 npm 进行安装：

npm install puppeteer

如果你的网络环境访问 npm 较慢，建议使用国内镜像源，例如淘宝 NPM 镜像：

npm install puppeteer -g --registry=https://registry.npm.taobao.org

使用 Puppeteer

打开浏览器

要使用 Puppeteer 控制浏览器，首先需要启动一个实例。可以通过以下代码创建一个 Chrome 实例：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
})();

puppeteer.launch() 函数会返回一个 Browser 对象，该对象代表了一个浏览器实例。

可以传递一些配置项给 puppeteer.launch() 函数，例如：

• headless：是否以无头（Headless）模式启动浏览器，默认为 true。
• args：传递给 Chrome 实例的命令行参数。

const browser = await puppeteer.launch({
  headless: false,
  args: ['--start-maximized']
});

打开页面

要打开一个网页，可以使用 Browser.newPage() 方法：

const page = await browser.newPage();
await page.goto('https://www.baidu.com/');

page.goto(url) 方法用于导航到指定的 URL，等待页面加载完成。如果需要更多的控制或监视页面加载过程，可以使用 page.goto(url, options) 方法，并传递一些选项给它，例如：

• timeout：设置超时时间（单位为毫秒）
• waitUntil：设置等待页面加载的条件

await page.goto('https://www.baidu.com/', {
  timeout: 30000,
  waitUntil: 'networkidle2'
});

操作页面元素

Puppeteer 提供了一系列方法来操作页面元素，例如：

• page.type(selector, text[, options])：在指定的输入框中输入文本。
• page.click(selector[, options])：点击指定的元素。
• page.$(selector)：返回第一个匹配指定选择器的元素。
• page.$$eval(selector, pageFunction)：对所有匹配指定选择器的元素执行评估函数。

下面是一个示例代码，用于在百度搜索框中输入关键字并搜索：

await page.type('#kw', 'puppeteer');
await page.click('#su');

截图和生成 PDF

使用 Puppeteer，可以方便地对页面进行截图或者生成 PDF 文件。以下是示例代码：

await page.screenshot({ path: 'screenshot.png' });
await page.pdf({ path: 'output.pdf' });

screenshot() 方法用于对整个页面进行截图，并将结果保存到指定的文件路径下。

pdf() 方法用于生成 PDF 文件，并将结果保存到指定的文件路径下。

结语

本文介绍了 Puppeteer 的基本用法，并提供了一些示例代码。Puppeteer 提供的功能非常丰富，涵盖了很多前端开发、自动化测试和爬虫等领域。希望读者能够通过学习本文，掌握

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51615