CasperJS is a navigation scripting and testing utility for PhantomJS that allows testing of web pages and user interactions. It provides functions for navigation, clicking elements, filling forms, taking screenshots, and assertions. CasperJS runs quickly without a browser UI and allows debugging through verbose mode, capturing screenshots, and monitoring network requests and console logs. Tests can be refactored and common functions extracted to improve maintainability.

1. Superfast Automated Web
Testing
with CasperJS & PhantomJS

2. Agenda
1. What’s Casper
2. Why Casper
3. Installation
4. Live demo
5. Debugging
6. Refactoring
7. Advanced topics

3. Web UI testing framework
Similar to Selenium Watir
Built on top of PhantomJS
Started around Sep 2011
3329 stars on Github
What’s CasperJS?

4. Why Casper?
Fast
No browser UI
Webkit based
Execution Speed
Write front end UI testing using JS
Did I mention how fast test runs?

5. How to install and run
Requirements: python + phantomJS
Available on Windows, OSX, Linux
Install
OSX: $ brew install casperjs --devel
Node: $ npm install -g casperjs
Run
$ casperjs test mytest.js

6. test.assertTextExists("Todo App")
test.assert(1 == 1)
test.assertDoesntExist("#justin_bieber")
test.assertEquals(1+1, 2)
test.assertElementCount(".good_justin_bieber_son
gs", 0)
Assertions

7. casper.click("#create_task")
casper.clickLabel("My link is beautiful", "a");
casper.clickLabel("But my button is sexier",
"button");
Navigation clicks

8. WTF is then()?
“then() basically adds a new navigation step in a stack. A step is a javascript
function which can do two different things:
- waiting for the previous step - if any - being executed
- waiting for a requested url and related page to load”
Niko, Creator of CasperJS
Source: http://stackoverflow.com/questions/13785670/passing-variable-from-this-evaluate-to-casper-then

9. casper.waitForSelector("#sun", function() { alert("Go out and play"); });
casper.waitWhileSelector(".dark_clouds", function() { alert("Go out and
play"); });
casper.waitFor(function check() {
return this.evaluate(function() {
return $(".dark_clouds").length == 0
});
}, function then() { alert("Go out and play!"); });
Waiting for element to load

10. casper.waitUntilVisible("#natalie_portman", function() {});
casper.waitWhileVisible(".one_direction_fans", function() {});
casper.waitForSelectorTextChange("#inbox_unread_count",
function() {});
casper.start("http://why.univer.se/").waitForText("42",
function() {});
casper.start("http://foo/").waitForUrl(/login.html$/,
function() {});
casper.waitForResource("scarlett_johansson.png", function() {});
casper.wait(1000, function() {}); // No!!
Waiting for element to load (cont.)

11. casper.sendKeys('form#contact input#name',
'Chuck Norris');
casper.fill('form#contact', {
'name': 'Chuck Norris'
}, true);
Type text, fill forms

12. casper.evaluate(function() {
return $('.tasks').length;
});
Execute Javascript

13. casper.click("#link");
x = require('casper').selectXPath;
casper.click(x("//a[@id='link']"));
CSS3 VS XPath selectors

14. Debugging Casper
casper.echo(casper.getHTML()
casper.capture("screenshot.png")
casper.on("remote.message", function (msg)
{ casper.echo('Browser says: ' + msg) }
Verbose mode
$ casper --verbose --log-level=debug
Use safari (for rendering issues)

15. Refactoring
common.js
casper.createTask = function(title) {
this.sendKeys('#new-todo', title);
return this.sendKeys('#new-todo', this.page.event.key.Enter);
};
mytest.js
casper.createTask('Code feature 1');

16. Advanced topics
1. Setup/tear down
2. Support for file downloads, HTTP auth
3. Support for browser back/forward, scroll, reload, viewport site
4. Support for page events, alerts handling
5. Support for Continuous Integration
a. Jenkins XUnit output
$ casperjs test mytest.js --xunit=outcome.xml
b. GruntJS
6. Support for HTTPS
$ casperjs tumblr.js --ssl-protocol=any
7. Weak support for Drag and Drop

17. About me+us
Author: Herve Vu Roussel (see source at GitHub)
Find me at: hroussel@gmail.com
This presentation was made for Javascript Ho Chi Minh City meetup group
You can find us at:
http://www.meetup.com/JavaScript-Ho-Chi-Minh-City/
https://www.facebook.com/JavaScriptHCMC
https://plus.google.com/u/0/communities/116105314977285194967
http://www.slideshare.net/JavascriptMeetup

18. PLEASE CLAP