Puppeteer 初探以前端自动化测试

欢迎你们前往腾讯云技术社区，获取更多腾讯海量技术实践干货哦~

做者：林淙源
html

导语： Most things that you can do manually in the browser can be done using Puppeteer！前端

初识puppeteer

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

puppeteer功能

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

安装 puppeteergit

yarn add puppeteer
# or "npm i puppeteer"
复制代码

可能会遇到没法下载Chromium 问题github

是由于在执行安装的过程当中须要执行install.js，这里会下载Chromium,官网建议是进行跳过，咱们能够执行 —ignore-scripts 忽略这个js执行chrome

./node/npm i --save puppeteer --ignore-scripts
复制代码

接下来咱们须要去下载Chromium，windows的版本我这里已经下载好了,直接解压缩附件中的到 node_modules/puppeteer中就能够了。npm

执行下,咱们建立一个文件index.js，文件内容json

const puppeteer = require('puppeteer');

(async () => {
      const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://y.qq.com');
    await page.screenshot({path: 'yqq.png'});
    browser.close();
})();
复制代码

这段代码会打开 y.qq.com 并截图，咱们运行windows

node  index.js
复制代码

若是看到目录下有生成图片y.qq.png的话，恭喜你，咱们能够开始继续往下学习puppeteer了。

体验第一个demo,数字专辑自动购买的UI自动化测试

这里测试的功能是自动拉登陆购买一张数字专辑，并在购买成功后跳转到铭牌页，先看下整个流程吧。

首先咱们先建立一个设备，文档中(github.com/GoogleChrom…)
咱们能看到，默认支持的设备数量仍是不少的，除了这些默认的设备以外，咱们还能够自定义本身的设备，后面在调用emulate方法时会提到：

咱们这里暂时先建立系统提供的iphone6设备，完了咱们定义一个延时的timeout函数

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];
let timeout = function (delay) {
     return new Promise((resolve, reject) => {   
           setTimeout(() => {   
                  try {
                      resolve(1)
                  } catch (e) {
                      reject(0)
                   }
           }, delay);
     })
 }
复制代码

接下来咱们建立一个浏览器实例，并打开一个页面，细心的你必定发如今建立浏览器的时候咱们传了headless参数，若是设为true的话就能能够在不打开外部浏览器的状况下彻底利用v8引擎来进行页面的测试，简单说就是页面以及Dom彻底在内存中，就连浏览器事件也是在内存中去模拟触发。

const browser = await puppeteer.launch({
      headless:false //这里我设置成false主要是为了让你们看到效果，设置为true就不会打开浏览器
 });

 const page = await browser.newPage();
复制代码

建立好浏览器实例以后咱们须要让页面模拟成iphone6，这里的emulate函数的参数你也能够自定义参数

await page.emulate(iPhone);
参数:
 {
    'name': 'Galaxy S5', //设备名
    'userAgent': 'Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36', //UA
    'viewport': {
      'width': 360,//屏幕宽度
      'height': 640,//屏幕高度
      'deviceScaleFactor': 3,//缩放比例
      'isMobile': true,//是不是移动设备
      'hasTouch': true,//是否支持touch事件
      'isLandscape': false//是否横屏
    }
  }
复制代码

好接下来咱们就能够写咱们的测试步骤了。

第一步：咱们打开页面，考虑到有数据须要异步加载，咱们在延迟1000ms后调用screenshot方法截图留做日志。

console.log("进入页面");
await page.goto('https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2210323&g_f=tuijiannewupload#index/fans');
await timeout(1000);
await page.screenshot({
     path: '1.png'
 });
复制代码

第二步：模拟触发点击当即购买按钮，这时候会由于没有登陆态而打开QQ登陆。

console.log("点击当即购买按钮");
await page.tap('.js_sale_buyalbum');
await page.screenshot({
    path: '2.png'
 });
复制代码

第三步：在输入框中输入账号密码，模拟输入须要咱们先调用tap方法模拟点击输入框，tap参数就是元素selector,再用type方法进行输入,输入完了以后在模拟点击登陆按钮，登陆完了以后咱们延迟一段时间截图，顺利的话咱们就能从新回到以前的售卖页首页，而底下usrbar由于有了登陆态也展现了出来。

