Introduction to CasperJS (Fast Web UI Testing Framework)
-
Upload
herve-roussel -
Category
Technology
-
view
622 -
download
3
description
Transcript of Introduction to CasperJS (Fast Web UI Testing Framework)
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: [email protected]
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