小韩的第一篇技术文章

## puppeteer无头浏览器的使用及应用

### [Demo源码地址](http://github.com/hangaoke1/puppeteer-share)
### 一、Puppeteer是什么
Puppeteer 是一个 Node 库，它提供了高级的 API 并通过 DevTools 协议来控制 Chrome(或Chromium)。通俗来说就是一个 headless chrome 浏览器 (也可以配置成有 UI 的，默认是没有的)

### 二、Puppeteer能做什么
1. 生成网页截图或者 PDF
2. 抓取单页应用(SPA)执行并渲染
3. 做表单的自动提交、UI的自动化测试、模拟键盘输入等
4. 用浏览器自带的一些调试工具和性能分析工具帮助我们分析问题
5. 骨架屏自动生成方案

### 三、快速开始

安装依赖
```
# 设置puppteer下载镜像
npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
# 安装依赖
npm i puppeteer
```

**打开一个站点**
```js
// demo1
const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://qiyukf.com/', {
waitUntil:'networkidle2'
});
})();
```
- puppeteer.launch：生成一个浏览器实例
- browser.newPage：新建一个页面，相当于新建一个标签页，返回页面实例
- page.goto：跳转到制定页面
- waitUntil: 满足什么条件认为页面跳转完成，默认是 load 事件触发时。指定事件数组，那么所有事件触发后才认为是跳转完成。事件包括
```
load - 页面的load事件触发时
domcontentloaded - 页面的 DOMContentLoaded 事件触发时
networkidle0 - 不再有网络连接时触发（至少500毫秒后）
networkidle2 - 只有2个网络连接时触发（至少500毫秒后）
```

**创建一个PDF**
```js
// demo2
const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.pdf({path: 'example.pdf', format: 'A4'});
await browser.close();
})();
```
- page.pdf：创建一个pdf，目前仅支持headless

**截图**
```js
// demo3
const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch(launchOpt)
const page = await browser.newPage()
await page.goto('https://www.qq.com')
await page.screenshot({
path: 'qiyu.png', // 图片保存路径
type: 'png',
fullPage: true // 边滚动边截图
// clip: { x: 0, y: 0, width: 1920, height: 800 }
})

//对页面某个元素截图
let element = await page.$('#sosobar')
await element.screenshot({
path: 'element.png'
})
await page.close();
await browser.close();
})();
```
- page.screenshot：创建截图
- page.$：选择元素

**请求拦截**
```js
// demo4
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
const blockTypes = new Set(['image', 'media', 'font']);
await page.setRequestInterception(true); //开启请求拦截
page.on('request', request => {
const type = request.resourceType();
const shouldBlock = blockTypes.has(type);
if(shouldBlock){
//直接阻止请求
return request.abort();
}else{
//对请求重写
return request.continue({
//可以对 url，method，postData，headers 进行覆盖
headers: Object.assign({}, request.headers(), {
'puppeteer-test': 'true'
})
});
}
});
await page.goto('https://demo.youdata.com');
await page.close();
await browser.close();
})();
```
- page.setRequestInterception：开启请求拦截
- page.on('request', cb)：监听请求

**响应拦截**
```js
// demo5
;(async () => {
const browser = await puppeteer.launch(launchOpt)
const page = await browser.newPage()

page.on('response', async (response) => {
if (response.request().resourceType() === 'document') {
console.log('>>> ', await response.text())
}
})
await page.goto('https://www.qq.com')
})()
```
- page.on('response', cb)：监听响应

**性能分析**
```js
// demo6
;(async () => {
const browser = await puppeteer.launch(launchOpt)
const page = await browser.newPage()
await page.tracing.start({ path: 'trace.json' })
await page.goto('https://www.qq.com')
await page.tracing.stop()
})()
```
创建一个可以在 Chrome DevTools or timeline viewer 中打开的跟踪文件。
- page.tracing.start：开启追踪
- page.tracing.stop：结束追踪

