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

简介

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

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

✮Star:69K

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

项目地址:
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一个免费开源的无头Chrome神器

截图打开内容:

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

百度首页截图

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

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

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

截图内容:

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

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

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

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

pdf文件内容:

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

PDF版新闻内容

总结

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

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

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

内容出处:,

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

发表评论

登录后才能评论