快速入门

如果CasperJS已经在你的电脑上安装好，你就可以开始编写你的第一个脚本啦！你可以使用原生JavaScript（或PhantomJS2.0之前版本支持的 CoffeeScript）来编写脚本。

提示

如果你还不习惯使用JavaScript，请阅读这个FAQ条目。

最简单的CasperJS脚本

打开你最爱的编辑器，创建一个名为sample.js的文件，写入以下代码：

  1. var casper = require('casper').create();
  3. casper.start('http://casperjs.org/', function() {
  4.     this.echo(this.getTitle());
  5. });
  7. casper.thenOpen('http://phantomjs.org', function() {
  8.     this.echo(this.getTitle());
  9. });
  11. casper.run();

运行脚本（使用python）：

  1. $ casperjs sample.js

运行脚本（使用node）：这里有关于node的详细信息

  1. $ node casperjs.js sample.js

运行脚本（使用PhantomJS）

  1. $ phantomjs casperjs.js sample.js

运行脚本（使用windows命令行）

  1. C:\casperjs\bin> casperjs.exe sample.js

你应该得到如下的结果：

  1. $ casperjs sample.js
  2. CasperJS, a navigation scripting and testing utility for PhantomJS
  3. PhantomJS: Headless WebKit with JavaScript API
我刚刚做了什么？
  1. 我们创建了一个新的Casper实例。
  2. 我们开始运行脚本，并打开了http://casperjs.org/。
  3. 当页面加载完毕后，我们请求打印出这个网页的标题（也就是<title>标签中的内容）。
  4. 我们打开了另一个链接，http://phantomjs.org/。
  5. 当页面加载完毕后，我们也请求打印出这个页面的标题。
  6. 结束整个进程。

我们来抓取Google吧

在下面的例子中，我们将连续向Google查询两个词语，分别是”casperjs“和”phantomjs“，然后将结果链接集合到数组中，并将结果输出到控制台。（友情提示如果你在中国的话访问Google是需要翻墙的）

打开你最爱的编辑器并将以下代码保存到文件googlelinks.js中：

  1. var links = [];
  2. var casper = require('casper').create();
  4. function getLinks() {
  5.     var links = document.querySelectorAll('h3.r a');
  6.     return Array.prototype.map.call(links, function(e) {
  7.         return e.getAttribute('href');
  8.     });
  9. }
  11. casper.start('http://google.fr/', function() {
  12.    // Wait for the page to be loaded
  13.    this.waitForSelector('form[action="/search"]');
  14. });
  16. casper.then(function() {
  17.    // search for 'casperjs' from google form
  18.    this.fill('form[action="/search"]', { q: 'casperjs' }, true);
  19. });
  21. casper.then(function() {
  22.     // aggregate results for the 'casperjs' search
  23.     links = this.evaluate(getLinks);
  24.     // now search for 'phantomjs' by filling the form again
  25.     this.fill('form[action="/search"]', { q: 'phantomjs' }, true);
  26. });
  28. casper.then(function() {
  29.     // aggregate results for the 'phantomjs' search
  30.     links = links.concat(this.evaluate(getLinks));
  31. });
  33. casper.run(function() {
  34.     // echo results in some pretty fashion
  35.     this.echo(links.length + ' links found:');
  36.     this.echo(' - ' + links.join('\n - ')).exit();
  37. });

运行它：

  1. $ casperjs googlelinks.js
  2. 20 links found:
  3.  - https://github.com/casperjs/casperjs
  4.  - https://github.com/casperjs/casperjs/issues/2
  5.  - https://github.com/casperjs/casperjs/tree/master/samples
  6.  - https://github.com/casperjs/casperjs/commits/master/
  7.  - http://www.facebook.com/people/Casper-Js/100000337260665
  8.  - http://www.facebook.com/public/Casper-Js
  9.  - http://hashtags.org/tag/CasperJS/
  10.  - http://www.zerotohundred.com/newforums/members/casper-js.html
  11.  - http://www.yellowpages.com/casper-wy/j-s-enterprises
  12.  - http://local.trib.com/casper+wy/j+s+chinese+restaurant.zq.html
  13.  - http://www.phantomjs.org/
  14.  - http://code.google.com/p/phantomjs/
  15.  - http://code.google.com/p/phantomjs/wiki/QuickStart
  16.  - http://svay.com/blog/index/post/2011/08/31/Paris-JS-10-%3A-Introduction-%C3%A0-PhantomJS
  17.  - https://github.com/ariya/phantomjs
  18.  - http://dailyjs.com/2011/01/28/phantoms/
  19.  - http://css.dzone.com/articles/phantom-js-alternative
  20.  - http://pilvee.com/blog/tag/phantom-js/
  21.  - http://ariya.blogspot.com/2011/01/phantomjs-minimalistic-headless-webkit.html
  22.  - http://www.readwriteweb.com/hack/2011/03/phantomjs-the-power-of-webkit.php

CoffeeScript版本

你也可以使用CoffeeScript语法编写CasperJS程序：

  1.  getLinks = ->
  2.   links = document.querySelectorAll "h3.r a"
  3.   Array::map.call links, (e) -> e.getAttribute "href"
  5. links = []
  6. casper = require('casper').create()
  8. casper.start "http://google.fr/", ->
  9.   # search for 'casperjs' from google form
  10.   @fill "form[action='/search']", q: "casperjs", true
  12. casper.then ->
  13.   # aggregate results for the 'casperjs' search
  14.   links = @evaluate getLinks
  15.   # search for 'phantomjs' from google form
  16.   @fill "form[action='/search']", q: "phantomjs", true
  18. casper.then ->
  19.   # concat results for the 'phantomjs' search
  20.   links = links.concat @evaluate(getLinks)
  22. casper.run ->
  23.   # display results
  24.   @echo links.length + " links found:"
  25.   @echo(" - " + links.join("\n - ")).exit()

一个简单的测试程序

CasperJS同时也是一个测试框架，测试脚本与抓取脚本略有不同，尽管它们共享了大部分的API。

一个简单的测试脚本：

  1. // hello-test.js
  2. casper.test.begin("Hello, Test!", 1, function(test) {
  3.   test.assert(true);
  4.   test.done();
  5. });

使用CasperJS的测试子命令来运行它：

  1. $ casperjs test hello-test.js
  2. Test file: hello-test.js
  3. # Hello, Test!
  4. PASS Subject is strictly true
  5. PASS 1 test executed in 0.023s, 1 passed, 0 failed, 0 dubious, 0 skipped.
提示

如你所见，你不需要在测试脚本中创建一个casper实例，因为预配置的实例已经可供你使用。 你可以在测试部分的文档中了解更多信息。