Logger in Protractor E2E testing

Log files are very important while creating automation test suites. It helps you by providing each and exact information about your steps.
In coding language like JAVA you can use Log4j, similar to that, you can use Log4js to generate log files in Javascript and in your Protractor tests.

First you need to install Log4js which can be done using the following command

npm install -g log4js

Now you just need to add following command to to use Log4js API:

var log4js = require('log4js');
var logger = log4js.getLogger();

You need to configure you Log4js, which can be done like following:

{
  "appenders": [
    {
      "type": "file",
      "filename": "relative/path/to/log_file.log",
      "maxLogSize": 20480,
      "backups": 3,
      "category": "relative-logger"
    }
  ]
}

You can use the following to make entries in the log files:

logger.trace('Entering cheese testing');
logger.debug('Got cheese.');
logger.info('Cheese is Gouda.');
logger.warn('Cheese is quite smelly.');
logger.error('Cheese is too ripe!');
logger.fatal('Cheese was breeding ground for listeria.');

Page object model for automation using Protractor

Creating automating test suites using Page Object Design pattern is very successful in languages like Java and C#, but Automation Engineers faces many problems while creating page object when creating automation test suites using JavaScript. Astrolabe is a famous extension for Protractor, but I did not find it of much usefulness to implement that, instead you can create your own page objects without the need of any extension.

You can use the following procedure to implement the page object:

Page.js
var pageObject = {
// Locator of a link
link : function(){
   return ptor.findElement(protractor.By.id(<locator>));
},

// function to click on element
clickOnLink : function(){
   pageObject.locators().click();
}
};
exports.pageObj = pageObject;

Test.js
var pageObject = require(<path to Page1.js>);

describe('Click on an element', function(){
  it('Verify page should open', function(){

     // Click on Link by calling the function defined in the Page.js
     pageObj.clickOnLink();
     // Verify actual value to be expected value
     expect(actual value).toBe(expected value);
  });
});

In this architecture, we have created Page.js in which we have found a locator of a Link and a function to click on that Link. If you can recall, it is the same way we used to do in Java, C# or in any other similar language.
Now we want to click on the link and then expect something over there, so in the Test.js, we have called the function to click on the link and then we verify our expected value. I am writing my automation scripts using this architecture and till now I am very successful in this approach.

Handling automation testing of Repeaters using Protractor

AngularJS is becoming popular day by day and thus are the demand of creating automation test suites for AngularJS applications. Protractor is a popular framework for testing AngularJS applications which runs on WebDriver and uses most of its classes.

Protractor uses Jasmine structure to create test suites.

That being the overview, In this post, I will cover the handling the automation test scenarios of the Repeaters of AngularJS.

Repeaters are just like tables in any normal applications.

In a repeater, there are following things which we might need to verify:

• Fetching the text from a particular row
• Click on an element in a row
• Checking the check-box in a particular row

Now for any of the above cases, there will be a particular row in which you will need to perform some of the tasks and lets say you need to find the particular row using the text present in it, then you can handle mostly everything using the following code:

Repeater : 

1. <ul class="phones">
2. <li ng-repeat="phone in phones | filter:query">
3. {{phone.name}}
4. <p> Text </p>
5. </li>
6. </ul>

TableLocator : This will be the locator of the table which holds all the element in the repeater. So this will return an Array.

ElementLocator : This will be the locator of the element on which you want to perform the some action.

TextLocator : This will be the locator which will hold the text on basis of which you need to perform the task.

Text : This is the text which we need to find to perform some operations.

So based on that lets see the code

Not just repeaters, all the table like structure can be handled in this way.

TableLocator()

.then(function(ElementList){

ElementList.map(function(element, index){

element.findElement(TextLocator).getText().then(function(retrievedText){

if(text == retrievedText)

{

/* Perform actions on the element like clicking on element, checking the checkbox, etc. */

element.findElement(ElementLocator).click();

}

})

})

})