Package file (package.json)
[javascript]{
“name”: “testproject”,
“version”: “1.0.0”,
“description”: “Test project using casperjs”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [
“Casperjs”,
“Gruntjs”,
“Test”,
“code”,
“management”
],
“author”: “Hasan Naqvi”,
“license”: “ISC”,
“devDependencies”: {
“grunt”: “^1.0.1”,
“grunt-add-comment”: “^1.1.6”,
“grunt-casperjs”: “^2.2.1”,
“grunt-contrib-clean”: “^1.1.0”,
“grunt-contrib-jshint”: “^1.1.0”,
“grunt-contrib-watch”: “^1.0.0”,
“grunt-jsbeautifier”: “^0.2.13”,
“grunt-jsdoc”: “^2.1.0”,
“ink-docstrap”: “^1.3.0”,
“jshint”: “^2.9.5”
}
}
[/javascript]
Grunt file (Gruntfile.js)
[javascript]module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
con: grunt.file.readJSON(‘conf.json’),
“casperjs”: {
options: {
//casperjsOptions: [‘–includes=test/lib/vars.js’, ‘–no-colors’, ‘–log-level=info’, ‘–verbose=false’, ‘–xunit=artifacts/log.xml’]
casperjsOptions: [
‘–includes=< %= con.includeFiles %>‘,
‘–xunit=< %= con.logFile %>‘
]
},
files: [‘< %= con.onlyTestFiles %>‘]
},
“jshint”: {
files: [‘Gruntfile.js’, ‘< %= con.allJsInTest %>‘]
},
“jsbeautifier”: {
src: [‘Gruntfile.js’, ‘conf.json’, ‘< %= con.allJsInTest %>‘]
},
“watch”: {
options: {
dateFormat: function(time) {
grunt.log.writeln(‘The watch finished in ‘ + time + ‘ms at’ + (new Date()).toString());
grunt.log.writeln(‘Waiting for more changes…’);
},
livereload: true,
},
scripts: {
files: [‘Gruntfile.js’, ‘< %= con.allJsInTest %>‘],
tasks: [‘default’],
},
},
“jsdoc”: {
dist: {
src: [‘< %= con.allJsInTest %>‘, ‘README.md’],
options: {
destination: ‘< %= con.docs %>‘,
template: “node_modules/ink-docstrap/template”,
configure: “node_modules/ink-docstrap/template/jsdoc.conf.json”
}
}
},
clean: [‘artifacts’]
});
grunt.loadNpmTasks(‘grunt-contrib-clean’);
grunt.loadNpmTasks(‘grunt-contrib-watch’);
grunt.loadNpmTasks(‘grunt-contrib-jshint’);
grunt.loadNpmTasks(‘grunt-jsbeautifier’);
grunt.loadNpmTasks(‘grunt-casperjs’);
grunt.loadNpmTasks(‘grunt-jsdoc’);
grunt.registerTask(‘test’, [‘jshint’, ‘casperjs’]);
grunt.registerTask(‘beautify’, [‘jsbeautifier’]);
grunt.registerTask(‘default’, [‘beautify’, ‘clean’, ‘jsdoc’, ‘test’]);
};
[/javascript]
Configurtion file (conf.json)
[javascript]{
“name”: “hasan”,
“project”: “casperjs”,
“includeFiles”: “test/lib/vars.js”,
“logFile”: “artifacts/log.xml”,
“onlyTestFiles”: “test/*.js”,
“allJsInTest”: “test/**/*.js”,
“docs”: “artifacts/docs”
}
[/javascript]
Test file (test/test.js)
[javascript]casper.test.begin(‘Test’, 1, function suite(test) {
casper.start(“http://localhost/index.html”, function() {
casper.userAgent(‘Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.66 Safari/537.36’);
});
var x = require(‘casper’).selectXPath;
var fields = {};
casper.then(function() {
casper.test.comment(“locating form in html”);
casper.test.assertExists(x(‘.//form[@name=”hasanForm”]’));
/** Creating an array to store form data*/
/** Filling array with form data */
fields[‘//*[@id=”ext-gen1089″]’] = “first text box”;
fields[‘//*[@id=”ext-gen1091″]’] = “second text box”;
/** Passing the data array to the full to store data in the form
* To capture the form with data, we donot submit the form by passing
* false signal in third paramter of fillXPath function
* */
this.fillXPath(‘form[name=”hasanForm”]’, fields, false);
this.capture(artifactDirImage + “Screenshotbefore_submit.png”);
});
casper.then(function() {
// you can use fillxpath again using third parameter true to submit the form
//this.fillXPath(‘form[name=”hasanForm”]’, fields, true);
this.click(x(“.//*[@id=’button-1054-btnEl’]”));
});
casper.then(function() {
this.capture(artifactDirImage + “Screenshotafter_submit.png”);
});
casper.run(function() {
test.done();
});
});
[/javascript]
Library file (test/lib/vars.js)
[javascript]casper.on(“page.error”, function(msg, trace) {
this.echo(“Error: ” + msg);
// maybe make it a little fancier with the pre from the PhantomJS equivalent
});
var u = require(‘utils’);
var artifactDirImage = “artifacts/images/”;
[/javascript]