mercredi 27 mai 2015

CasperJS UI testing best practices

CasperJS is an open source UI testing tool you can plug over PhantomJS, the famous webkit headless browser. From javascript code, you can simulate in a test all possible user interactions with your web interface. For example you can click on a link, fill and submit a form, and check your DOM elements.

Just to be clear : as you interact directly with the browser, you can use CasperJS whatever is your server side technology.

I started to use this tool approximatively two years ago and wanted to share some best practices I use in my UI tests.

#1 : structure your tests with Page Object Pattern


This tip is definitively the most important. UI tests are essential but have a main drawback : when your DOM changes, your tests are broken.

The concept of the Page Object Pattern is to have two kinds of objects in your tests : the Page objects and the scenarios :

  • Each page object represents a real page of your web application and is an abstraction of the page DOM
  • A scenario uses several page objects to describe the user navigation and has no idea on how are structured the web pages

Applying this pattern, you will centralize in a single place the CSS or XPATH selectors of a page. If you change the page DOM, you won't need to modify several tests but only the corresponding Page object.

I already covered this topic in another thread where you will find a complete example of the Page Object Pattern with CasperJS.

#2 : use Resurrectio recorder


Resurrectio is a useful Chrome plugin that records your actions in order to generate a CasperJS script : just activate it, do your actions on your web interface, then generate the script and your test is ready, or almost...

The plugin is not perfect and as for every recorder, you will need to refactor the code (especially with Page Object Pattern). Plus, some events are forgotten by the recorder and you will need to fix some CSS selectors. BUT it is still very useful and I use it as soon as I want to create a new test on new web pages.

#3 : empower your screenshots


With CasperJS, you can do at every moment in your test execution a screenshot of your web page. For example :

casper.then(function() {
    this.capture('beforeFillingTheConnectionForm.png');
});

You can still give a comprehensive name to your screenshot file like in my example but when you will debug a failing test, you will quickly need some additional information. The best you can do here is to create an utility method where you can customized all screenshot filenames. From that you will do very powerful screenshots :

exports.capture = function(screenshotName) {
   casper.then(function() {
    var testFile = this.test.currentSuite.file;
    if (testFile.indexOf('/') != -1) {
     testFile = testFile.substring(testFile.lastIndexOf('/') + 1);
    }
    testFile = testFile.replace('.js', '');

    var testName = this.test.currentSuite.name;

    var screenshotFile = 'screenshots/' + testFile + '/' + testName 
               + '/' + screenshotName + '.png';
    this.capture(screenshotFile);
   });
};

With this utility method, your screenshots are now saved in a folder screenshots/<testFilename>/<testName>. For example "screenshots/connectionScenario/Should connect then disconnect/".

As far as I know, this.test.currentSuite object is not documented and I cannot assure you that CasperJS contributors will keep this variable in the future CasperJS versions.

#4 : manage several environments


You surely need to execute your tests on several environments : local, tests, preproduction and so one. To manage that, you can create a config file per environment to store the environments urls or for example the user credentials. Then you set a variable telling which environment you want to use directly in CasperJS command line.

For example, you can have your local configuration in the file "config/env/local.js" :

{
  url: 'http://localhost:8080',
  login: 'dev',
  password: 'dev'
}

Your preproduction configuration in the file "config/env/preproduction.js" :

{
  url: 'http://preproduction',
  login: 'admin',
  password: 'admin'
}

Then in a file "config/config.js", you can load the good environment file according to the command line arguments :

var environment = casper.cli.get('env');

if (!environment) {
 console.log('Usage: "casperjs test --env= "');
 casper.exit(1);
}

console.log('Loading the ' + environment + ' config.');

var environmentConfig = require('./env/' + environment + '.js');
module.exports = environmentConfig;


#5 : use your favorite building tool


On a Java based web, project I started to execute CasperJS directly from Maven thanks to this thread. It is interesting because Maven directly handles PhantomJS and CasperJS installation. Quite appreciable for your development workstations and for your favorite continuous delivery tool.

I haven't tried yet Grunt or Gulp implementations but you will easily find that on Google ;-)

Conclusion


I hope you enjoyed these tips. Don't hesitate to give me your opinion on this thread or to share your own best practices with me.

Happy UI testing !