开发者社区> 天外归云> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 按照网上的教程来呢,一定是不好使的,这是常理。 所以必须要告诉你怎么使用Phantomjs…… 这么用! 1.下载Phantomjs的压缩包并解压缩; 2.在bin目录(包含phantomjs.exe文件的目录)下,按住shift键并同时点击鼠标右键。
+关注继续查看

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

所以必须要告诉你怎么使用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功能的自动化测试。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Windows 7安装小记
前两天要在本本上安装VB.NET,结果VS2005的安装程序提示"某些组件必须安装在目录中。请检查您在该目录中是否有写权限以及该目录中是否有足够的空间。",如下图所示。                     Google了一番,有人给出了解决办法,如下: 运行VS2005命令行,浏览到.NET2.0的路径, 一般在C:\WINDOWS\MICROSOFT.NET\FRAMEWORK\V2.0.50727下,然后运行ASPNET_REGIIS.EXE /I。
972 0
windows7x64安装小记
今天安装了一下Win7的x64版本 感觉上和x86差不多 不过语言包更大了点,而且杀毒软件没的安了,只有卡吧一个http://www.kaspersky.com/windows7
709 0
【镜像更新】Windows Server 2019 数据中心版
信息摘要: Windows Server 2019 数据中心版镜像更新适用客户: 使用Windows Server的用户版本/规格功能: 镜像ID: win2019_64_dtc_1809_zh-cn_40G_alibase_20190318.
4679 0
Windows server2003配置ftp服务
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/45010139 前言:如果你已经非常清楚的掌握了Windows server 2003的安全机制,那么你可以通过开启Windows自带的ftp服务进行使用,不过很多情况下,这不安全,但是我会告诉你方法,这需要你的Windows安装目录下有对应的ftp安装包。
706 0
+关注
天外归云
测试开发工程师,目前就职于网易。
200
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载