**执行脚本**
```js
// demo7
;(async () => {
const browser = await puppeteer.launch(launchOpt)
const page = await browser.newPage()
const param = '到此一游'
await page.goto('https://www.qq.com')
const result = await page.evaluate(async (p) => {
console.log('>>> 脚本执行', p)
return '从控制台返回'
}, param)
console.log('>>> reuslt', result)
})()
```
page.evaluate(pageFunction[, ...args])
- pageFunction <function|string> 要在页面实例上下文中执行的方法
- ...args <...Serializable|JSHandle> 要传给 pageFunction 的参数
返回: <Promise<Serializable>> pageFunction执行的结果

注意：回调函数中的作用域是浏览器作用域，如果想要使用Nodejs中的变量，必须显示传递参数

### 场景应用
1. 模拟登录
```js
// demo8
const path = require('path')
const puppeteer = require('puppeteer')
const account = {
username: 'hgk',
password: '****'
}

const LOGIN = {
username: '[name=username]',
password: '[name=password]',
login: '.j-submitBtn'
}

const launchOpt = {
headless: false,
devtools: true,
defaultViewport: null,
ignoreDefaultArgs: [ '--enable-automation' ],
args: [ '--no-sandbox', '--disable-setuid-sandbox' ],
executablePath: path.join(__dirname, '../chrome-mac/Chromium.app/Contents/MacOS/Chromium')
}

;(async () => {
const browser = await puppeteer.launch(launchOpt)

const page = await browser.newPage()

await page.goto('http://hgk0.qytest.netease.com/login')

await page.waitFor(LOGIN.username)
await page.focus(LOGIN.username)
await page.type(LOGIN.username, account.username, { delay: 50 })
await page.focus(LOGIN.password)
await page.type(LOGIN.password, account.password, { delay: 50 })
await page.click(LOGIN.login)
await page.waitFor(3000)
const cookieList = await page.cookies()
console.log('>>> cookie', cookieList)
})()
```

