In Protractor browser.takeScreenshot() is the basic command to take the screenshot. Now here is the code to take screenshot after the failure of each test cases.
afterEach(function() {
takeScreenshotWithProtractor();
});
var takeScreenshotWithProtractor = function() {
// Note: this is using Jasmine 2 reporter syntax.
jasmine.getEnv().addReporter(new function() {
this.specDone = function(result) {
// if testcase fails
if(result.failedExpectations.length > 0) {
// take screenshot after failure
browser.takeScreenshot().then(function(png) {
// If screenshot folder does not exist it will create a screenshot folder.
var dir = "./screenshot/";
try {
fs.mkdirSync(dir);
} catch(e) {
if ( e.code != 'EEXIST' )
throw e;
}
try {
// Create your image file if not exists. Image file name is test case name.
var stream = fs.createWriteStream(path.join(dir, result.description + '.png'));
stream.write(new Buffer(png, 'base64'));
stream.end();
} catch(e) {
if ( e.code != 'EEXIST' )
throw e;
}
});
}
}
});
};
Here this chunk of code will help you to take screenshot of web page after each failed test case. This also will create a screenshot folder inside your project folder to store the screenshots. Screenshot name will be test case name.
You have to install two node module for this. One is fs and another is path. The command is
npm install fs
npm install path
Here is the full code of the test on this webpage : http://mahmudulhasan.github.io/ToDoAngular/
Last test case is the failed one :
describe('Basic protractor test', function() {
var todoTextBox = element(by.id('todotask'));
var addNewButton = element(by.id('addtodotask'));
var removeTaskButton = element(by.css('button'));
var fs = require('fs');
var path = require('path');
// All the list item
var todoList = element.all(by.repeater('x in todoList'));
afterEach(function() {
takeScreenshotWithProtractor();
});
var takeScreenshotWithProtractor = function() {
// Note: this is using Jasmine 2 reporter syntax.
jasmine.getEnv().addReporter(new function() {
this.specDone = function(result) {
// if testcase fails
if(result.failedExpectations.length > 0) {
// take screenshot after failure
browser.takeScreenshot().then(function(png) {
// If screenshot folder does not exist it will create a screenshot folder.
var dir = "./screenshot/";
try {
fs.mkdirSync(dir);
} catch(e) {
if ( e.code != 'EEXIST' )
throw e;
}
try {
// Create your image file if not exists. Image file name is test case name.
var stream = fs.createWriteStream(path.join(dir, result.description + '.png'));
stream.write(new Buffer(png, 'base64'));
stream.end();
} catch(e) {
if ( e.code != 'EEXIST' )
throw e;
}
});
}
}
});
};
it('Page should load properly', function() {
// Load demo angular site
browser.get('http://mahmudulhasan.github.io/ToDoAngular/');
// Check that todo textbox and Add New button is present
expect(element(by.id('todotask')).isPresent()).toBe(true);
expect(element(by.id('addtodotask')).isPresent()).toBe(true);
});
it('Should add a todo task in the todo list', function() {
var numOfListItem = null;
// Count list item then add another todo task list item no will increase by 1
todoList.count().then(function(result) {
console.log(result);
numOfListItem = result;
// Add another todo task
todoTextBox.sendKeys("Second todo task");
addNewButton.click();
expect(todoList.count()).toEqual(numOfListItem+1);
});
});
it('Should remove all the task in todo list', function() {
todoList.count().then(function(result) {
for(var i=0;i<result;i++) {
todoList.get(i).element(by.model('x.done')).click();
}
removeTaskButton.click();
expect(todoList.count()).toEqual(0);
});
});
it('This test case should fail', function() {
expect(todoList.count()).toEqual(1);
});
});
Run this from terminal with protractor conf.js . It will create a folder named "screenshot" inside project folder. It will also create an image named "The test case should fail.png" .
In the last test case we are expecting that there will be one todo list item in the web page but our resulted image shows us that there is no todo list item. So from the picture we can understand why the test case failed.
The full code is stored in : https://github.com/MahmudulHasan/AutomateTodoProtractor
Thanks for your patience. Next post will be on Updating test run result in test rail through Protractor.
~~ A picture is worth a thousand words ~~
