如何使用Node爬虫利器Puppteer进行自动化测试

文：华为云DevCloud 乐少

1、背景

1.1 前端自动化测试较少   

前端浏览器众多导致页面兼容性问题比较多，另外界面变化比较快，一个月内可能页面改版两三次，这样导致对前端自动化测试较少，大家也不是很care。18年英国的一位开发者做过一些前端测试工具调查如图1-1所示。从图中可以发现有43%的用户未使用过任何前端测试工具。

                                                       图1-1

1.2 基于Puppteer的自动化测试

Puppeteer（中文翻译为“木偶”）是Google Chrome团队官方的无界面（Headless）Chrome工具。这是一个node库。提供高级API来控制DevTools协议无头版Chrome。Chrome的DevTools提供了非常之多和非常方便的页面工具，而Puppteteer则把这种能力通过Headless方式提供出来，可以在Linux操作能力，必将成为web应用的自动化测试行业标杆，场景非常之多。

1.3 解决实际问题

笔者是在华为云DevCloud的前端团队，团队采用前端微服务架构，也就是说，有很多前端portal，同时每个portal有若干个前端开发进行开发维护，开发之间沟通交流较少，而且还是在异地进行开发。但每个服务同属于DevCloud产品，所以页面体验、场景、控件、术语都需要保持一致，如果通过人工的方式来对每个服务页面进行检测是十分困难的一件工作。

2、Puppeteer能做什么

可以这么说，在chrome浏览器手动能完成的大部分事情可以使用puppteteer完成！你可以操作页面的dom、抓取内容等等。另外puppeteer还可以：

生成页面的截图和PDF；
抓取SPA并生成预先呈现的内容（SSR）
从网站上抓取你所想要的内容。自动表单提交，UI测试，键盘输入等等
创建一个最新的自动化测试环境，使用最新的JavaScript和浏览器功能，直接在最新版的chrome中运行测试。
3、Puppeteer版本

我最早使用的版本是puppetter@1.5.0版本，通过npm i pupptetter下载。里面包含自带浏览器版本。如图所示3-1所示。

                                图3-1 puppeteer自带浏览器

在版本1.7.0之后，google把puppeteer拆成pupptetee