CasperJs
Enjoy Functional Testing
CasperJs
Navigation scripting
Testing Utility
Written in Javascript
Open source
Based on PhantomJS
Headless Webkit browser
Full Javascript API
DOM Handling
CSS Selector
Canvas, SVG, Screen Capture
AND SINCE 1.1 Beta
SlimerJS
Gecko Scriptable Browser
Not yet truly headless (but works with xvfb)
PhantomJS
//clermontech.js
var page = new WebPage();
var result;
page.open('http://clermontech.org/', function (status) {
...
PhantomJS
fabien@fabien:~/clermontech$ phantomjs clermontech.js
Organiser son Application Backbone.js
Mobilité et NFC dans...
CasperJs
High Level API
Browsing navigation steps
Manage forms filling & submission
Test remote DOM
Logging events
Downloa...
Functional Testing ?
Functional tests check the integration of the different layers of an
application (from the routing to...
Example
//clermontech_casper.js
var casper = require('casper').create();
casper.start('http://clermontech.org', function()...
Execution
Selectors
CSS3
Xpath
casper.start('http://clermontech.org', function() {
this.test.assertExists({
type: 'xpath',
path: '//...
Beautifull Screenshot
casper.start('http://clermontech.org/', function() {
this.captureSelector('clermontech.png', 'body')...
Tools
Resurrectio
Chrome extension
Record navigation and generate casperjs test suites
GNU/Parallel
Parallelize test suites
@fabienpomerol
Thank you
Questions ?
Upcoming SlideShare
Loading in...5
×

CasperJs Enjoy Functional Testing

2,526

Published on

15'min Talk about CasperJS @ Clermont'ech

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,526
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CasperJs Enjoy Functional Testing

  1. 1. CasperJs Enjoy Functional Testing
  2. 2. CasperJs Navigation scripting Testing Utility Written in Javascript Open source
  3. 3. Based on PhantomJS Headless Webkit browser Full Javascript API DOM Handling CSS Selector Canvas, SVG, Screen Capture
  4. 4. AND SINCE 1.1 Beta
  5. 5. SlimerJS Gecko Scriptable Browser Not yet truly headless (but works with xvfb)
  6. 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. 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. 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. 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. 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. 11. Execution
  12. 12. Selectors CSS3 Xpath casper.start('http://clermontech.org', function() { this.test.assertExists({ type: 'xpath', path: '//*[@id="logo"]' }, 'the logo exists'); });
  13. 13. Beautifull Screenshot casper.start('http://clermontech.org/', function() { this.captureSelector('clermontech.png', 'body'); }); casper.run();
  14. 14. Tools Resurrectio Chrome extension Record navigation and generate casperjs test suites GNU/Parallel Parallelize test suites
  15. 15. @fabienpomerol Thank you Questions ?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×