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問(wèn)百度頁(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-招聘專(zhuān)員--地點(diǎn):成都招聘信息|ThoughtWorks招聘... 敏捷開(kāi)發(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èn)是無(wú)效的。

2）this.evaluate(getTitles) 可以理解成，我們?cè)?CasperJs 中，將 getTitles 這個(gè)方法注入到了訪問(wèn)的頁(yè)面中，在訪問(wèn)的頁(yè)面中執(zhí)行這個(gè)方法并反問(wèn)其返回值。

3）訪問(wèn)頁(yè)面log的獲取：2）中講到了getTitles其實(shí)是在被訪問(wèn)頁(yè)面中執(zhí)行的，如果我們?cè)趃etTitles加入一段console.log的代碼話，怎么能夠得到被訪問(wèn)頁(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')) })

這樣就可以偵聽(tīng)被訪問(wèn)頁(yè)面的console.log事件，比導(dǎo)出到CasperJs中

完整案例

?

// 創(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"; //解決中文亂碼 /* 打開(kāi)首頁(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)買(mǎi)金額 */ 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(); });

轉(zhuǎn)載于:https://www.cnblogs.com/shiluoliming/p/8350893.html

總結(jié)

以上是生活随笔為你收集整理的CasperJs 入门介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。