CasperJs Enjoy Functional Testing

Uploaded on

15'min Talk about CasperJS @ Clermont'ech

15'min Talk about CasperJS @ Clermont'ech

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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;'', 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('', function() { this.test.assertHttpStatus(200, 'Homepage is UP !'); this.echo('We click on Link Association');'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'); });{ this.test.done(); });
  • 11. Execution
  • 12. Selectors CSS3 Xpath casper.start('', function() { this.test.assertExists({ type: 'xpath', path: '//*[@id="logo"]' }, 'the logo exists'); });
  • 13. Beautifull Screenshot casper.start('', function() { this.captureSelector('clermontech.png', 'body'); });;
  • 14. Tools Resurrectio Chrome extension Record navigation and generate casperjs test suites GNU/Parallel Parallelize test suites
  • 15. @fabienpomerol Thank you Questions ?