简介

Puppeteer 是一个控制 headless Chrome 的 Node.js API 。它是一个 Node.js 库，通过 DevTools 协议提供了一个高级的 API 来控制 headless Chrome。它还可以配置为使用完整的（非 headless）Chrome，由Google开源提供。

其实简单理解就是日常我们使用Chrome浏览器手动完成的事情，现在通过Puppeteer提供的JS API接口就可实现无界面浏览器操作完成。

✮Star：69K

项目地址：
https://github.com/puppeteer/puppeteer

功能

生成屏幕截图和 PDF 页面。
检索 SPA 并生成预渲染内容（即“SSR”）。
自动提交表单，UI测试，键盘输入等。
自动化测试。使用最新的 JavaScript ，在最新版本的 Chrome 中直接运行测试。
爬虫工具，从网站上爬取内容。
捕获网站的时间线跟踪，以帮助诊断性能问题。

安装

安装Puppeteer 前需要保证所在系统已安装nodejs与npm。然后在要使用的项目中执行命令：

npm i puppeteer
# or "yarn add puppeteer"

注：当在install安装Puppeteer时，它会下载Chromium的最新版本（~170MB Mac、~282MB Linux、~280MB Win），保证可以与API一起使用。

演示

下面简单列举几个实现案例：

案例一，实现打开百度，并保存截图。

将下面代码保存example1.js 文件中。

const puppeteer = require(\'puppeteer\');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(\'https://www.baidu.com/\');
  await page.screenshot({ path: \'example.png\' });

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

在命令行执行脚本：

node example1.js

执行完成后，就会生成对应页面截图，本案例中运行后生成截图如下：

截图打开内容：

百度首页截图

Puppeteer默认初始页面大小为800×600px，这定义了屏幕截图的大小。当然页面大小可以通过Page.setViewport()进行设置。

案例二，实现用iPhone 6打开百度首页，并保存截图。

将下面代码保存example2.js文件中。

const puppeteer = require(\'puppeteer\');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(puppeteer.devices[\'iPhone 6\']);   //指定网面打开运行设备环境
  await page.goto(\'https://www.baidu.com/\');
  await page.screenshot({ path: \'F:/puppeteer/baiduOfIPhone.png\', fullPage: true });
  await browser.close();
})();

在命令行执行脚本：

node example2.js

执行完成后，就会生成对应页面截图，如下：

截图内容：

iPhone 6下百度截图

注：与案例一不同的是使用page.emulate指定运行设备环境。具体有哪些设备，可以在下面的地址中找到设备的实际列表。


 https://github.com/puppeteer/puppeteer/blob/main/src/DeviceDescriptors.ts

案例三，实现打开新闻网址，并保存为pdf文件。

将下面代码保存example3.js文件中。

const puppeteer = require(\'puppeteer\');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(\'https://m.thepaper.cn/baijiahao_11586547\', {
    waitUntil: \'networkidle2\',
  });
  await page.pdf({ path: \'F:/puppeteer/news.pdf\', format: \'a4\' });

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

在命令行执行脚本：

node example3.js

执行完成后，就会生成对应页面截图，如下：

pdf文件内容：

PDF版新闻内容

总结

以上只是用Puppeteer实现的几个简单的功能案例，其实Puppeteer作为Google 出品的前端利器，想象空间是很大的，尤其是在爬虫、自动化测试等方面都是很好的利器，而且跟其他测试工具不同，它不再是模拟Chrome浏览器执行引擎再去渲染，而是一个真正在运行的浏览器，只是移除了真实的界面渲染。

最后给大家再分享一个Puppeteer中文API：

https://learnku.com/docs/puppeteer/3.1.0

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/21760.html

Puppeteer：一个免费开源的无头Chrome神器

简介

功能

安装

演示

总结

相关推荐

发表评论