Superfast Automated Web Testing with CasperJS & PhantomJS

Superfast Automated Web Testing with CasperJS & PhantomJS

1. Super Fast WebUI Testing
with CasperJS

2. Agenda
1.What’s Casper
2.Why Casper
3.Installation
4.Live demo
5.Debugging
6.Refactoring
7.Advanced topics

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. 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. 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. test.assertTextExists("Todo App")
test.assert(1==1)
test.assertDoesntExist("#justin_bieber")
test.assertEquals(1+1, 2)
test.assertElementCount(".good_justin_bieber_so
ngs", 0)
Assertions

7. casper.click("#create_task")
casper.clickLabel("My link is beautiful", "a");
casper.clickLabel("But my button is sexier",
"button");
Navigation clicks

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. casper.waitForSelector("#sun", function(){alert("Go out and play"); });
casper.waitWhileSelector(".dark_clouds", function(){alert("Go out and play");
});
casper.waitFor(functioncheck(){
returnthis.evaluate(function(){
return$(".dark_clouds").length ==0
});
}, functionthen(){alert("Go out and play!"); });
Waiting for element to load

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. casper.sendKeys('form#contact input#name',
'Chuck Norris');
casper.fill('form#contact', {
'name': 'Chuck Norris'
}, true);
Type text, fill forms

12. casper.evaluate(function(){
return$('.tasks').length;
});
Execute Javascript

13. casper.click("#link");
x =require('casper').selectXPath;
casper.click(x("//a[@id='link']"));
CSS3 VS XPath selectors

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. Refactoring
common.js
casper.createTask = function(title) {
this.sendKeys('#new-todo', title);
returnthis.sendKeys('#new-todo', this.page.event.key.Enter);
};
mytest.js
casper.createTask('Code feature 1');

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. 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 Citymeetup 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. PLEASE CLAP