15'min Talk about CasperJS @ Clermont'ech

1. CasperJs
Enjoy Functional Testing

2. CasperJs
Navigation scripting
Testing Utility
Written in Javascript
Open source

3. Based on PhantomJS
Headless Webkit browser
Full Javascript API
DOM Handling
CSS Selector
Canvas, SVG, Screen Capture

4. AND SINCE 1.1 Beta

5. SlimerJS
Gecko Scriptable Browser
Not yet truly headless (but works with xvfb)

6. PhantomJS
//clermontech.js
var page = new WebPage();
var result;
page.open('http://clermontech.org/', function (status) {
if ('success' !== status) {
console.log("Error");
}
else {
result = page.evaluate(function () {
var titles = $('.latest .talks a');
var out = [];
titles.each(function () {
out.push($(this).text());
});
return out.join("n");
});
console.log(result);
phantom.exit();
}
});

7. PhantomJS
fabien@fabien:~/clermontech$ phantomjs clermontech.js
Organiser son Application Backbone.js
Mobilité et NFC dans les Transports
Introduction à Composer
Ergonomie Web : Les Formulaires
Back From Devoxx France 2013
Object Calisthenics
Tasteful
Private Cloud OVH
Relax!
Intro Aux Licences Libres

8. CasperJs
High Level API
Browsing navigation steps
Manage forms filling & submission
Test remote DOM
Logging events
Downloading resources
Make some screenshot
Write functional tests suites

9. Functional Testing ?
Functional tests check the integration of the different layers of an
application (from the routing to the views).
Test your business rules
Test the integration of your pages

10. Example
//clermontech_casper.js
var casper = require('casper').create();
casper.start('http://clermontech.org', function() {
this.test.assertHttpStatus(200, 'Homepage is UP !');
this.echo('We click on Link Association');
this.click('a[title="A propos de Clermont'ech"]');
});
casper.wait('2000', function(){
this.test.assertHttpStatus(200, 'Association page is UP !');
this.test.assertUrlMatch(/association/, 'Url is well formed');
var members = this.evaluate(function() {
return __utils__.findAll('.row .container ul li').length;
});
this.test.assertEquals(6, members, '6 members in the association');
this.test.assertTextExists('Julien Maupetit', 'We found Mr President');
});
casper.run(function(){
this.test.done();
});

11. Execution

12. Selectors
CSS3
Xpath
casper.start('http://clermontech.org', function() {
this.test.assertExists({
type: 'xpath',
path: '//*[@id="logo"]'
}, 'the logo exists');
});

13. Beautifull Screenshot
casper.start('http://clermontech.org/', function() {
this.captureSelector('clermontech.png', 'body');
});
casper.run();

14. Tools
Resurrectio
Chrome extension
Record navigation and generate casperjs test suites
GNU/Parallel
Parallelize test suites

15. @fabienpomerol
Thank you
Questions ?