CasperJS is a browser navigation scripting & testing utility written in Javascript for PhantomJS or SlimerJS. PhantomJS is a scripted, headless browser used for automating web page interaction. PhantomJS provides a JavaScript API enabling automated navigation, screenshots, user behavior and assertions making it a common tool used to run browser-based unit tests in a headless system like a continuous integration environment. PhantomJS is based on Webkit making it a similar browsing environment to Safari and Google Chrome (before Chrome's fork of webkit evolved into Blink). It is open-source software released under the BSD License. Presentation by Paul de Paula Senior Drupal Developer at @ x-team.com Youtube: https://www.youtube.com/watch?v=WR3Ojcfi-tY X-Team: http://x-team.com/

1. http://x-team.com
PhantomJS
CasperJS

2. http://x-team.com
PhantomJS
• Headless version of Webkit
• Window-less, command line
web browser
• Programmable through
JavaScript
• Supports WebDriver out of the
box

3. http://x-team.com
Installation
• Install Node.js
• sudo npm install -g phantomjs
• (http://phantomjs.org/)

4. How to use it?
var page = require('webpage').create();
page.open('http://www.google.com/', function (status) {
// Page is loaded. Output content.
console.log(page.content);
phantom.exit();
});

5. How to use it?
var page = require('webpage').create();
page.open('http://www.google.com/', function (status) {
// Page is loaded. Output content.
console.log(page.content);
phantom.exit();
});
> phantomjs myscript.js

6. http://x-team.com
What else can i do ?
• Inject/execute arbitrary JS
code
• Perform actions
• Take screenshots
• Monitor performance

7. PhantomJS is not a
test framework. It’s a
virtual browser.

8. http://x-team.com
CasperJS
• API & test framework layer on
top of PhantomJS
• Provides all the things you’re
used to:
• Clicking, Typing, Waiting,
Assertions, etc.
• Events, screenshots (even
specific elements), & more.

9. http://x-team.com
Installation
• Install Node.js
• sudo npm install -g casperjs
• (http://casperjs.org/)

10. How to use it?
var casper = require('casper').create();
casper.start('http://google.com/', function() {
this.fill('form[action="/search"]', { 'q': 'ghost' });
this.click('#gbqfba');
});
casper.then(function() {
this.echo(this.getTitle());
});
casper.run();

11. How to use it?
var casper = require('casper').create();
casper.start('http://google.com/', function() {
this.fill('form[action="/search"]', { 'q': 'ghost' });
this.click('#gbqfba');
});
casper.then(function() {
this.echo(this.getTitle());
});
casper.run();
#> casperjs myscript.js

12. How to use it?
var casper = require('casper').create();
casper.test.begin('Google tests', 1, function(test) {
casper.start('http://www.google.com/', function() {
test.assertTitleMatch(/Google/, 'Title contains Google');
}).run(function() {
test.done();
});
});
#> casperjs myscript.js

13. References
• http://docs.casperjs.org/en/latest/
• http://phantomjs.org/documentation/
• https://github.com/BBC-News/wraith

14. http://x-team.com
Crash Courses