2019.4.10 初识puppeteer

注：原地址：https://www.cnblogs.com/paris-test/p/9705075.html

一、Puppeteer 介绍

Puppeteer 翻译是操纵木偶的人，利用这个工具，我们能做一个操纵页面的人。Puppeteer是一个Nodejs的库，支持调用Chrome的API来操纵Web，相比较Selenium或是PhantomJs,它最大的特点就是它的操作Dom可以完全在内存中进行模拟既在V8引擎中处理而不打开浏览器，而且关键是这个是Chrome团队在维护，会拥有更好的兼容性和前景。

`二、Puppeteer` 用处

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

三、puppeteer环境准备

1、Puppeteer环境要求

1.1、Puppeteer要求node版本不低于v6.4.0，但是async/await只在Node v7.6.0或更高的版本支持。

1.2、需要最近版本的Chromium浏览器

2、Puppeteer环境准备

1.Node.js 安装配置

2.Puppeteer安装

通过npm安装：npm install puppeteer --save

由于封网，直接下载 Chromium 会失败，可以先阻止下载 Chromium 然后再手动下载它

# 安装命令

npm i puppeteer --save

# 错误信息

ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.

# 设置环境变量跳过下载 Chromium

set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 

# 或者可以这样干，只下载模块而不build

npm i --save puppeteer --ignore-scripts

# 成功安装模块

+ puppeteer@0.13.0

added 1 package in 1.77s

手动下载 Chromium，下载完后将压缩包解压，会有个 Chromium.app，将其放在你喜欢的目录下，例如 /Users/huqiyang/Documents/project/z/chromium/Chromium.app。正常安装包后 Chromium.app 会在 .local-chromium中

Tip：下载 Chromium 失败解决办法

更换国内Chromium源

PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org

npm i puppeteer

或者用 cnpm 安装

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

cnpm i puppeteer

2、jest环境

安装 Jest：npm install --save-dev jest

四、puppeteer自动化初试

初试 `Puppeteer`，截个图吧

知识点

puppeteer.launch 启动浏览器实例
browser.newPage() 创建一个新页面
page.goto 进入指定网页
page.screenshot 截图

const puppeteer = require('puppeteer');

(async () => {

const browser = await (puppeteer.launch({

// 若是手动下载的chromium需要指定chromium地址, 默认引用地址为 /项目目录/node_modules/puppeteer/.local-chromium/

executablePath: '/Users/huqiyang/Documents/project/z/chromium/Chromium.app/Contents/MacOS/Chromium',

//设置超时时间

timeout: 15000,

//如果是访问https页面此属性会忽略https错误

ignoreHTTPSErrors: true,

// 打开开发者工具, 当此值为true时, headless总为false

devtools: false,

// 关闭headless模式, 不会打开浏览器

headless: false

}));

const page = await browser.newPage();

await page.goto('https://www.jianshu.com/u/40909ea33e50');

await page.screenshot({

path: 'jianshu.png',

type: 'png',

// quality: 100, 只对jpg有效

fullPage: true,

// 指定区域截图，clip和fullPage两者只能设置一个

// clip: {

// x: 0,

// y: 0,

// width: 1000,

// height: 40

// }

});

browser.close();

})();