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(); });

轉載于:https://www.cnblogs.com/shiluoliming/p/8350893.html

總結

以上是生活随笔為你收集整理的CasperJs 入门介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。