Casperjs初體驗

Casperjs是一個基於PhantomJS和SlimerJS的前端端對端測試框架，當然你也可以使用它完成網絡爬蟲功能，它的特點的通過簡單的腳本模擬瀏覽器行為。

安裝

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文件夾成功截取圖片