PhantomJS与CasperJS在Windows下的安装与使用

按照网上的教程来呢，一定是不好使的，这是常理。

所以必须要告诉你怎么使用Phantomjs……

这么用！

1.下载Phantomjs的压缩包并解压缩；

2.在bin目录（包含phantomjs.exe文件的目录）下，按住shift键并同时点击鼠标右键。（像我这么详细的说明才叫文档，否则一律视为装逼。）点击Open command window here：

3.如下图，输入phantomjs，然后输入要执行的js文件路径（可以将文件直接拖进命令行窗口），按回车：

至此PhantomJS就可以工作了。

然后我们要设置环境变量，也就是说要开始安装Phantomjs了，在windows下我的电脑中->右键properties->Advanced system settings->Environment variables->在system variables中找到Path这一变量，然后修改他的值，在结尾加上“;D:\phantomjs”。（前提是你要把下载的phantomjs解压缩到D盘路径下并且重命名为phantomjs，而且千万记住，要下载phantomjs1.9.X版本，不要下载2.0.X！因为我们后需要用到的casperjs是不兼容phantomjs 2.0以后的版本的，所以我们不能从官网下载phantomjs的最新版本，这里给出一个参考的下载phantomjs1.X版本的地址。）

我之所以要用phantomjs是为了实现web页面的功能自动化测试，所以这里还要安装一个叫CasperJS的工具，他能更好的辅佐PhantomJS进行网页功能测试。

接下来我们从CasperJS的官网下载CasperJS，这里我们假设解压缩到D盘，然后对文件夹进行重命名，修改Path环境变量（过程同上），在结尾加上“;D:\casperjs\bin”。至此，应如下图所示（注意黄色高亮部分）：

然后一路OK保存设置。现在我们就已经在Windows下安装好phantomjs和casperjs了，我们现在来验证一下是否安装成功！

打开cmd，输入phantomjs --version以及casperjs --version分别查看他们的版本信息，如果版本信息能够查询成功，就说明已经安装成功，如下图：

至此我们就可以使用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首页，在输入框中输入“666666”，然后点击“百度一下”进行搜索。结果是：失败了。我可以输入“666666”但是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 = "666666";
    });
    this.then(function () {
        this.thenClick('#su');
        this.wait(10000).then(function () {
            this.capture(output1);
        });
        this.then(function () {
            this.evaluate(function () {
                document.getElementById("kw").value = "tylan";
            });
        })
        this.thenClick("#su");
        this.wait(10000).then(function () {
            this.capture(output2);
        });
    })
});
casper.run();

我分别在第一次搜索和第二次搜索之后截了图，如下：

第一次搜索后截图——

第二次搜索后截图——

以此证明了自动化的成功。代码中混合用到了phantomjs和casperjs框架中封装的api，合理的运用断言（可以用api中给的方法也可以自己写，和selenium一样），将可以运用phantomjs和casperjs实现基于javascript的web UI功能的自动化测试。