基于Casperjs的网页抓取技术【抓取豆瓣信息网络爬虫实战示例】

CasperJS is a navigation scripting & testing utility for the PhantomJS (WebKit) and SlimerJS (Gecko) headless browsers, written in Javascript.

PhantomJS是基于WebKit内核的headless browser

SlimerJS则是基于Gecko内核的headless browser

Headless browser： *面显示的浏览器，可以用于自动化测试，网页截图，JS注入，DOM操作等等方面，是一种非常新型的web应用工具。虽然这种浏览器没有任何界面输出，但在很多方面都可以有非常广泛的应用。整篇文章将会介绍使用Casperjs进行网页抓取（网络爬虫）的应用，本文仅仅是起到一个抛砖引玉的作用，实际上headless browser技术的应用会非常广泛，甚至又可能深刻影响web前后端技术的发展。

本文用一个著名的网站【豆瓣网】“开刀”（仅仅是研究学习使用，希望该站不要找我麻烦）,来试验一下强大的Headless Browser网页抓取技术的强悍。

第一步，安装Casperjs 打开CasperJS的官网http://casperjs.org/，下载最新稳定版本的CasperJS并安装，官网有非常详细的文档，是学习CasperJS最好的第一手材料。当然了，如果安装了npm，也可以直接通过npm安装。同时，这也是官方推荐的安装方法。关于安装就不多介绍了，官方文档介绍得非常详细。

 npm install casperjs
 node_modules/casperjs/bin/casperjs selftest

第二步，分析目标网站的列表页的网页结构 通常内容类网站都是分成列表页面和详细内容页面。豆瓣网也不例外，我们先来看看豆瓣的列表页长什么样。分析以后发现豆瓣电影网的列表页是这样的，首先可以点排序的规则，翻页不是像传统的网站通过页码来翻页，而是点击最后面的加载更多，这样的网页，传统的爬虫程序往往就歇菜了，或者实现起来非常复杂。但是对于headless browser技术，这个都是小Case。通过分析网页就可以看到点击这个【加载更多】这个位置就能够不断得显示跟多影片信息。

第三步，开始写代码获取影片详情页的链接信息 我们就不客气了，模拟点击这个地方，收集超链列表, 下面的代码就是获取链接的代码。引用并创建casperJS对象，如果网页需要插入脚本可以在casper对象生成的时候在ClientScript部分引用要注入网页的脚本，为了加快网页的加载速度，我们禁止下载图片和插件：

  pageSettings: {
         loadImages:  false,        // The WebPage instance used by Casper will
         loadPlugins: false         // use these settings
     },

）
完整的获取详情页链接的代码，这里模拟点击【加载更多】并循环50次。其实循环可以进行改进，【判断 while（没有”加载更多”） then（ stop）】，获得后用require('utils').dump(….)输出链接列表。保存下面的代码为getDoubanList.js, 然后运行 casperjs getDoubanList.js 就能够获得并输出该分类下所有的详情页链接。

 1 phantom.outputEncoding="uft8";
    var casper = require('casper').create({
        // clientScripts:  [
        //     'includes/jquery.js',      // These two scripts will be injected in remote
        //     'includes/underscore.js'   // DOM on every request
        // ],
        pageSettings: {
            loadImages:  false,        // The WebPage instance used by Casper will
            loadPlugins: false         // use these settings
       },
       logLevel: "info",              // Only "info" level messages will be logged
       verbose: false                  // log messages will be printed out to the console
   });

   casper.start("https://movie.douban.com/explore#!type=movie&tag=%E7%BB%8F%E5%85%B8&sort=recommend&page_limit=20&page_start=0", function () {
       this.capture("1.png");
   });

   casper.then(function () {
       this.click("a.more",10,10);
       var i = 0;
       do
       {
        i ++;
        casper.waitForText('加载更多', function() {
        this.click("a.more",10,10);//this.capture("2.png");   // read data from popup
       });
       }
       while (i<50);
   });

   casper.then(function () {
   require('utils').dump(this.getElementsAttribute('div.list-wp div.list a.item', 'href'));
   'href')));
   });
  casper.waitForText('加载更多', function() {
 this.capture("3.png");   // read data from popup
   });
   casper.run();

GetDoubanList.js

我使用了Nodejs来调用casperjs（用其他的语言比如Python，Java调用也是可以的，CasperJS并不是一个完整的系统，所以多线程，文本处理，数据库还是需要依赖其他的语言或者工具），并把结果输出到文件里保存，当然把结果放到数据库里也没有问题，但是这里为了简化，就不展开了（实际的应用中我是用的MongoDB）。Nosql数据库非常适合存放抓取下来的非结构化数据存储。

   //var fs = require("fs");
   //var S = require("string");
   var url = 'mongodb://localhost:27017/test';
   //var trim = require('trim.js');
   //include recode url module
    var record = require('./RecordUrl');

    ///Program running block/////////////////////////////////////////////////////////////////////
   const spawn = require('child_process').spawn;
   const urllist = spawn('casperjs', ['casper3_more.js']);
   var strUrls = "";

   urllist.stdout.on('data', (data) => {
     console.log(data.toString());
     strUrls = strUrls + data.toString();

   });

   urllist.stderr.on('data', (data) => {
     console.log(data);
   });

   urllist.on('exit', (code) => {
     console.log(`Child exited with code ${code}`);
     var urlData = JSON.parse(strUrls);
   	var content2 = "";
   	for(var key in urlData){
   		if (content2 != "") {
   	           content2 =  content2 + "\r\n" + urlData[key];
   	        }
   	    else {
   	       		content2 = urlData[key];
   	    	}
   	}
   	var recordurl = new record.RecordAllUrl();
   	recordurl.RecordUrlInText(content2);
   	console.log(content2);
   });
 

