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功能的自动化测试。