51dev.com IT技术开发者社区

51dev.com 技术开发者社区

casperjs的环境搭建及简单使用

IT猿阅读(35)2019-10-30 收藏0次评论

在我看来,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_jscasperjs-1.1.3in

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(); 

 

以上就是casperjs的环境搭建及简单使用的全部内容。

相关内容