2. 生成骨架屏
```js
// demo9
const path = require('path')
const puppeteer = require('puppeteer')
const devices = require('puppeteer/DeviceDescriptors') //引入手机设备ua 设置
const fs = require('fs')
const launchOpt = {
headless: false,
devtools: true,
ignoreDefaultArgs: [ '--enable-automation' ],
args: [ '--no-sandbox', '--disable-setuid-sandbox' ],
executablePath: path.join(__dirname, '../chrome-mac/Chromium.app/Contents/MacOS/Chromium')
}
const createDom = require('./dom')
;(async () => {
const browser = await puppeteer.launch(launchOpt)
const page = await browser.newPage()

await page.emulate(devices['iPhone X'])

console.log('>>> ✅开始加载网页')

// await page.goto('https://www.baidu.com/')
await page.goto('https://huke.163.com/')
page.waitFor(3000)

console.log('>>> ✅开始生成骨架页面')

const result = await page.evaluate(createDom, {
background: '#eee',
animation: 'opacity 1s linear infinite;'
})

fs.writeFileSync('sk.html', `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@keyframes opacity {
0% {
opacity: 1
}

50% {
opacity: .5
}

100% {
opacity: 1
}
}
</style>
<body>
${result}
</body>
</html>
`)

console.log('>>> ✅骨架页面完成', result)
})()

```
![](https://hgkcdn.oss-cn-shanghai.aliyuncs.com/test/mind.png)

3. 页面性能指标计算

window.performance.timing

![](https://hgkcdn.oss-cn-shanghai.aliyuncs.com/test/2969235-b0b55896540969c5.png)

```
// .navigationStart 准备加载页面的起始时间
// .unloadEventStart 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间
// .unloadEventEnd 如果前一个文档和当前文档同源,返回前一个文档开始unload结束的时间
// .redirectStart 如果有重定向,这里是重定向开始的时间.
// .redirectEnd 如果有重定向,这里是重定向结束的时间.
// .fetchStart 开始检查缓存或开始获取资源的时间
// .domainLookupStart 开始进行dns查询的时间
// .domainLookupEnd dns查询结束的时间
// .connectStart 开始建立连接请求资源的时间
// .connectEnd 建立连接成功的时间.
// .secureConnectionStart 如果是https请求.返回ssl握手的时间
// .requestStart 开始请求文档时间(包括从服务器,本地缓存请求)
// .responseStart 接收到第一个字节的时间
// .responseEnd 接收到最后一个字节的时间.
// .domLoading ‘current document readiness’ 设置为 loading的时间 (这个时候还木有开始解析文档)
// .domInteractive 文档解析结束的时间
// .domContentLoadedEventStart DOMContentLoaded事件开始的时间
// .domContentLoadedEventEnd DOMContentLoaded事件结束的时间
// .domComplete current document readiness被设置 complete的时间
// .loadEventStart 触发onload事件的时间
// .loadEventEnd onload事件结束的时间
```

```js
const path = require('path')
const puppeteer = require('puppeteer')
const launchOpt = {
headless: false,
devtools: false,
defaultViewport: null,
ignoreDefaultArgs: [ '--enable-automation' ],
args: [ '--no-sandbox', '--disable-setuid-sandbox' ],
executablePath: path.join(__dirname, '../chrome-mac/Chromium.app/Contents/MacOS/Chromium')
}
const times = 2
const record = []
const url = 'https://www.qq.com'
;(async () => {
console.log('>>> 性能统计开始')
for (let i = 0; i < times; i++) {
const browser = await puppeteer.launch(launchOpt)
const page = await browser.newPage()
await page.goto(url)
// 等待保证页面加载完成
await page.waitFor(5000)
// 获取页面的 window.performance 属性
const timing = JSON.parse(await page.evaluate(() => JSON.stringify(window.performance.timing)))
record.push(calculate(timing))
await browser.close()
}

let whiteScreenTime = 0, // 白屏时间
requestTime = 0, // 请求耗时
dns = 0, // DNS耗时
tcp = 0, // TCP链接耗时
domParse = 0, // DOM解析耗时
domReady = 0, // domReady时间
onload = 0 // 触发onLoad时间

for (let item of record) {
whiteScreenTime += item.whiteScreenTime
requestTime += item.requestTime
dns += item.dns
tcp += item.tcp
domParse += item.domParse
domReady += item.domReady
onload += item.onload
}

console.log('>>> 性能统计结果')
console.log('----------')
const result = []
result.push(url)
result.push(`页面平均白屏时间为：${whiteScreenTime / times} ms`)
result.push(`页面平均请求时间为：${requestTime / times} ms`)
result.push(`页面平均DNS耗时：${dns / times} ms`)
result.push(`页面平均TCP耗时：${tcp / times} ms`)
result.push(`页面平均DOM解析耗时：${domParse / times} ms`)
result.push(`页面平均domready时间为：${domReady / times} ms`)
result.push(`页面平均onLoad触发时间：${onload / times} ms`)
console.log(result)
console.log('----------')

function calculate (timing) {
const result = {}
// 白屏时间
result.whiteScreenTime = timing.responseStart - timing.navigationStart
// 请求时间
result.requestTime = timing.responseEnd - timing.responseStart
// DNS
result.dns = timing.domainLookupEnd - timing.domainLookupStart
// TCP
result.tcp = timing.connectEnd - timing.connectStart
// DOM解析
result.domParse = timing.domComplete - timing.domInteractive
// onready
result.domReady = timing.domContentLoadedEventEnd - timing.fetchStart
// onload
result.onload = timing.loadEventEnd - timing.fetchStart
return result
}
})()

```

可以结合**lighthouse**开发更加完备的网页性能分析工具
```
lighthouse https://www.qq.com/ --output html --output-path ./report.html
```

参考资料
- [puppeteer中文文档](https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v3.0.4&show=api-pageselector)