casperjs的环境搭建及简单使用

在我看来，casperjs和phantomjs的关系就如同java与C语言的关系一样。正好我对casperjs感觉更好用，所以直接就学了casperjs。在casperjs中会用到phantomjs，所以需要都有环境。

因为需要完成老师布置的作业，所以从casperjs开始入手学习

---

环境搭建

1 下载

①可以到官网上下载，在百度上直接搜casperjs、phantomjs即可
②我上传到csdn资源的下载地址：
http://download.csdn.net/detail/zhengyikuangge/9699445

2 解压后配置环境变量

在环境变量下的Path后面添加两个新变量，路径到相应工具的bin目录下
例如我的casperjs环境变量路径为
E:\a_js\casperjs-1.1.3\bin

3 测试是否搭建完成

进入命令行 输入casperjs –version (注意这里是两个-)

---

简单使用

1 选择一个喜欢的js编辑器

我用的是everEdit

2 查看casperjs的api说明

可以百度直接搜“casperjs api”即可

3 运行某js文件

命令行——cmd到js的目录下——在命令行上输入casperjs + js文件名
例如

casperjs a.js

4 常用的几个小知识点

①代码框架

var casper = require('casper').create(); 
var fs =  require('fs');        
phantom.outputEncoding="GBK";
var url = 'http://www.baidu.com';
//设置开始执行的url和方法（第一步执行）
casper.start(url, function () {   

});   

//设置第二步执行方法  
casper.then(function () {   


});   
//设置第三步执行方法    
casper.then(function () {   

});   
...
//设置第N步执行方法
casper.then(function () {   

});

//开始执行
casper.run();

---

②网页截图

this.capture("1.png");//获取当前网页截图，放到当前目录

③获取网页标题

var t = this.getTitle();//获取当前页面的标题

④输出到命令行

this.echo("");//输出到命令行

⑤填写表单

this.fill('form[id="form"]', {  
        "wd": "123" //from中标签的name  
}, false);
//这个需要到具体页面去找id或name
//form为表单的id
//wd是form中input的name

⑥点击按钮

this.click('input[id="su"]');
//这个需要结合具体页面，这里是点击id为su的按钮

⑦等待执行

 this.wait(3000, function () {   

    }); 
 //延迟三秒执行方法

⑧给不在form中的input赋值

this.sendKeys('input#login_user', 'zwq');

⑨模拟鼠标点击

this.mouse.click(".btn");

---

小案例（打开百度主页然后搜索信息）

var casper = require('casper').create(); 
var fs =  require('fs');        // 引入 fs 模块，这是 PhantomJS的模块
phantom.outputEncoding="GBK";
var url = 'http://www.baidu.com';
casper.start(url, function () {   
    //this.capture("1.png");   
    this.echo("启动程序...."); 
    this.capture("1.png");   
    var t = this.getTitle();    // 获取网页标题
    this.echo(t);       // 输出到命令窗口  
});   

//输入要查询的数据   
casper.then(function () {   
    this.fill('form[id="form"]', {  
        "wd": "123" //from中标签的name  

    }, false);   
    this.capture("2.png"); 
    this.echo("等待点击查询按钮");   

});   

casper.then(function () {   
    this.click('input[id="su"]');  

    this.echo("已经点击查询按钮, 跳转等待.....");   
    this.wait(3000, function () {   
        this.echo(this.getTitle());   
        this.capture("3.png");   
        this.echo("查询成功");   
    });   
});   
casper.run();