前端自动化测试工具——SlimerJS

前端自动化测试工具——SlimerJS

1.基本了解

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

SlimerJS是服务器端的JavaScriptAPI工具,可以理解为无界面的可编程操作的浏览器。SlimerJS基于火狐的Gecko内核,支持Flash播放,执行过程会有页面展示。

借助SlimerJS所提供的API,几乎可以使用javascript模拟在浏览器上的任何操作:打开页面、前进/后退、页面点击、鼠标滚动、DOM处理、CSS选择器、Canvas画布、SVG画图,如此等等。

2.下载安装

1.下载FireFox

注意:最新版的FireFox47.0.1.0618,但是slimerjs中支持的是38-46版本的FireFox,所以需要到官网中下载适合的版本。

下载地址: http://www.firefox.com.cn/download/#more , 本人下载的是:

 

如果你是选择默认安装的话,就不需要在意。但如果你是选择其他盘或者自定义路径安装的话,请记住你的安装目录,这步很重要!!

2.下载SlimerJS

下载地址: http://www.slimerjs.org/download.html 下载其中的SlimerJS0.10 下载完成后 你可以看到如下的结构:

 

如果你的FireFox选择的是自定义安装的话,这里就需要注意了,用文本编辑器打开slimerjs.bat文件,并打开到最后,修改下图中的路径为自己的路径。当然修改一个就可以。

 

3.简单用例

这时咱们前期的环境和工具就已经搭建成功了。我们可以参考 http://docs.slimerjs.org/current/quick-start.html 页面中介绍的内容快速写出相关的使用用例了。

让我们先写第一个,新建一个test-slimer.js文件,内容如下:

 

//在控制台中输入 hello world
console.log("hello world");

这个代码的意思就是在控制台中显示出 hello world。具体运行的方式如下: 找到相应slimerjs的目录,然后运行 slimerjs test-slimer.js。效果如下图

 

执行的过程中 自动打开了Firefox浏览器,并在控制台输出了hello world.

4.用例扩展

Case: 如果每次都通过控制台来执行相应的动作的话,太过于麻烦。本人自己写了一个start.bat文件,内容很简单就是执行相应的动作。内容如下:

 

G:\GuiFaZhi\HeavySkill\JSUnitTest\slimerjs\slimerjs-0.10.0\slimerjs test-slimer.js

可以按照你自己的路径和文件修改相关的内容然后完成执行的过程。

扩展用例如下: 具体代码含义可以参考代码备注:

 

//在控制台中输入 hello world
console.log("hello world");
var webpage = require('webpage').create();
webpage
  .open('http://cn.bing.com') // 加载一个页面 这里是打开了bing
  .then(function(status){  
    // 设置打开的页面大小为1500*980
    webpage.viewportSize =
        { width:1500, height:980 };
    var dt = new Date(); //获取当前时间
    if(status == "success"){
      console.log("You Open The Web Of : " + webpage.title);
      webpage.render('image/bing'+dt.getHours()+dt.getMinutes()+dt.getSeconds()+'.png',
                   {onlyViewport:true}); //截图创建新的文件
    }
    else{
      console.log("The Web is not loaded");
    }
      // 打开第二个链接 这里是打开了百度
      return webpage.open('http://www.baidu.com/');
  }) 
  .then(function(status){    
    var dt = new Date(); 
    if(status == "success"){
      console.log("You Open The Web Of : " + webpage.title);
      webpage.render('image/baidu'+dt.getHours()+dt.getMinutes()+dt.getSeconds()+'.png',
                   {onlyViewport:true}); 
      webpage.sendEvent("click", 5, 5,
                        'left', 0);  //发送一个单击时间 位置在左边的(5,5)处
    }
    else{
      console.log("The Web is not loaded");
    }
    webpage.close(); //把当前页面关闭
    slimer.exit(); //退出当前的控制台应用程序
  });

只是我们点击start.bat slimer完成自动的操作。效果如下:

 

这里我们可以看到第一个打开的网页是Bing,第二个打开的是”百度一下,你就知道”,但因为中文乱码问题,这里显示的是乱码。

 

同时我们截图的操作,在image中产生了对应的两个文件,这里需要解释的是,自动截图的时间是22:00:03 22:00:02 中间分钟和秒钟都少了一个零。所以对应到了是22032202

5.小结

通过对SlimerJS的了解,我们可以发现SlimerJS是一个自动化的前台工具,功能相对强大,可以模拟完成很多前端的操作,在不需要人为干预的情况下就可以完成。所以学习好SlimerJS对于前端的自动化测试还是很有必要的。

 

参考资料:http://www.slimerjs.org/download.html

http://docs.slimerjs.org/current/quick-start.html


  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值