CasperJs 是一个基于 PhantomJs 的工具,其比起 PhantomJs 可以更加方便的进行 navigation。

1、安装

CasperJS 依赖于 PhantomJS >= 1.3,强烈建议使用 PhantomJS1.5 版本,PhantomJS 的安装非常简单,下载后解压就可以使用,或者直接使用 npm 安装。

安装 phantomjs 环境

$ npm install -g phantomjs

接下来,我们安装 CasperJS:

$ npm install -g casperjs

安装 CasperJS 必须确保在 Python 环境下,Python下载之后直接安装即可。

确认环境是否安装成功:

$ phantomjs --version
$ python --version
$ casperjs --version
2、一个简单的 CasperJS 代码

创建一个文件 baidu.js,用来模拟我们访问百度页面

var casper = require('casper').create();
casper.start('http://www.baidu.com/', function() {
this.echo(this.getTitle());
}); casper.run();

运行:

$ casperjs baidu.js

得到输出结果:

"百度一下,你就知道"
3、casper 的串联执行和生成网页图片

CasperJS 的执行脚本是由一个一个的 Step 串联起来的,start 表示第一步,然后后面的 step 用 then 来表示,再依次执行:

var casper = require('casper').create();
casper.start('http://www.baidu.com/', function() {
this.echo(this.getTitle());
}); casper.then(function() {
this.capture('baidu-homepage.png'); // 生成一个png图片
}); casper.run();

完成以后,我们会在 Console 上得到一个 title,同时我们也会得到在 then 中捕捉到的图片 baidu-homepage.png。

4、form提交,进行搜索

我们想办法让 CasperJS 完成搜索功能

var casper = require('casper').create();
casper.start('http://www.baidu.com/', function() {
this.echo(this.getTitle());
}); casper.then(function() {
this.capture('baidu-homepage.png'); // 生成一个png图片
}); casper.then(function() {
this.fill('form[action="/s"]', { wd: 'thoughtworks' }, true);//填入form,进行搜索
}); casper.then(function() {
this.capture('thoughtworks-search-results.png');
}); casper.run();

5、如何引入 jQuery,并且进行数据输出保存

有时候,需要引入一些第三方插件来方便操作,例如:jQuery

var casper = require('casper').create({
clientScripts: ["jquery.js"]
}); casper.start('http://www.baidu.com/', function() {
this.echo(this.getTitle());
}); casper.then(function() {
this.fill('form[action="/s"]', { wd: 'thoughtworks' }, true);
}); casper.then(function() {
search_result_titles = this.evaluate(getTitles)
this.echo(search_result_titles.join('\n'))
}); function getTitles() {
var titles = $.map($("h3.t a"), function(link) {
return $(link).text()
});
return titles
} casper.run();

返回结果:

thoughtworks_百度百科
成都Thoughtworks-招聘专员--地点:成都招聘信息|ThoughtWorks招聘...
敏捷开发和体验设计 | ThoughtWorks
thoughtworks基本情况及待遇 【懦夫救星_职场古拳法】
和Thoughtworks的一次邂逅(一) - redhat - ITeye技术网站
thoughtworks笔试整理zz_ThoughtWorks招聘经验
关于我们 | ThoughtWorks
ThoughtWorks位列面试难度最高的科技公司之首_百度文库
透明的相册-ThoughtWorks西安办公室
思特沃克软件技术(西安)有限公司ThoughtWorks Software ...

需要注意的地方:

1)create casper 的时候,我们 inject 了jquery,这个 jquery 必须是保存在本地的,通过 HTTP 访问是无效的。

2)this.evaluate(getTitles) 可以理解成,我们在 CasperJs 中,将 getTitles 这个方法注入到了访问的页面中,在访问的页面中执行这个方法并反问其返回值。

3)访问页面log的获取:2)中讲到了getTitles其实是在被访问页面中执行的,如果我们在getTitles加入一段console.log的代码话,怎么能够得到被访问页面的console信息呢?

casper.then(function() {
this.page.onConsoleMessage = function(e) {
console.log(e);
}
search_result_titles = this.evaluate(getTitles)
this.echo(search_result_titles.join('\n'))
})

这样就可以侦听被访问页面的console.log事件,比导出到CasperJs中

完整案例

// 创建 casper 实例
var casper = require('casper').create({
verbose: true,
logLevel: 'info',
onError: function(self, msg) {
this.capture('error.png');
console.log('error: ' + msg);
self.exit();
},
pageSettings: {
loadImages: false, // 不加载图片,为了速度更快
loadPlugins: false
},
verbose: true
// clientScript: ['jquery.js']
});
phantom.outputEncoding = "utf-8"; //解决中文乱码 /* 打开首页 */
casper.start('https://web.yd.sdy.ppmoney.com/', function() {
this.echo(this.getTitle());
this.echo(this.getCurrentUrl());
});
/* 点击登录按钮,去到登录页 */
casper.then(function() {
this.click('a[title="登录"]');
this.waitForSelector('form[action="/login/"]');
}); /* 输入登录表单 */
casper.then(function() {
this.fill('form[action="/login/"]', {
Phone: '15710376688',
Password: '12345678'
}, true);
});
/* 提交表单,登录 */
casper.then(function() {
this.click('button[id="sendLogin"]');
}); casper.wait(3000); //等待三秒,预防未登录。 /* 充值 */
casper.then(function() {
this.echo(this.getTitle());
this.clickLabel('充值', 'a'); console.log(1234); this.waitForSelector('input[id="monetary"]');
}); /* 设置充值金额 */
casper.then(function(){
this.echo(this.getTitle()); this.evaluate(function() {
document.getElementById("monetary").value = 100;
$("#btnRecharge").attr("class", "pp-btn pp-btn-lg btn-recharge");
}); this.wait(2000, function() {
this.click('input[id="btnRecharge"]');
}); this.capture('recharge.png');
this.waitForSelector('input[id="password"]');
}); /* 设置购买金额 */
casper.then(function() {
this.echo(this.getTitle()); this.evaluate(function() {
document.getElementById("password").value = "12345678";
}); this.echo("充值金额: 1000元.");
}); casper.then(function() {
this.click('input[id="nextButton"]');
this.wait(10000, function() {
this.capture("recharge.png");
});
}); casper.on('remote.message', function(msg) {
this.log(msg, 'info');
}); casper.run(function(){
this.echo('测试运行完成...', 'INFO').exit();
});
 