GetAllUrls

引用的RecordUrl模块，存MongoDB这一部分没有写，大家可以自行完成。

 exports.RecordAllUrl = RecordUrl;
 var fs = require('fs');
 function RecordUrl() {
 	var file = "d:/urllog.txt";
 	var RecordUrlInFile = function(theurl) {

 	    fs.appendFile(file, theurl, function(err){
 	        if(err)
 	            console.log("fail " + err);
 	        else
 	            console.log("写入文件ok");
 	    });
 	};
 	var RecordUrlInMongo = function() {
 		console.log('Hello ' + name);
 	};
 	 return {
         RecordUrlInDB: RecordUrlInMongo,
         RecordUrlInText: RecordUrlInFile
     } ;
 };

RecordUrl

第四步，分析详情页面并编写详情页面抓取程序

到这一步大家就已经获得了要抓取的详情页面的列表了，现在我们打开一个电影详情页来看看结构如何，分析下各个信息如何抓取。对于信息的抓取必须要综合使用DOM，文本处理和JS脚本等技术。我想获得这部分的信息，包括导演，编剧，评分等等。在本文就不重复了，这里仅抽取几个信息项例子演示。

1. 抓取导演列表：导演列表的DOM CSS selector  'div#info span:nth-child(1) span.attrs a' ， 我们使用了function getTextContent(strRule, strMesg)  这个方法去抓取内容。

 phantom.outputEncoding="GBK";
 var S = require("string");
 var casper = require('casper').create({
     clientScripts:  [
         'includes/jquery.js',      // These two scripts will be injected in remote
         'includes/underscore.js'   // DOM on every request
     ],
     pageSettings: {
         loadImages:  false,        // The WebPage instance used by Casper will
         loadPlugins: false         // use these settings
     },
     logLevel: "info",              // Only "info" level messages will be logged
     verbose: false                  // log messages will be printed out to the console
 });

 //casper.echo(casper.cli.get(0));
 var fetchUrl='https://movie.douban.com/subject/25662329/', fetchNumber;
 if(casper.cli.has('url'))
 	fetchUrl = casper.cli.get('url');
 else if(casper.cli.has('number'))
 	fetchNumber = casper.cli.get('number');
 casper.echo(fetchUrl);

 casper.start(fetchUrl, function () {
     this.capture("1.png");
     //this.echo("启动程序....");
     //this.echo(this.getHTML('div#info span:nth-child(3) a'));
     //this.echo(this.fetchText('div#info span:nth-child(1) a')); 

     //抓取导演
     getTextContent('div#info span:nth-child(1) span.attrs a','抓取导演');

 });

 //get the text content of tag
 function getTextContent(strRule, strMesg)
 {
 	//给evaluate传入参数
 	var textinfo = casper.evaluate(function(rule) {
     	var valArr = '';
     $(rule).each(function(index,item){
     valArr = valArr + $(this).text() + ',';
       });
     return valArr.substring(0,valArr.length-1);
 	}, strRule);
     casper.echo(strMesg);
     require('utils').dump(textinfo.split(','));
     return textinfo.split(',');
 };

 //get the attribute content of tag
 function getAttrContent(strRule, strMesg, Attr)
 {
 	//给evaluate传入参数
 	var textinfo = casper.evaluate(function(rule, attrname) {
     	var valArr = '';
     $(rule).each(function(index,item){
     valArr = valArr + $(this).attr(attrname) + ',';
       });
     return valArr.substring(0,valArr.length-1);
 	}, strRule, Attr);
     casper.echo(strMesg);
     require('utils').dump(textinfo.split(','));
     return textinfo.split(',');
 };

 casper.run();

GetDirectors

2. 抓取制片国家和地区，这个信息使用CSS selector抓取会有困难，原因分析网页后就可以发现，首先这个信息不是放在一个<span>标签里面， 而且“美国”这个文本直接在<div id=’info’>这个高层级的元素里。对于这样的信息我们采用另外一种方式，文本分析和截取，首先映入String模块var S = require("string"); 这个模块也是要另外安装的。然后抓取整块的信息，然后用文本截取：

    //影片信息全文字抓取
     nameCount = casper.evaluate(function() {
     	var valArr = '';
     $('div#info').each(function(index,item){
     valArr = valArr + $(this).text() + ',';
       });
     return valArr.substring(0,valArr.length-1);
 	});
 	this.echo("影片信息全文字抓取");
     this.echo(nameCount);
     //this.echo(nameCount.indexOf("制片国家/地区:"));

     //抓取国家
     this.echo(S(nameCount).between("制片国家/地区:","\n"));

GetCountry

其他信息可以类似获取。

第五步，将抓取到的信息存储并作为分析的源，推荐使用MongoDB这类NoSql数据库存储，比较适合存放这样的非结构数据，而且性能更优。