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 浏览器：

  • Chromium浏览器项目是Google发布Chrome之后的开源项目
  • Chrome浏览器基于Chromium（谷歌浏览器)
  • 新特性会在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方式。

  set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1  

• 可阻止下载 Chromium （因为封网，直接下载会失败）

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

npm i puppeteer 

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

---

结束了哦^_^！