casperjs的环境搭建及简单使用

灰太狼 2022-07-14 07:26 250阅读 0赞

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

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

*   *  环境搭建
        
         *  下载
         *  解压后配置环境变量
         *  测试是否搭建完成
     *  简单使用
        
         *  选择一个喜欢的js编辑器
         *  查看casperjs的api说明
         *  运行某js文件
         *  常用的几个小知识点
     *  小案例打开百度主页然后搜索信息

--------------------

## 环境搭建 ##

### 1 下载 ###

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

### 2 解压后配置环境变量 ###

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

### 3 测试是否搭建完成 ###

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

![这里写图片描述][20161202091327020]

--------------------

## 简单使用 ##

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

我用的是everEdit

### 2 查看casperjs的api说明 ###

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

### 3 运行某js文件 ###

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

casperjs a.js

### 4 常用的几个小知识点 ###

①代码框架

--------------------

②网页截图

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

--------------------

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

[http_download.csdn.net_detail_zhengyikuangge_9699445]: http://download.csdn.net/detail/zhengyikuangge/9699445
[20161202091327020]: /images/20220714/b8a9cbdbd7bb4b7892c4b665f688d2f3.png