Mac下安装Puppeteer,并利用chromium浏览器生成截图

一、Puppeteer 简介

1、Puppeteer

  • 单词本义Puppet 木偶,傀儡
    Puppeteer操纵木偶的人
  • 软件工具Puppeteer是一个 node 库,他提供了一组用来操纵 Chrome 的API,允许通过JS代码操纵 Chrome 浏览器,完成数据爬取、Web程序自动测试等任务
    官方网址:https://github.com/GoogleChrome/puppeteer

2、Puppeteer 核心功能

(1)利用网页生成PDF、图片
(2)爬取SPA应用,并生成预渲染内容(即“SSR” 服务端渲染)
(3)可以从网站抓取内容
(4)自动化表单提交、UI测试、键盘输入等
(5)帮你创建一个最新的自动化测试环境(chrome),可以直接在此运行测试用例
(6)捕获站点的时间线,以便追踪你的网站,帮助分析网站性能问题

二、Chrome Headless环境要求

  • Puppeteer 要求 Node 版本不低于 v6.4.0, 但是例子中使用的 async/await 只在 Node v7.6.0 或更高的版本支持
  • 需要最近版本的 Chromium 浏览器:
    1. Chromium浏览器项目是Google发布Chrome之后的开源项目
    2. Chrome浏览器基于Chromium(谷歌浏览器)
    3. 新特性会在Chromium中先行先试。
  • Puppeteer与其绑定的版本的Chromium配合最好,版本不对应不保证正确运行
  • node_modules\puppeteer下面的 package.json 中有绑定的版本         
  • 打开 chrome://version 可查询 Chromium 浏览器版本

  • 如果使用 Chrome 而不是 Chromium 浏览器,Puppeteer 要求 Mac 和 Linux 浏览器版本不低于 59. Windows不低于 60
  • 建议是 Chrome Canary 或 Dev Channel 构建版本

三、安装

1、新建一个文件夹,打开终端窗口,进入该文件夹,设置环境变量

    • 避免缺省的下载 chromium方式。

[shell]set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 [/shell]

  • 可阻止下载 Chromium (因为封网,直接下载会失败)

2.安装 puppeteer 模块,注意路径在自己的工作目录

[shell]npm i puppeteer[/shell]

3.下载chromium for Mac

4. 创建 index.js,并在启动chromium的lauch函数中指定 chromium 所在路径。

注:Mac下的路径为:

/Users/xinna/Documents/gitrepository/chromeheadless/chromium/Chromium.app/Contents/MacOS/Chromium

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({executablePath: './chromium/Chromium.app/Contents/MacOS/Chromium',headless: false});
    const page = await browser.newPage();
    await page.goto('https://y.qq.com');
    await page.screenshot({path: 'yqq.png'});
    browser.close();
})();

5. 运行 node index.js

运行成功后,会保存一个网页截图 yqq.png

到此结束了哦!

发表评论

电子邮件地址不会被公开。 必填项已用*标注