Web自动化测试技术演进(by quqi99)

作者：张华  发表于：2014-03-16
版权声明：可以任意转载，转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明

(http://blog.csdn.net/quqi99 )

笔者在7年前（2007年）做过一年多的搜索引擎，那时候将服务端（动态部分如jsp已由nginx等调用相应的cgi得到处理）的页面抓取到客户端（包括js, css, tag），由于很多程序都用到了ajax在客户端异步地去服务端获取数据，所以如果想对这样的数据进行进一步的抽取的话最好抓取处理程序能够进一步调用js引擎去渲染抓取返回数据中的js脚本，一个很容易想到的就是去调用客户端浏览器的js引擎。这就是后来的Selenium, 它为各种浏览器都写了驱动（即webdriver)，所以缺点如下：
1）驱动接口本身不可能全部暴露浏览器的所有特性，所以功能会受限，是否会存在某些js的高级特性无法解析。
2）众多驱动，安装不会那么顺利
3）在客户端做的，且调用有窗口的浏览器，性能会受到些影响
即使像Selenium一样针对每种浏览器写驱动，但驱动接口本身不可能全部暴露浏览器的所有特性，后来浏览器更加开放，所以又出现了phantomjs技术，它与webkit浏览器引擎集成地更加深度（chrome, Safari) ，所以phantomjs比selenium更加适合做只针对功能方面的web自动化测试（可与Jenkins集成）。另一方面，phantomjs运行在服务端，这意味着服务端不仅可以通过cgi解析动态部分，也可以通过phantomjs调用webkit引擎渲染js和css等，从而实现无界面的(headless)的浏览器。
同理，对于无界面的自测化功能测试技术，除了针对webkit的phantomjs，还有：
1）针对Gecko引擎(Firefox用它）的SlimerJS （SimerJS is not yet truly headless)，参见：http://slimerjs.org/
2）针对IE系统引擎的trifleJS,  参见：http://triflejs.org/
如果在满足web功能自动化测试需求的同时，也想稍微满足兼容性方面的测试，可以考虑casperjs, casperjs是同时基于phantomjs与simerjs的更加上层一点的api，对Firefox, Chrome, Safari可能都支持得好，同时api也更上层易用。但是它仍然无法更好的兼容IE。

值得注意的是，由于phantomjs是直接用浏览器渲染的js, 所以它不需要像api去抓登录保持的网页还要处理cookie等，可见：http://hi.baidu.com/cbr250xxxx/item/a7952027b71ee380af48f50e

用casper编程时注意几点就行了：

1， 主代码和像casper.evaluate或capster.click是异步执行的，所以如果你在主代码里搞一个循环去调用casper.click的话，可能直会点click最后一个， 所以如果想同步调用，应该添加then语法，如casper.thenEvalute或capser.thenClick

2, 见注释

function getElements(selector) {
    var elements = document.querySelectorAll('.j_threadlist_media');
    for(var i=0; i<elements.length;i++){
       var element = elements[i];
       var evt = document.createEvent("MouseEvents");
       evt.initMouseEvent("click", true, true, window, 1, 1, 1, 1, 1, false, false, false, false, 0, element);
       element.dispatchEvent(evt);
    }

   // 演示如何在evaluate里返回一个数组结果
    return Array.prototype.map.call(elements, function(element) {
        return element
    });
}

casper.then(function () {  

    // 演示如何使用定时， 有时候waitForSelector这种方法更灵活，它不用一直等到超时再去做，直接条件满足了就去做，条件一直不满足再超时
     this.wait(6000,function() {
         casper.thenEvaluate(getElements, {selector : selector});
        this.echo(JSON.stringify(elements.length));

        //演示如何遍历数组
        this.each(elements, function (self, element) {  

            //如果selector从dom树匹配的是一个list的话，那就不能用thenClick方法了， 所以我们要在evalute里直接调用js的api去触发click MouseEvents去提交，

            ／／另外，对于ajax的提交也只能这样搞，当然，非ajax的表单提交可以用下面的thenClick方法做。

              //this.thenClick(selector);
        });
     });
});

参考：

1, https://wiki.mozilla.org/Compatibility/Web_Testing

2, http://www.tuicool.com/articles/beeMNj

3, http://panyongzheng.iteye.com/blog/1947900