用CasperJs自动浏览页面

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:

用CasperJs自动浏览页面_第1张图片




怎么引入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



你可能感兴趣的:(js,jquery,phantomjs,casperjs)