CasperJSIntro to a Fast Testing Framework

Agenda

1. What’s Casper2. Why Casper3. Installation4. Live demo5. Debugging6. Refactoring7. Advanced topics

● Web UI testing framework● Similar to Selenium Watir● Built on top of PhantomJS● Started around Sep 2011● 3329 stars on Github

What’s CasperJS?

Why Casper?

● Fasto No browser UIo Webkit based

● Execution Speed● Write front end UI testing using JS● Did I mention how fast test runs?

How to install and run

● Requirements: python + phantomJS● Available on Windows, OSX, Linux● Install

o OSX: $ brew install casperjs --develo Node: $ npm install -g casperjs

● Runo $ casperjs test mytest.js

test.assertTextExists("Todo App")

test.assert(1 == 1)

test.assertDoesntExist("#justin_bieber")

test.assertEquals(1+1, 2)

test.assertElementCount(".good_justin_biebe

r_songs", 0)

Assertions

casper.click("#create_task")

casper.clickLabel("My link is beautiful",

"a");

casper.clickLabel("But my button is

sexier", "button");

Navigation clicks

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

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

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.)

casper.sendKeys('form#contact input#name',

'Chuck Norris');

casper.fill('form#contact', {

'name': 'Chuck Norris'}, true);

Type text, fill forms

casper.evaluate(function() {

return $('.tasks').length;});

Execute Javascript

casper.click("#link");

x = require('casper').selectXPath;

casper.click(x("//a[@id='link']"));

CSS3 VS XPath selectors

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)

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');

Advanced topics

1. Setup/tear down2. Support for file downloads, HTTP auth3. Support for browser back/forward, scroll, reload, viewport site4. Support for page events, alerts handling5. Support for Continuous Integration

a. Jenkins XUnit output$ casperjs test mytest.js --xunit=outcome.xmlb. GruntJS

6. Support for HTTPS$ casperjs tumblr.js --ssl-protocol=any

7. Weak support for Drag and Drop

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

PLEASE CLAP