Headless Chrome简介
什么是Headless Chrome
- 自2017年中，改成59版本以来，Chrome用户可以选择以headless模式运行浏览器。
- 无头浏览器就是没有页面的浏览器
- 我们可以通过命令行操控浏览器
为什么使用Headless Chrome
- 这个功能非常适合运行前端浏览器测试。
- 对于UI自动化测试，少了真实浏览器加载css，js以及渲染页面的工作。无头测试要比真实浏览器快的多。
- 可以在无界面的服务器或CI上运行测试，减少了外界的干扰，使自动化测试更稳定。
- 在一台机器上可以模拟运行多个无头浏览器，方便进行并发测试。
- Headless Chrome正在迅速取代PhantomJS。随着Google在Chrome 59版本放出了headless模式，作者决定放弃对Phantom.js的维护
而chrome对ECMAScript 2017 (ES8)支持，同样headless随着chrome更新，意味着我们也可以使用最新的js语法来编写的脚本，例如async，await等。
使用命令行开启Headless Chrome
- 如果已经安装了59版本以上的chrome 可以使用
--headless标志启动Chrome
# mac os下chrome的安装路径（其他系统换一下路径）
alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
chrome \
--headless \
--disable-gpu \ # 由于在后端使用，不需要gpu
--remote-debugging-port=9222 \ # 开启远程调试端口9222，可在chrome中打开这一端口
http://www.baidu.com # 要打开的url
- 命令行可以实现的功能举例
- 打印DOM
chrome --headless --disable-gpu --dump-dom http://www.baidu.com
- 创建pdf
chrome --headless --disable-gpu --print-to-pdf http://www.baidu.com
- 截图
chrome --headless --disable-gpu --screenshot http://www.baidu.com
使用编程模式使用Headless Chrome——Puppeteer(Node库)
Puppeteer是由Chrome团队开发的node库
通过DevTools Protocol控制无头版(或完全版)chrome和chromium的高级API库
puppeteer安装
npm install puppetter
直接执行安装会给你安装一个最新版本的Chromium ，若要跳过该步骤，可以设置一个环境变量，再安装。参照Environment variables.
Puppeteer 要求使用 Node v6.4.0，但因为例子中大量使用 async/await，需要 Node v7.6.0 或以上
puppeteer主要API
这张图来自puppeteer官方文档，可以看出一个broswer实例可以包括多个page（页面）
puppeteer的主要API分类和这张图里的结构相似，包括：Browser，Page，Keyboard，Mouse，Tracing，Frame，Request，Response
……
常用的有page相关的api，比如page.evaluate()，允许我们在其中使用dom选择器(querySelector等...)
puppeteer的使用思想——网页浏览者视角
对于web开发者，刚使用puppeteer的时候会不习惯，举个例子来说：
如果我们想对一个表单进行输入，一般是先获取页面input元素，再给元素设置值；
但如果使用puppeteer，我们应该先将光标focus到元素上，再模拟键盘输入：
await page.focus('myInput')
await page.keyboard.sendCharacter('test')
可以发现puppeteer使用起来也挺自然。
Puppeteer应用举例
- 获取网页截图/生成PDF
- 从网站抓取你需要的内容
- 自动表单提交，UI测试，键盘输入等
- 创建一个最新的自动化测试环境。使用最新的JavaScript和浏览器功能，直接在最新版本的Chrome中运行测试。
- 捕获您的网站的时间线跟踪，以帮助诊断性能问题。
截图服务（koa+puppeteer）
这里举一个我自己写的http截图服务为例，使用node启用截图服务后，使用post请求传递url，cookies，截图参数(截图范围大小，截图dom的selector，起点及宽高)，最后以base64方式返回截图：
async screenshot (ctx, next) {
await next();
const browser = await puppeteer.launch();
const page = await browser.newPage();
const rqBody = ctx.request.body;
// 设置cookie
const myCookie = rqBody.cookie;
const url = requestBody.url;
// 如果url没传，报错
if (!url) {
...
}
// 如果cookie没传，报错
if (!myCookie) {
...
}
// 设置viewport的大小
page.setViewport({
width: rqBody.viewWidth,
height: rqBody.viewHeight
});
await page.setCookie({
name: myCookie.name,
value: myCookie.value,
url: url
})
await page.goto(url);
// 根据传入的selector字符串，对Node截图
const mySelector = rqBody.selector || 'body';
await page.waitForSelector(mySelector);
const region = await page.evaluate((mySelector) => {
let select = document.querySelector(mySelector);
let selectParam = select.getBoundingClientRect();
return Promise.resolve({
x: selectParam.x,
y: selectParam.y,
width: selectParam.width,
height: selectParam.height
})
}, mySelector);
// 返回base64编码的图片
const result= await page.screenshot({
clip: {
...region
},
encoding: 'base64'
});
ctx.response.body = result;
await browser.close();
}
完整代码之后会放在git上，然后放上链接
