前端自动化测试工具:SlimerJS、phantomJS 和 CasperJS

对于富客户端的 Web 应用页面,自动登录、页面修改、抓取页面内容、屏幕截图、页面功能测试…面对这些需求,使用后端语言需要花费不少的精力才能实现。此时 SlimerJS、phantomJS 或 CasperJS 或许是更好的一种选择。

一、PhantomJS 和 SlimerJS

PhantomJS 和 SlimerJS 都是服务器端的 JavaScript API 工具,可以理解为无界面的可编程操作的浏览器。 它们大部分的 API 接口都很相似,使用方法也很接近,最大的不同在于:PhantomJS 基于 Webkit 内核,不支持 Flash 的播放;SlimerJS 基于火狐的 Gecko 内核,支持 Flash播放,并且执行过程会有页面展示。
借助 PhantomJS 或 SlimerJS 所提供的 API,你几乎可以使用 javascript 模拟在浏览器上的任何操作:打开页面、前进/后退、页面点击、鼠标滚动、DOM 处理、CSS 选择器、Canvas 画布、SVG画图,如此等等。

例如,对页面的某个区域截图:

SlimerJS 示例:

01 var webpage = require('webpage').create();
02 webpage.open('http://www.meizu.com') // 打开一个网页
03 .then(function() { // 页面加载完成后执行
04     //保存页面截屏
05     webpage.viewportSize = {
06         width: 650,
07         height: 320
08     };
09     webpage.render('page.png', {
10         onlyViewport: true
11     });
12     //再打开一个网页
13     return webpage.open('http://bbs.meizu.com');
14 })
15 .then(function() {
16     // 点击某个位置
17     webpage.sendEvent("click", 5, 5, 'left', 0);
18     slimer.exit(); //退出
19 });

PhantomJS 示例:

01 var webpage = require('webpage').create();
02 var url = 'http://www.phantomjs.org/';
03 webpage.open('http://www.meizu.com', function (status) {
04   //打开一个页面
05 }).then(function(){
06     //保存页面截屏
07     webpage.viewportSize = {
08         width: 650,
09         height: 320
10     };
11     webpage.render('page.png', {
12         onlyViewport: true
13     });
14     //再打开一个网页
15     return webpage.open('http://bbs.meizu.com');
16 }).then(function(){
17     webpage.sendEvent("click", 5, 5, 'left', 0);
18     phantom.exit();
19 });

可以看到,上面的代码内容非常相似,实现的功能都是打开页面,然后截图。

参考:

http://phantomjs.org/
https://github.com/ariya/phantomjs
http://slimerjs.org/
http://docs.slimerjs.org/current/
https://github.com/laurentj/slimerjs/

二、前端自动化测试工具 CasperJS

CasperJS 是一个开源的导航脚本和测试工具。它提供了一套用于 Web 应用测试的方法组件,这些组件基于 PhantomJS 或 SlimerJS 所提供的 javascript API,实现对 Web 应用的功能执行。CasperJS 简化了完整的导航场景的过程定义,提供了用于完成常见任务的实用的高级函数、方法和语法。如:

定义和整理导航步骤
表单填充
点击、跟踪链接
区域、页面截图
断言远程DOM
日志、事件
资源下载,包括二进制资源
捕捉错误,并做出相应的响应
……

使用 CasperJS 的方法组件,可以更方便的书写前端自动化测试脚本

CasperJS 示例:

01 var utils = require('utils');
02 var webpage = require('casper').create({
03     //verbose: true,
04     logLevel: 'debug',
05     viewportSize: {
06         width: 1024,
07         height: 768
08     },
09     pageSettings: {
10         loadImages: true,
11         loadPlugins: true,
12         XSSAuditingEnabled: true
13     }
14 });
15
16 //打开页面
17 webpage.start()
18     .thenOpen('http://www.meizu.com', function openMeizu(res) {
19         this.echo('打印页面信息');
20         res.body = '';//不打印body信息
21         utils.dump(res);
22         //点击登录按钮
23         if (this.exists("#_unlogin")) {
24             this.echo('点击登录按钮');
25             this.click("#_unlogin a:nth-child(1)");
26             this.wait(3000, function wait3s_1() {
27                 if (this.exists("form#mainForm")) {
28                     this.echo("需要登陆,填充账号信息。。。");
29                     //填充表单账号
30                     this.fill('form#mainForm', {
31                         'account': 'lzwy0820@flyme.cn',
32                         'password': '********'
33                     }, true);
34                     this.capture('meizu_login_page.png');
35                     this.wait(3000, function wait3s_2() {
36                         //登录按钮存在,点击
37                         if (this.exists("#login")) {
38                             this.echo('提交登录');
39                             this.click("#login");
40                         }
41                     });
42                 }
43             });
44         }
45     })
46     .then(function capture() {
47         if (this.exists('#mzCustName')) {
48             this.echo('登录成功!开始截图存储..');
49         } else {
50             this.echo('登录失败!请查看截图文件')
51         }
52         //截图
53         this.capture('meizu.png');
54         this.captureSelector('meizu_header.png', 'div.meizu-header');
55     })
56     .then(function exit() {
57         this.echo('执行完成,退出');
58         this.exit();
59     })
60     .run();

效果参考:

前端自动化测试工具:SlimerJS、phantomJS 和 CasperJS
图1 登陆页
前端自动化测试工具:SlimerJS、phantomJS 和 CasperJS
图2 首页登陆成功
前端自动化测试工具:SlimerJS、phantomJS 和 CasperJS
图3 局部截取(header)

提示:可在 create casper 对象时进行一些初始化设置,比如不用请求图片资源,CSS资源,以及不需要的JS等资源,这样可以加快测试执行速度。

http://casperjs.org/
http://www.qiqishare.com/

三、安装与使用 SlimerJS、phantomJS 和 CasperJS

1. 安装

nodejs 安装:

http://nodejs.org
https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

CasperJS 安装(需要 python2.6 以上版本支持):

执行命令:npm install -g casperjs
http://docs.casperjs.org/en/latest/installation.html
https://www.python.org/download/

SlimerJS 安装(需要先安装 Firefox 或 XulRunner ):

执行命令:npm install -g slimerjs
http://www.slimerjs.org/download.html
http://docs.slimerjs.org/current/installation.html

phantomJS 安装:

npm install -g phantomjs
或者下载 phantomJS:http://phantomjs.org/download.html
解压并配置 phantomjs.exe 访问路径到环境变量。

2. 使用

将上文示例保存为 js 文件(如 test_*.js) ,然后打开命令行,进入到该文件所在目录下,执行命令:

slimerjs test_slimerjs.js

phantomjs test_phantomjs.js
# 默认使用 phantomjs 引擎
casperjs test_casperjs.js
# 使用 slimerjs 引擎
casperjs test_casperjs.js –disk-cache=yes –engine=slimerjs

可对比查看执行过程与结果。

本文只是简单介绍三种工具的功能与基本安装使用,具体功能应用可参考其各自文档,也可在讨论区书写您的意见和建议。

附:前端自动化测试工具 Selenium

Selenium 也是一个前端自动化测试工具,与 casperJS 的无界面方式不同,Selenium 是直接运行于浏览器中,并且通过插件可以实现脚本录制等功能。

http://docs.seleniumhq.org/

转载请注明出处:https://stgod.com/3054/

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: