CasperJs 是一個(gè)基于 PhantomJs 的工具仓手，其比起 PhantomJs 可以更加方便的進(jìn)行 navigation。
1、安裝
CasperJS 依賴于 PhantomJS >= 1.3，強(qiáng)烈建議使用 PhantomJS1.5 版本菩咨，PhantomJS 的安裝非常簡(jiǎn)單，下載后解壓就可以使用陡厘，或者直接使用 npm 安裝抽米。
安裝 phantomjs 環(huán)境
$ npm install -g phantomjs
接下來(lái)，我們安裝 CasperJS：
$ npm install -g casperjs
安裝 CasperJS 必須確保在 Python 環(huán)境下雏亚，Python下載之后直接安裝即可缨硝。
確認(rèn)環(huán)境是否安裝成功：
$ phantomjs --version
$ python --version
$ casperjs --version
2摩钙、一個(gè)簡(jiǎn)單的 CasperJS 代碼
創(chuàng)建一個(gè)文件 baidu.js，用來(lái)模擬我們?cè)L問百度頁(yè)面
var casper = require('casper').create();
casper.start('http://www.baidu.com/', function() {
this.echo(this.getTitle());
});
casper.run();
運(yùn)行:
$ casperjs baidu.js
得到輸出結(jié)果：
"百度一下，你就知道"
3与斤、casper 的串聯(lián)執(zhí)行和生成網(wǎng)頁(yè)圖片
CasperJS 的執(zhí)行腳本是由一個(gè)一個(gè)的 Step 串聯(lián)起來(lái)的，start 表示第一步宜岛，然后后面的 step 用 then 來(lái)表示，再依次執(zhí)行：
var casper = require('casper').create();
casper.start('http://www.baidu.com/', function() {
this.echo(this.getTitle());
});
casper.then(function() {
this.capture('baidu-homepage.png'); // 生成一個(gè)png圖片
});
casper.run();
完成以后功舀，我們會(huì)在 Console 上得到一個(gè) title萍倡，同時(shí)我們也會(huì)得到在 then 中捕捉到的圖片 baidu-homepage.png。
4辟汰、form提交列敲，進(jìn)行搜索
我們想辦法讓 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'); // 生成一個(gè)png圖片
});
casper.then(function() {
this.fill('form[action="/s"]', { wd: 'thoughtworks' }, true);//填入form，進(jìn)行搜索
});
casper.then(function() {
this.capture('thoughtworks-search-results.png');
});
casper.run();
5帖汞、如何引入 jQuery戴而，并且進(jìn)行數(shù)據(jù)輸出保存
有時(shí)候，需要引入一些第三方插件來(lái)方便操作翩蘸，例如：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();
返回結(jié)果：
thoughtworks_百度百科
成都Thoughtworks-招聘專員--地點(diǎn):成都招聘信息|ThoughtWorks招聘...
敏捷開發(fā)和體驗(yàn)設(shè)計(jì) | ThoughtWorks
thoughtworks基本情況及待遇 【懦夫救星_職場(chǎng)古拳法】
和Thoughtworks的一次邂逅(一) - redhat - ITeye技術(shù)網(wǎng)站
thoughtworks筆試整理zz_ThoughtWorks招聘經(jīng)驗(yàn)
關(guān)于我們 | ThoughtWorks
ThoughtWorks位列面試難度最高的科技公司之首_百度文庫(kù)
透明的相冊(cè)-ThoughtWorks西安辦公室
思特沃克軟件技術(shù)(西安)有限公司ThoughtWorks Software ...
需要注意的地方：
1）create casper 的時(shí)候所意，我們 inject 了jquery，這個(gè) jquery 必須是保存在本地的催首，通過(guò) HTTP 訪問是無(wú)效的扶踊。
2）this.evaluate(getTitles) 可以理解成，我們?cè)?CasperJs 中郎任，將 getTitles 這個(gè)方法注入到了訪問的頁(yè)面中秧耗，在訪問的頁(yè)面中執(zhí)行這個(gè)方法并反問其返回值。
3）訪問頁(yè)面log的獲壤缘巍：2）中講到了getTitles其實(shí)是在被訪問頁(yè)面中執(zhí)行的绣版，如果我們?cè)趃etTitles加入一段console.log的代碼話，怎么能夠得到被訪問頁(yè)面的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'))
})
這樣就可以偵聽被訪問頁(yè)面的console.log事件杂抽，比導(dǎo)出到CasperJs中
完整案例
( 本人公司內(nèi)網(wǎng)才能訪問，各位同學(xué)可以隨意模擬一個(gè)網(wǎng)站)
// 創(chuàng)建 casper 實(shí)例
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"; //解決中文亂碼
/* 打開首頁(yè) */
casper.start('https://web.yd.sdy.ppmoney.com/', function() {
this.echo(this.getTitle());
this.echo(this.getCurrentUrl());
});
/* 點(diǎn)擊登錄按鈕缩麸，去到登錄頁(yè) */
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); //等待三秒赡矢，預(yù)防未登錄杭朱。
/* 充值 */
casper.then(function() {
this.echo(this.getTitle());
this.clickLabel('充值', 'a');
console.log(1234);
this.waitForSelector('input[id="monetary"]');
});
/* 設(shè)置充值金額 */
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"]');
});
/* 設(shè)置購(gòu)買金額 */
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('測(cè)試運(yùn)行完成...', 'INFO').exit();
});
