使用 CasperJS 对 Web 网站进行功能测试

CasperJS 包含一些非常有用的工具用来对 Web 网站进行功能性的测试，例如我们可以编写如下的 JavaScript 脚本来测试 Google 的搜索：

view source

print ?

01	var casper = require('casper').create();

02

03	casper.start('http://www.google.fr/', function() {

04	this.test.assertTitle('Google', 'google homepage title is the one expected');

05	this.test.assertExists('form[action="/search"]', 'main form is found');

06	this.fill('form[action="/search"]', {

07

q: 'foo'

08

}, true);

09

});

10

11	casper.then(function() {

12	this.test.assertTitle('foo - Recherche Google', 'google title is ok');

13	this.test.assertUrlMatch(/q=foo/, 'search term has been submitted');

14	this.test.assertEval(function() {

15	return __utils__.findAll('h3.r').length >= 10;

16	}, 'google search for "foo" retrieves 10 or more results');

17

});

18

19	casper.run(function() {

20	this.test.renderResults(true);

21

});

如你所见，casper.test 是 tester.Tester 对象实例的引用，用来对结果进行断言和输出。

tester.Tester API documentation 请看 dedicated section.

现在开始运行这个测试脚本：

view source

print ?

1	$ casperjs samples/googletest.js

下面是运行结果：

如果是断言失败，那可能就是下面这种结果：

将结果导出为 xUnit 格式

CasperJS 可以将测试结果导出为 xUnit 的 XML 格式，这样就可以方便的与一些持续集成工具如Jenkins 集成. 可以使用如下代码来保存：

view source

print ?

1	casper.run(function() {

2	this.test.renderResults(true, 0, 'log.xml');

3

});

还有一个更酷的方法就是通过 CLI 参数解析来增加选项：

view source

print ?

1	casper.run(function() {

2	this.test.renderResults(true, 0, this.cli.get('save') || false);

3

});

然后：

view source

print ?

1	$ casperjs test.js --save=log.xml

CasperJS tests

CasperJS 有它自己的单元测试和功能测试套件，在 tests 子目录中，要运行这个测试套件可以执行如下命令：

view source

print ?

1	$ cd /path/to/casperjs

2	$ casperjs test tests/suites

组织你的测试

将所有的测试写在一个文件里是一件很不爽的时间，你可以将这些测试用例分开独立存放。

但很重要的两点是：

1. 不要 在独立的测试文件里创建新的 Casper 实例

2. 测试结束后要调用 Tester.done() 方法

下面是第一个简单的测试文件：

view source

print ?

1	// file: /path/to/test/dir/test1.js

2

3	casper.test.comment('My first test file');

4	casper.test.assert(true, "true is so true");

5	casper.test.done(); // I must be called!

再来一个：

view source

print ?

01	// file: /path/to/test/dir/test2.js

02

03	casper.test.comment('This is my second test file, a bit more async');

04

05	casper.start('http://my.location.tld/', function() {

06	this.test.assertNot(false, "false is so false");

07

});

08

09	casper.run(function() {

10	this.test.done(); // I must be called once all the async stuff has been executed

11

});

标准的 Casper 累实例存储在一个名为 casper 变量中，你无需重复定义直接使用即可。

casperjs test 命令用来执行某个目录下的所有测试文件：

view source

print ?

1	$ casperjs test /path/to/test/dir/

理论上你将看到如下输出：

当然，你也可以执行某个单独的测试文件：

view source

print ?

1	$ casperjs test /path/to/test/dir/test1.js

casper test 命令还包含其他一些参数：

• --xunit=<filename> 用来导出测试结果到 xUnit XML 文件格式
• --direct 直接输出日志信息到控制台
• --log-level=<logLevel> 设置日志级别 (请看 related section)

扩展 Casper

$ casper test [path] 命令其实只是$ casper /path/to/casperjs/tests/run.js [path] 命令的更快捷的执行方式，因此，如果你需要对这个过程进行扩展，最好的方法是直接修改 run.js 这个文件。