Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Superfast Automated Web Testing with CasperJS & PhantomJS

5,367 views

Published on

Superfast Automated Web Testing with CasperJS & PhantomJS

Published in: Technology
  • Be the first to comment

Superfast Automated Web Testing with CasperJS & PhantomJS

  1. 1. Superfast Automated Web Testing with CasperJS & PhantomJS
  2. 2. Agenda 1. What’s Casper 2. Why Casper 3. Installation 4. Live demo 5. Debugging 6. Refactoring 7. Advanced topics
  3. 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. 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. 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. 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. 7. casper.click("#create_task") casper.clickLabel("My link is beautiful", "a"); casper.clickLabel("But my button is sexier", "button"); Navigation clicks
  8. 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. 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. 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. 11. casper.sendKeys('form#contact input#name', 'Chuck Norris'); casper.fill('form#contact', { 'name': 'Chuck Norris' }, true); Type text, fill forms
  12. 12. casper.evaluate(function() { return $('.tasks').length; }); Execute Javascript
  13. 13. casper.click("#link"); x = require('casper').selectXPath; casper.click(x("//a[@id='link']")); CSS3 VS XPath selectors
  14. 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. 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. 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. 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. 18. PLEASE CLAP

×