用CasperJs自動瀏覽頁面(轉)

標籤：blog   http   io   ar   sp   for   strong   檔案   on   

內容轉自 http://blog.csdn.net/kiwi_coder/article/details/36248353

CasperJs是一個基於PhantomJs的工具，其比起PhantomJs可以更加方便的進行navigation。

 

一個最簡單的CasperJs代碼

建立一個檔案baidu.js，用來類比我們訪問百度頁面

var casper = require(‘casper‘).create();

casper.start(‘http://www.baidu.com/‘, function() {
   this.echo(this.getTitle());
});

casper.run();

 

運行：

casperjs baidu.js

得到輸出：

“百度一下，你就知道”

 

一個第二簡單的CasperJs代碼

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

casper.run();

 

完成以後，我們會在Console上得到一個title，同時我們也會得到在then中捕捉到的圖片baidu-homepage.jpg

 

一個第三簡單的CasperJs代碼

我們想辦法讓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‘);
});

casper.then(function() {
   this.fill(‘form[action="/s"]‘, { wd: ‘thoughtworks‘ }, true);//填入form，進行搜尋
});

casper.then(function() {
   this.capture(‘thoughtworks-search-results.png‘);
});

casper.run();

 

得到的thoughtworks-search-results.png：

 

 

 

怎麼引入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中

 

參考：http://docs.casperjs.org/en/latest/faq.html#can-i-use-jquery-with-casperjs

 

用CasperJs自動瀏覽頁面(轉)