casperjs（二）----实战测试

最新推荐文章于 2018-01-18 16:57:13 发布

原创最新推荐文章于 2018-01-18 16:57:13 发布 · 802 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#casperjs #phantomjs

phantomjs 同时被 2 个专栏收录

9 篇文章

订阅专栏

casperjs

1 篇文章

订阅专栏

本文介绍如何使用CasperJS和PhantomJS进行Web自动化测试。针对PhantomJS在操作某些元素时存在的局限性，作者详细展示了如何利用CasperJS解决这些问题，并提供了一个具体的搜索功能测试案例。

安装完成后，我们就可以进行实战测试了，

至此我们就可以使用casperjs和phantomjs来编写脚本进行测试了。

话说回来，我当时之所以要学习casperjs是因为我发现通过phantomjs无法完成很多简单的事情，包括点击一个按钮（这里拿baidu做为例子）：

// JavaScript source code
var page = require('webpage').create();
var address = 'http://www.baidu.com/';
var output = 'capture.jpeg';

page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load address!');
    } else
    {
        try 
        {
            var url = page.url;
            console.log('URL: ' + url);
            page.evaluate(function () {
                document.getElementById('kw').value = "translate";
                //document.getElementById('su').click();
            });
            window.setTimeout(function () {
                page.render(output, { format: 'jpeg', quality: '100' });
                phantom.exit();
            }, 200);
        } catch (err)
        {
            console.log(err);
        }
    }
});

我要访问百度，在搜索框中输入translate，点击百度一下按钮进行search，然后对网页截个图。上文中注释掉的代码就是软肋，phantomjs做不到的地方。

于是我发起了博问虽然最终以自问自答的形式告终，显然我并没有得到什么实质性的建议，有人建议我用selenium（不得不说C#结合selenium确实是web功能测试利器），但我本次的目的是要研究基于phantomjs框架的web功能测试，而不是selenium。

后来我通过research，发现casperjs是个不错的基于phantomjs并且能够实现我所想达到的目的的这样一个工具。这是casperjs相关的API文档。

经历了很久的爬坡，终于从深坑中出来，并掌握了这门基于Javascript框架的web UI自动化测试技术，途中经历了这样一个坑：

定位不到页面submit类型input按钮的问题，这里我拿baidu做了例子。我打开baidu首页，在输入框中输入“66666666”，然后点击“百度一下”进行搜索。结果是：失败了。我可以输入“66666666”但是click button却失败了。因为这是个在看不见的浏览器中进行的自动化测试，和selenium不一样。所以我没法看到为什么失败了，是不是元素还没加载完毕，我就点了呢？事实证明和这个是有关系的。我来验证是否点击成功的方法是截图，网页截图。在点击完按钮后我会截个图，来看一下，页面是否发生了跳转。就是这个地方出错了。点击完按钮之后马上截图是不行的！必须要登上个几秒，至于是几秒，自己试吧！这里我把我做的一个成功的用百度进行搜索的自动化用例贴出来，代码如下：

// JavaScript source code
var address = 'http://www.baidu.com/';
var output1 = 'D:\capture1.png';
var output2 = 'D:\capture2.png';
var casper = require('casper').create();
casper.start(address).then(function () {
    this.evaluate(function() {
        document.getElementById("kw").value = "66666666";
    });
    this.then(function () {
        this.thenClick('#su');
        this.wait(10000).then(function () {
            this.capture(output1);
        });
        this.then(function () {
            this.evaluate(function () {
                document.getElementById("kw").value = "meinv";
            });
        })
        this.thenClick("#su");
        this.wait(10000).then(function () {
            this.capture(output2);
        });
    })
});
casper.run();