console.log("登陆");
await page.tap("#u"); //直接操做dom选择器，是否是很方便
await page.type("521017853");

await page.tap("#p");
await page.type("*********");//这里密码就不展现了哈

await page.tap("#go");

await timeout(3000);

await page.screenshot({
     path: '3.png'
});

console.log("登陆成功");
复制代码

第四步：跟第一步同样，点击当即购买按钮，这里会出现一个购买选择浮层,而后咱们点击当即支付以后须要加载米大师，故这里咱们延迟5000ms。

//点击购买
console.log("点击当即购买按钮");
await page.tap('.js_sale_buyalbum');

await page.screenshot({
    path: '4.png'
});

console.log("点击支付浮层上的当即支付");
await page.tap(".js_buyalbum_pay");

await timeout(5000);
复制代码

第五步：在拉起米大师支付浮层以后，咱们须要去点击提示中的肯定按钮，因为米大师是在iframe中打开的，因此咱们须要先获取到咱们当前页frame,这个能够调用刚建立的页面实例page的mainFrame()方法便可得到,若是咱们须要获取子frame的话也只须要调用childFrames来进行获取。在获取到米大师对应的frame以后就能够调用midas_frame.$(selector)类jquery的方法进行元素的获取，以后再模拟点击。

console.log("进入 米大师支付浮层")
await page.screenshot({
     path: '5.png'
});

let $frame = page.mainFrame();
let midas_frame = $frame.childFrames()[0];//获取到midas对应的frame

console.log("点击肯定 米大师支付浮层测试环境提示 的确认按钮");
let $dom = await midas_frame.$(".fusion-pm-fl-wrapper .fpm-default");
await $dom.tap();

await page.screenshot({
    path: '6.png'
});
复制代码

第六步：点击Q币支付

console.log("点击 米大师支付浮层 确认支付按钮");
$dom = await midas_frame.$("#wrap .fpm-default");
await $dom.tap();

await timeout(5000);

await page.screenshot({
    path: '7.png'
});
复制代码

第七步：点击完成进入铭牌页，测试完毕，关闭浏览器实例

console.log("点击 米大师支付浮层 支付完成");
$dom = await midas_frame.$("#wrap .btn-primary");
await $dom.tap();

await timeout(2000);

console.log("已购铭牌页");
await page.screenshot({
     path: '8.png'
});
browser.close();
复制代码

最后在项目目录中，咱们看到，各个步骤的截图都已生成。

体验第二个demo,页面性能检测 Puppeteer Trace API

Trace API 主要是利用Chrome Performance，生成页面性能追踪的文件 trace.json,在Chrome 开发者工具中上传该文件，就能够对里面的火焰图去作分析。
事例代码：

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

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

        const page = await browser.newPage();

        await page.emulate(iPhone);

        await page.tracing.start({path: './trace.json'});
        await page.goto('https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2210323&g_f=tuijiannewupload#index/fans');
        await page.tracing.stop();

        browser.close();
    } catch (e) {
        console.log(e.message);
    }
})();
复制代码

首先，这段代码执行的是模拟iphone6打开林俊杰的《丹宁执着》数专售卖页，并进行性能的分析。主要使用 tracing.start，stop生成trace.json文件

trace.json

接下来咱们打开Chrome的开发者工具，进入到Performance栏目下，把刚才的trace.json拖上去就能看到数据了

总结

经过上面两个例子，咱们看到了puppeteer能够作UI自动化测试和页面性能检测，其实他的功能远远不止于此，好比还能够作爬虫，去爬取github的文章或是掘金上的博客，总之，本身也是初次尝试，确定会有更多的功能可以被挖掘出来，但愿你们多多交流。

Puppeteer 初探以前端自动化测试

初识puppeteer

puppeteer功能

体验第一个demo,数字专辑自动购买的UI自动化测试

体验第二个demo,页面性能检测 Puppeteer Trace API

总结

相关阅读