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

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

PhantomJS与CasperJS在Windows下的安装与使用的更多相关文章

  1. memcache的windows下的安装和简单使用

    原文:memcache的windows下的安装和简单使用 memcache是为了解决网站访问量大,数据库压力倍增的解决方案之一,由于其简单实用,很多站点现在都在使用memcache,但是memcach ...

  2. Windows下pry安装和配置

    Windows下pry安装和配置 pry是一个增强型的交互式命令行工具,比irb强大. 有自动完成功能,自动缩进,有颜色.有更强大的调试功能. pry 安装很简单. 在终端输入: gem instal ...

  3. Windows下虚拟机安装Mac OS X ----- VM12安装Mac OS X 10.11

    Windows下虚拟机安装Mac OS X -– VM12安装Mac OS X 10.11 随着Iphone在国内大行其道,越来越多的开发者涌入iOS开发大军 中,但都苦于没有苹果机,本文即将介绍WI ...

  4. Windows下memcache安装使用

    Windows下Memcache安装 随着时间的推移,网上现在能找到的在 Windows下安装 Memcache 的文档大多已经过时.雪峰这里再简要介绍一下当下最新版的安装和配置方法. Memcach ...

  5. Windows 下如何安装配置Snort视频教程

    Windows 下如何安装配置Snort视频教程: 第一步: http://www.tudou.com/programs/view/UUbIQCng360/ 第二部: http://www.tudou ...

  6. 在windows下完美安装GitHub

    笔者最近在Windows下安装GitHub,过程中遇到不少问题.现在把安装的详细步骤分享给大家,免得大家走弯路. 笔者安装了GitHub for Windows程序,一切都运行顺利.但事情没有结束,首 ...

  7. windows下Eclipse安装Perl插件教程

    windows下Eclipse安装Perl插件教程 想用eclipse编写perl.网上看了很多资料.但EPIC插件的下载连接都失效了.无奈,只好自己动手写个教程记录一下. 准备工作: 安装好Ecli ...

  8. Ruby入门--Linux/Windows下的安装、代码开发及Rails实战

    Ruby入门--Linux/Windows下的安装.代码开发及Rails实战 http://www.linuxidc.com/Linux/2014-04/100242.htm Ubuntu 13.04 ...

  9. mediawiki在windows下的安装

    mediawiki在windows下的安装 对于刚接触wiki的朋友们来说,配置一个服务器环境,安装并运行mediawiki是一件很麻烦的事情,在这里,我尽量用通俗易懂的语言,介绍mw(mediawi ...

随机推荐

  1. 欢迎加入.Net高级部落 173844862

    本群成立至今3年多,聚集了好多大牛级别的人物,欢迎高手前来指教,也欢迎小菜鸟进来学习.群成员热情开朗,有问必答.在这里聊聊技术,谈谈理想,不光技术会得到提高,也会收获一大帮志同道合的朋友,希望在未来的 ...

  2. MVC 路由

    1.ASP.NET MVC框架中提供的URL路由机制能够使URL不必映射到应用程序的特定物理文件. 2.当用户访问基于MVC模式创建的网站时,只需要在浏览器地址栏里输入类似于下面的URL: http: ...

  3. virtualenv 环境下 Nginx + Flask + Gunicorn+ Supervisor 搭建 Python Web

    在这篇文章里,我们将搭建一个简单的 Web 应用,在虚拟环境中基于 Flask 框架,用 Gunicorn 做 wsgi 容器,用 Supervisor 管理进程,然后使用 Python 探针来监测应 ...

  4. moment.js常用时间示例,时间管理

    '今天': moment() '昨天': moment().subtract(1, 'days') '过去7天':moment().subtract(7, 'days'),moment() '上月': ...

  5. Java使用BigDecimal计算保留位数不对问题定位

    在项目中使用BigDecimal计算将单位从B换成TB时,算出来的结果总是整数,而没有保留设置的2位小数: 计算代码如下: db.divide(oneTB, ROUND_HALF_UP).setSca ...

  6. spring @Autowired与@Resource的区别

    1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2.@Autowired默认按类型装配(这个注解是属业spring的),默认情况下必 ...

  7. 原生JS正则实现trim()

    Jquery中封装有trim() 原生需要自己实现,我们可以用原型的方式自己封装trim()方法,实现去掉前后空格.前空格.后空格...所以不必抱怨,简单又灵活,这才是强大的JS的特色 String. ...

  8. python入门以及接口自动化实践

    一.Python入门必备基础语法# 标识符:python中我们自己命名的都是标识符# 项目名 包名 模块名# 变量名 函数名 类名# 1:字母 下划线 数字组成 命名的时候不能以数字开头# 2:见名知 ...

  9. freecodecamp数字转化成罗马数字

    做数字转罗马数字时,用到了贪心算法,很好用,记录一下,有时间系统的学一下 罗马数字的规则: 罗马数字网址 1 5 10 50 100 500 1000 I V X L C D M1 1当一个符号在一个 ...

  10. What is a working set and how do I use it?

    //http://www.avajava.com/tutorials/lessons/what-is-a-working-set-and-how-do-i-use-it.html Working se ...