使用CasperJS进行简单的UI测试

看到了一篇有关casperjs不错的文章&＃xff0c;转载到自己博客学习一下&＃xff1a;
摘要
无论你开发大或小的应用, 从安全来讲测试是一个很重要的组成部分.
但是如何可靠持续的测试, 尤其是当你的人员不能有效的测试应用的每一次改变? 所以呢,把这个工作交给软件是最合适的了.
这么多年来, 开发者开发了很多应用和技术来满足这个需求. 当然, 它们运行的非常好. 但是我们总是寻找更新的, 更简单的 (有时候是更’酷’的) 方式来做我们的工作. 所以最近我开始学习一种更有前途的新技术: PhantomJS.
—————————————————————————————
PhantomJS是什么?
PhantomJS 是一个无界面的,包含了WebKit浏览器引擎和Javascript API的脚本解释器. 速度快并且支持各种web标准: DOM 操作, CSS 选择器, JSON, Canvas 和SVG.
PhantomJS 的创建者是 Ariya Hidayat. 它是一个非常棒的技术,但是通过网站上的了解和所有的APIs文档, 我遇到了 CasperJS.
CasperJS是什么?
Casper 是一个用Javascript编写的基于PhantomJS的导航脚本和测试工具.它充许我们像PHPUnit或 JUnit一样测试我们的网站,测试我们的代码.
它是一个非常棒的工具 – 一是它是非常简单的,用Javascript编写,满足各种各样的测试需求,一是它可以方便的和我们的开发环境集成. 完美的组合前端和后端.
—————————————————————————————
在本篇文章中&＃xff0c;我将浏览一下CasperJS的基础用法。我将扮演一个典型的用户访问New Relic&＃xff08;新的遗址&＃xff09;网站的一页&＃xff0c;特别是‘真实用户监控’部分。
我之所以选择这一页是因为它有大量方面对一个标准网站或应用极为常见&＃xff0c;如图像&＃xff0c;表单&＃xff0c;按钮&＃xff0c;链接和文本。它内容丰富并且有许多东西可供我们处理与测试。现在&＃xff0c;我确信New Relic的勤快的伙计已经做过这些&＃xff0c;但我也非常相信他们不会介意我为这个网站建立一个简单的测试集和断言。
特征
CasperJS具有一系列特征。 本文中&＃xff0c;我会聚焦于 测试人员 API。它具有一些列功能与断言&＃xff0c;都是你期望一个好的测试API所具有的&＃xff0c;包括&＃xff1a;
* assertTextExists &＃xff08;文本存在断言&＃xff09;
* assertTitle &＃xff08;标题断言&＃xff09;
* assertHttpStatus &＃xff08;HTTP状态断言&＃xff09;
* assertDoesntExist &＃xff08;不存在断言&＃xff09;
* assertUrlMatch &＃xff08;Url匹配断言&＃xff09;

我将使用这些断言来显示CasperJS是如何工作的。它也包含一组其他特性&＃xff0c;但我不会去深入探讨——仅仅足够做一个工作示例而已。不过&＃xff0c;我鼓励你研究一下精彩的在线API文档。它阅读起来令人愉悦&＃xff0c;因为它相当清晰和简洁。
准备
如果你没有准备好&＃xff0c;在我们继续以前&＃xff0c;先安装 PhantomJS 或 Casper 。 现在&＃xff0c;让我们马上开始吧。
开始
当我第一次加载New Relic网站的’真实用户监控’页面&＃xff0c;看起来像下面图片这样&＃xff08;自撰写本文以后它已经变化了&＃xff09;。我突出了注册表格的起点。
&＃39;T-shirt Image exists&＃39;
);

对于上面的测试&＃xff0c;我断言穿着所展示T恤的男人的照片已载入。 最后一个测试断言某些文本存在&＃xff0c;在本情况中就是在穿着T恤的男人镜头上方的‘Sign up for free!’文本:

this.test.assertTextExists(&＃39;Sign up for free!&＃39;, &＃39;page body contains "Sign up for free!"&＃39;);

然后我们这样结束‘start’函数&＃xff1a;

casper.test.comment(&＃39;Ending Testing&＃39;);

测试基本完成了&＃xff0c;所以我输出另一个日志记录来让用户知道这一点&＃xff1a;

casper.run(function() {this.test.done(16);this.echo(&＃39;So the whole suite ended.&＃39;);require(&＃39;utils&＃39;).dump(casper.test.getFailures());require(&＃39;utils&＃39;).dump(casper.test.getPasses());this.exit();
});

我可以写出我想要的所有测试&＃xff0c;但若不调用“run”则什么都不会发生。所以“run”是揭开上述工作的序幕。我所做的是检查脚本是否已经运行了16个测试&＃xff0c;并且在最后用‘this.echo()’输出最后一行文字表示整个测试已结束。
当我们运行测试时&＃xff0c;有时得到最后结果的总结会挺好。用‘getFailures()’ 和 ‘getPasses()’函数&＃xff0c;我们可以看到测试通过和失败的总结。跟在这一切最后&＃xff0c;我调用“this.exit()”来清盘。这个可以退出CasperJS和PhantomJS&＃xff0c;如果需要&＃xff0c;可以指定一个退出编号。
把这个更进一步&＃xff0c;这一次我调用‘casperjs’略有不同&＃xff1a;我传递‘test’&＃xff0c;如下所示&＃xff0c;伴随着“xunit”开关。 这个将测试结果输出到一个 XUnit XML文件.

$ casperjs test mytest.js --xunit&＃61;log.xml

在CasperJS的下一个主要版本中&＃xff0c;如果‘test’没被传递到命令中&＃xff0c;你将无法运行和呈现测试。提前知道这个很重要&＃xff0c;可以避免你的脚本被意外打断。

转自&＃xff1a;http://www.oschina.net/translate/simpler-ui-testing-with-casperjs