Puppeteer和Headless chrome的简介和应用

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上，然后放上链接