Thursday, September 21Be an Automation Engineer

Internals of element identification in protractor

The most important steps in end-to-end tests for any web application are finding DOM elements, interacting with them, and getting information about the current state of your application.
So it is better to understand the internal details of element identification mechanism in any UI automation tool like Protractor to write better performing automation tests.

This documentation is an overview of how to locate and perform actions on DOM elements using Protractor.

In Protractor, we can use ‘element’ or ‘browser.findElement’ methods to find an element. Let’s see elementfunction.

element:

Protractor has defined a global function element, which takes a Locator and will return an ElementFinder. This function is to identify a single element in a web page.

ElementFinder has a set of actions like click, sendKeys and getText etc.. We need to call these action methods to interact with elements.

“The good thing in protractor is that the protractor won’t identify elements until we call an action on the element.”

Let’s say if we write below test script with wrong identifier. We may think that the test will fail with ‘NoSuchElement’ error. But it does not fail because we are not calling any action on the element.

describe('Desc',function(){
    it('Test1',function(){
        browser.get("http://angularjs.org");
        //Element doesn't exist
        element(by.binding('Nmmmmmmm'));
    });
}); 

The above test will fail if we call an action on the element. Let’s say Click.

element(by.binding('Nmmmmmmm')).click();

  • What would happen if we use driver.findElement instead of element?
    • If we use browser.findElement(identifier) instead of element function in the above test script, the test will fail. Execute the below example test script with browser.findElement.

      describe('Desc',function(){
          it('Test1',function(){
              browser.get("http://angularjs.org");
              //Element doesn't exist
              browser.findElement(by.binding('Nmmmmmmm'));
          });
      }); 
      

      browser.findElement will try to find element matching the given identifier even without calling an action on the element. So the test will fail.

What happens when we call an action on an element?

When it comes to protractor all the actions are asynchronous. After invoking an action (say: click) on a WebElement, the call will be send to the browser through selenium server by following Webdriver JSON-wire-protocol. Then the browser will perform the action on the element.

Since all actions are asynchronous, all action methods return a promise. So we can handle the promise as we like (using .then(param1, param2)). Below I am logging elements’s text to the console.

var el = element(locator);
el.getText().then(function(text) {
  console.log(text);
});

All the actions which we can perform on a WebElement are available under ElementFinder.

%d bloggers like this: