Take screenshot of failed test cases with Protractor.

With Protractor we can take screenshot of failed test cases. It is a good practice to take screenshot of webpage when the test case fails. Because from the screenshot you may have a idea why the test case failed. Looking at a screenshot is easier then reading many lines of error message.

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 ~~