CasperJs 入门介绍的更多相关文章

  1. [Python爬虫] 在Windows下安装PhantomJS和CasperJS及入门介绍(上)

    最近在使用Python爬取网页内容时,总是遇到JS临时加载.动态获取网页信息的困难.例如爬取CSDN下载资源评论.搜狐图片中的“原图”等,此时尝试学习Phantomjs和CasperJS来解决这个问题 ...

  2. C# BackgroundWorker组件学习入门介绍

    C# BackgroundWorker组件学习入门介绍 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能 ...

  3. 初识Hadoop入门介绍

    初识hadoop入门介绍 Hadoop一直是我想学习的技术,正巧最近项目组要做电子商城,我就开始研究Hadoop,虽然最后鉴定Hadoop不适用我们的项目,但是我会继续研究下去,技多不压身. < ...

  4. [Python爬虫] scrapy爬虫系列 <一>.安装及入门介绍

    前面介绍了很多Selenium基于自动测试的Python爬虫程序,主要利用它的xpath语句,通过分析网页DOM树结构进行爬取内容,同时可以结合Phantomjs模拟浏览器进行鼠标或键盘操作.但是,更 ...

  5. JavaScript入门介绍(二)

    JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...

  6. JavaScript入门介绍(一)

    JavaScript入门介绍 [经常使用的调试工具][w3school.com.cn在线编辑] [Chrome浏览器 开发调试工具]按F121.代码后台输出调试:console.log("t ...

  7. .NET 4 并行(多核)编程系列之一入门介绍

    .NET 4 并行(多核)编程系列之一入门介绍 本系列文章将会对.NET 4中的并行编程技术(也称之为多核编程技术)以及应用作全面的介绍. 本篇文章的议题如下:  1. 并行编程和多线程编程的区别.  ...

  8. .NET读写Excel工具Spire.Xls使用(1)入门介绍

    原文:[原创].NET读写Excel工具Spire.Xls使用(1)入门介绍 在.NET平台,操作Excel文件是一个非常常用的需求,目前比较常规的方法有以下几种: 1.Office Com组件的方式 ...

  9. Linux入门介绍

    Linux入门介绍 一.Linux 初步介绍 Linux的优点 免费的,开源的 支持多线程,多用户 安全性好 对内存和文件管理优越 系统稳定 消耗资源少 Linux的缺点 操作相对困难 一些专业软件以 ...

随机推荐

  1. js 设置日期函数

    前三十天: var now = new Date(); var prev = now.setDate( now.getDate() - 30 ) vm.sDate = comm.getFormatDa ...

  2. 关于socket绑定INADDR_ANY

    其中INADDR_ANY就是指定地址为0.0.0.0的地址,这个地址事实上表示不确定地址,或“所有地址”.“任意地址”. 一般情况下,如果你要建立网络服务器,则你要通知服务器操作系统:请在某地址 xx ...

  3. iOS开发之谓词Predicate和对象数组的排序

    我们在开发中经常使用的Predicate谓词,主要是正则表达式的使用,今天给大家简单的讲讲怎样去使用谓词. 因为内容比较简单,所以直接上代码展示: NSMutableArray *people_arr ...

  4. Java8新特性Optional、接口中的默认方法与静态方法

    Optional Optional 类(java.util.Optional) 是一个容器类,代表一个值存在或不存在,原来用 null 表示一个值不存在,现在 Optional 可以更好的表达这个概念 ...

  5. 简单实用的跨域表单POST提交

    我们这里使用了iframe嵌套form表单POST提交,很简单,却能满足get|post等任何复杂情况的要求:缺点是没有返回值. 针对需要的地方加上一个iframe嵌套并塞入隐藏form表单,然后获取 ...

  6. Elasticsearch安装 + Head插件安装 + Bigdesk插件安装

    一.Elasticsearch安装 1.官网下载zip包:https://www.elastic.co/downloads/elasticsearch 2.解压到自己指定的文件夹 3.运行\bin\e ...

  7. BZOJ - 5427:最长上升子序列 (二分&思维)

    现在给你一个长度为n的整数序列,其中有一些数已经模糊不清了,现在请你任意确定这些整数的值, 使得最长上升子序列最长.(为何最长呢?因为hxy向来对自己的rp很有信心)   Input 第一行一个正整数 ...

  8. SOA的挑战:实体集合【转】

    SOA的挑战:实体集合 发布日期 : 2005-11-06 |  更新日期 : 2005-11-06 Ramkumar Kothandaraman 微软公司 适用于: Microsoft® Visua ...

  9. LeetCode Degree of an Array

    原题链接在这里:https://leetcode.com/problems/degree-of-an-array/description/ 题目: Given a non-empty array of ...

  10. fft蝶形算法的特点