簡介
Casperjs是一個基於PhantomJS和SlimerJS的前端端對端測試框架，當然你也可以使用它完成網絡爬蟲功能，它的特點的通過簡單的腳本模擬瀏覽器行為，
主要有casper、tester、mouse等六大模塊，其豐富的API為開發者減少了很多壓力。
安裝
casperjs的安裝很簡單，你可以通過npm或者下載casperjs包自行引用的方式安裝，毫無疑問其支持Mac、windows、linux。
-
npm全局安裝
npm install -g casperjs
-
Mac os推薦使用brew
$ brew update
$ brew install casperjs --devel
$ brew install casperjs
//更新casperjs
$ brew upgrade casperjs
-
察看版本
$ phantomjs --version
$ casperjs
使用
通過以上步驟成功安裝好casperjs后，可以運行以下腳本，對casperjs進行自檢，熟悉其功能
$ casperjs selftest
以一個簡單的百度圖片熱門榜的操作為例，簡單示意一下casperjs的基本用法
注意：以上代碼可以因為百度圖片的DOM變化而失效，讀者可以自己修改一下代碼中的選擇器
1.首先新建兩個文件index.js 和config.js
2.把以下代碼復制進index.js
var config = require('config');
var casper = require('casper').create();
//輸出配置
casper.echo('using config:');
casper.echo(JSON.stringify(config, null, '\t'));
//屏蔽google資源，你懂的
casper.on('resource.requested', function(requestData, request) {
if (/\/\/.*google[^\/]+/.test(requestData.url) || /cloud\.githubusercontent\.com/.test(requestData.url)) {
request.abort();
};
});
//輸出console頁面錯誤
casper.on('page.error', function(msg) {
this.echo('error message caught: ' + msg);
});
//設置瀏覽器超時時間和窗口大小
casper.options.waitTimeout = 10000;
casper.options.viewportSize = {
width: 1024,
height: 768
};
//生成一個數組
function Nums(len) {
var nums = [];
for (var i = 0; i < len; i++) {
nums.push(i);
}
return nums;
}
//記錄時間日期
var date = new Date();
var casperDate = date.toLocaleString().split(' ')[0];
//定義nums數組作為遍歷長度，suglineVal是熱門榜值，suglineLength是熱門榜長度
var nums,suglineVal, suglineLength;
var date =new Date();
//開始casper，輸出當前日期,並通過config文件讀取url
casper.echo(casperDate+'百度圖片熱門搜索圖片抓取');
casper.start(config.baseURL, function() {
//獲取熱門榜長度
suglineLength = this.evaluate(function() {
var csuglineLength = $('.sugline').length;
return csuglineLength;
});
//生成遍歷數組
nums = Nums(suglineLength);
//casper的each函數對每一條熱門搜索執行相同結果
this.each(nums, function(self, num) {
//then函數控制執行流程，獲取熱門榜的熱門搜索值，並賦予百度搜索框進行搜索
self.then(function() {
suglineVal = this.evaluate(function(num) {
//獲取熱門搜索值，選擇器隨時可能會改變，請參考運行時百度圖片首頁的DOM樹
var cSuglineVal = $('.sugline')[num].children[1].innerText;
//__utils__功能等同與jquery，方便在沒有引入jquery或者類似DOM查詢工具時使用。
__utils__.setFieldValue("input[id='kw']", cSuglineVal);
$('.s_btn')[0].click();
return cSuglineVal;
}, num);
});
//waitUntilVisible等待一個選擇器出現，等到imglist加載完成后進入
self.waitUntilVisible('.imglist', function() {
//capture函數對當前頁面進行截圖並保存在capture/images/...
this.capture('capture/images/'+casperDate+'/'+casperDate+'-' + suglineVal + '.png');
//在控制台輸出熱門圖片
this.echo(suglineVal);
});
});
});
//運行casper腳本start
casper.run();
3.把以下代碼復制進config.js
'use strict'
//casper讀取系統信息的模塊
var system = require('system');
//讀取環境變量
var env = system.env.TEST_ENV || 'test'
var config = {};
//其實上面沒什么用，主要配置看這里
config.test = {
baseURL: 'http://image.baidu.com/',
imageURL: 'capture/',
}
module.exports = config[env]
4.在控制台中執行,如果出現casperjs不是內部命令，請確保全局安裝casperjs，確保環境變量正確。
casperjs index.js
結果
1.控制台輸出如下
2.查看images文件夾成功截取圖片
分析
通過使用casperjs,我們只寫了不到100行代碼就成功抓取了百度8月14日的熱門圖片，看到了每天發生的大新聞。在這個小demo中，我們使用了casperjs的最主要的casper模塊進行網頁抓取流程控制、clientutils模塊簡化DOM查詢,其還有我們沒有用到的mouse模塊，控制輸出顏色的colorizer模塊，專門用於測試的tester模塊，和一些常用處理函數集成的utils模塊，相信大家在自己學習了官網的API后，能夠創造出更有意思的東西，這個小demo雖然說可能抓取速度不是很快，但是還是基本完成了我們的需求，如果有任何問題和建議都可以留言給我。