casperjs学习入门记录

前言

工作需要，要对网站某些页面的某些元素进行验证，算是回归测试吧，所以用到了casperjs。写这篇文章的目的是记录一下入门过程和其中的理解，以便以后再次用到或者其他读者（casperjs新手）作参考。

使用casperjs

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

casper.start('http://google.com/', function() {
    this.echo(this.getTitle(), 'INFO');
});

casper.run();

首先建立casperjs实例：

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

create()方法创建并返回了一个casper类的实例。

调用start函数“启动”casper：

casper.start('http://google.com/', function() {
    this.echo(this.getTitle(), 'INFO');
});

最后需要调用一下run函数：

casper.run();

用casperjs写测试

casper.test.begin('Testing Google', 1, function(test){
    casper.start('http//:google.com');

    casper.then(function(){
        test.assertTitle('Google', 'Google has correct title');
    });

    capser.run(function(){
        test.done();
    })
});

一行一行说明。

这个文件中就这么几行代码，注意到casper实例并没有创建，那么测试怎么进行的呢？

这是casperjs中的test框架的小福利吧，利用test框架并不需要我们手工建立casper实例，框架已经做了。

直接调用begin方法就开始工作了，begin方法有三个参数：1）测试名字，这个自己给定；2）回调函数中测试方法的个数；3）回调函数，回调函数中定义了所有的测试业务。

这里使用casper.start()方法开始一个测试套件，

接下来使用then方法开始一个测试，执行测试方法assertTitle（）；

在run()方法中使用回调函数执行test.done()告诉casperjs已经完成运行。

填写表单

一个函数搞定填写并提交表单：

casper.fill('form#signInForm', {
    'username' : 'santa',
    'password' : 'presents'
}, true);

第一个参数是css选择器；第二个是一个字典类型的数据结构，用来填写表单；第三个指出是否提交表单。如果第三个参数是false，那么时候我们需要调用click函数收到提交表单。

下面是一个完整的用来测试表单提交的代码：

casper.test.begin('Sign In Santa', 1, function(test){
    casper.start('http://localhost:3000/');

    casper.wait(500, function(){
        this.fill('form#signInForm', {
            'username' : 'santa',
            'password' : 'xmas'

        }, false);
    });

    casper.then(function(){
        this.click(".signInBtn");
    });

    casper.wait(500, function(){
        test.assertUrlMatch(this.getCurrentUrl(), 'http://localhost:3000/#user/santa');
    });

    casper.run(function(){
        test.done();
    });
});

完了！