如何使用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拆成puppteteer-core和浏览器两部分。也就是说浏览器需要自己手动去下载。下载地址可以通过华为云镜像站搜索chromium进行匹配下载,如图3-2所示。

图3-2 puppteteer浏览器chrome下载

当然不同的puppeteer-core版本匹配不同的浏览器版本,不然会有报错。版本匹配如图2-3所示。大家也可以在官网github上进行查看:https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

图3-3 puppeteer版本匹配

4、 轻松入门

这部分包括windows和linux上的配置和运行。因为最终是需要部署到linux服务上去。

4.1 简单实现

如果windows下使用puppeteer非常容易,在package.json加上下面一行代码:

"puppeteer-core":"1.13.0",

下面是一点简单截频实现:

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto('https://example.com');

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

await browser.close();

})();

4.2 基本语法

这些是puppeteer一些基础的语法,可以满足一些常用功能。

async/await

看官方的例子就可以看出来,几乎所有的操作都是异步的,如果坚持使用回调或者Promise.then 写出来的代码会非常丑陋且难读,Puppeteer 官方推荐的也是使用高版本 Node 用 async/await 语法

async确保了函数返回一个promise,即使其中包含非promise。够简单了吧?但是不仅仅只是如此,还有另一个关键词await,只能在async函数里使用,同样,它也很cool。

关键词await可以让JavaScript进行等待,直到一个promise执行并返回它的结果,JavaScript才会继续往下执行。

let value = await promise

查找元素

这是 UI 自动化测试最常用的功能了,Puppeteer 的处理也相当简单

page.$(selector)

page.$(selector)

这个在底层依然是执行document.querySelector和document.querySelectorAll。但返回的不是dom对象。而是封装的。

获取DOM属性

我们写爬虫爬取页面图片列表,感觉可以通过

page.$$(selector) 获取到页面的元素列表,然后再去转成 DOM 对象,获取 src,然后并不行,想做对获取元素对应 DOM

属性的获取,需要用专门的 API:page.$eval(selector, pageFunction[, ...args])

Evaluate

如果我们有一些及其个性的需求,无法通过 page.$() 或者 page.$eval() 实现,可以用大招——evaluate。如下所示:

const result = await page.evaluate(() => {

return Promise.resolve(8 * 7);

});

console.log(result); // prints "56"

const aWindowHandle = await page.evaluateHandle(() => Promise.resolve(window));

aWindowHandle; // Handle for the window object. 相当于把返回对象做了一层包裹

性能

通过 page.getMetrics() 可以得到一些页面性能数据。

Timestamp The timestamp when the metrics sample was taken.

Documents 页面文档数

Frames 页面 frame 数

JSEventListeners 页面内事件监听器数

Nodes 页面 DOM 节点数

LayoutCount 页面 layout 数

RecalcStyleCount 样式重算数

LayoutDuration 页面 layout 时间

RecalcStyleDuration 样式重算时长

ScriptDuration script 时间

TaskDuration 所有浏览器任务时长

JSHeapUsedSize JavaScript 占用堆大小

JSHeapTotalSize JavaScript 堆总量

会返回如下数据:

{

Timestamp: 382305.912236,

Documents: 5,

Frames: 3,

JSEventListeners: 129,

Nodes: 8810,

LayoutCount: 38,

RecalcStyleCount: 56,

LayoutDuration: 0.596341000346001,

RecalcStyleDuration: 0.180430999898817,

ScriptDuration: 1.24401400075294,

TaskDuration: 2.21657899935963,

JSHeapUsedSize: 15430816,

JSHeapTotalSize: 23449600

}

更多功能请查看puppeteer的github官网。

https://github.com/GoogleChrome/puppeteer#usage

4.3 Linux安装Puppeteer

windows下调试好的项目,在linux上运行,还是需要费一番功夫,需要配置更多的参数。如下:

一、下载相关依赖包,这些依赖包都是chrome运行所需要的。

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64

libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64

alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi

xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc

二、字体安装:

yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc

三、增加—no-sandbox –disable-setuid-sandbox

const browser = await puppeteer.launch({args:['--no-sandbox', '--disable-setuid-sandbox']})

笔者的工作环境比较复杂,中间因为权限问题导致运行报错,这个时候需要增加一些代理设置。

5、puppeteer体验度量实践

前面主要是讲一些puppeteer基本功能和实践。那我们基于puppeteer怎么解决实际问题的呢。

5.1 规范的建立

在使用puppeteer之前,需要先梳理各微服务使用的场景,以及术语规范等,梳理清楚之后在来进行工具自动化。首先我们参照尼尔森可用性原则。

上面这位略显阴柔的帅哥就是尼尔森(Jakob Nielsen),人机交互学博士。他通过自己的邮件列表以及网站,向成千上万的web设计师传授web易用性方面的只是。是web设计师眼中的顶尖领袖。Jakob

Nielsen在1995年发表了“尼尔森十大可用性原则”。

在尼尔森十大原则里有一项是UI一致性原则,我们基于这个梳理出DevCloud的一些细化的点,并给出每个测试因子的权重和分值,计算出各个服务的UI体验,最后换算成百分值,最后加权计算服务体验总分。图5-1就是我们梳理出来的部分规则。

图5-1 测试分类

5.2 具体使用puppteer

在上面建立规则之后,我们再针对每个检测项评估是否可以量化,怎么量化。比如我们想检测组件的覆盖度。图4-2是我们产品所使用的公共组件库。都是以ave-开头,checkbox的命名就是ave-button。那普通的checkbox则是以input[type=checkbox]来写的。我们针对每个服务去扫面线上各个页面,看使用ave-check和使用原生input

checkbox的数量,这样就能统计出组件库的覆盖度。最终驱动各服务去整改。

通过组件的形式使得各个服务体验基本一致。

图5-2 DevCloud组件库

最终通过图表的形式来进行展示。如图5-3所示。

图5-3 ave-checkbox覆盖度

从图上我们可以看到ave-checkbox得到整改。

通过以上的方式,我们可以在组件、样式、以及体验旅程方面都能很好的把握整个产品设计是否与我们预期是一致的。

我们团队在自动化方面一直在探索,除了在前端测试、接口测试以及编译构建方面也一直遵从能够使用工具提升效率,绝不靠人工来进行检测的理念,不断的实践,极大的减少了人力成本。当然这些能力也一直是对外开放的:华为云软件开发服务DevCloud。也欢迎大家来建议和探讨。

​​​​​​​6、 参考资料及扩展阅读材料

The Front-End Tooling Survey 2018 - Results

尼尔森可用性十大原则

https://www.jianshu.com/p/53daaa5ba794

华为云DevCloud作为一站式云端DevOps平台,集成华为近30年研发实践和前沿理念,面向开发者提供研发工具服务,让软件开发简单高效。现支持5人以下额度范围内,可以免费使用,并且可以预约免费的产品演示和技术交流,详情查看华为云官网

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容