Tuesday, December 12Be an Automation Engineer

Element identification in protractor

In any UI automation tool, the most important and required step is element identification.
Protractor has many element locating strategies like selenium webdriver. You can go through different element locating strategies available in protractor Here and Here.

Lets know about element identification in protractor.

Element identification is different for different situations. Some times we may need to identify a particular element in a web page or multiple elements. We would like to explain required and most commonly used element identification strategies.

First, lets start with identifying single element in a webpage.

1. Identifying single element:

We can use element global to identify a Web Element. It will return ElementFinder which will be sent to Selenium server for getting required element specified by the locator.

element(locator);

Also, we can use selenium like syntax.

browser.findElement(locator);

The difference between browser.findElement and element(locator) is that browser.findElement will immediately fetch element from the webpage where as element(locator) will fetch element only when we call an action on it like element(locator).click(). We have clearly explained about this here.

Example spec for reference:

describe('angularjs homepage todo list', function() { 
  // Test in Jasmine
  it('should add a todo', function() { 
    // Entering application url in browser
    browser.get('https://angularjs.org');
    // Enter text under TODO input field
    element(by.model('todoList.todoText')).sendKeys('Enter text into todo filed');
    // Clicks on 'Add' button
    element(by.css('[value="add"]')).click(); 
  });
});

2. Identifying multiple elements:

We can use element.all(locator) to identify multiple elements. Some times we may need to get a list for elements. Lets say we have a table and we need to get a specific column or a specific row, in that case we can use element.all.

element.all(locator)

We can handle multiple elements returned by element.all in the promise handler. Don’t worry if you don’t know about promises. We will cover promises in another post and update this post once we have covered promises.

element.all(locator).then(function(arrayOfElements){
//Iterate through the elements
});

There are few utility methods available for element.all in protractor.

  • element.all(locator).count(): Returns the count of the all elements located.
  • element.all(locator).first(): Returns the first element in the list of elements identified
  • element.all(locator).last(): Returns the last element in the list of elements identified
  • element.all(locator).get(index): Returns the element at the specified index.index starts from zero.

Example spec for reference:

describe('angularjs homepage todo list', function () {
    beforeEach(function () {
        // Entering application url in browser
        browser.get('https://angularjs.org');
    })
    // Test in Jasmine
    it('should add a todo', function () {
        // Finds all H1 elements
        var allH1Tags = element.all(by.css('h1'));
        //prints count of all elements identified
        console.log(allH1Tags.count() + " elements idenitifed");
        //Gets the text of first element
        console.log("Firt heading: " + allH1Tags.first().getText());
        //Gets last element's text
        console.log("Last heading: " + allH1Tags.last().getText());
        //Get 3rd element
        var thirdHeading = allH1Tags.get(2);
    });
});

We can also find child elements of an element(parent).

3. Locating single child Element:

Let us say that the DOM structure is like below.


<div>
  <div id="element1">Element1</div>
  <div id="element2">Element2</div>
  <div id="parentElement">
    <span> Child Element1 </span>
    <span> Child Element2 </span>
    <span> Child Element2 </span>
  </div>
</div>

In the above DOM structure we need to identify first span element(Child Element1) under parent element.
Before identifying a child element we need to identify the parent element first.

 var parentElement = element(by.id('parentElement'));

We can use parent element to find it’s child elements.

 var childElement = parentElement.element(by.css('span')); 

We can simply write like below.

 var childElement = element(by.id('parentElement')).element(by.css('span')); 

Example Program:

describe('Angularjs homepage Locale', function () {
  // Test in Jasmine
  it('Get Locale Date', function () {
    // Entering application url in browser
    browser.get('https://angularjs.org');
    // Get Locale information
    var parentElement = element(by.css('div[title="Localization"]'));
    // Find Date
    parentElement.element(by.css('span')).getText().then(function (text) {
      console.log(text);
    });
  });
});

4. Locating multiple child Elements:

Use the below syntax to get all the span elements under parent DIV.

 var childElements = element(by.id('parentElement').all(by.css('span'));

Example Program:

describe('Angularjs homepage Locale', function () {
  // Test in Jasmine
  it('Get Locale Info', function () {
    // Entering application url in browser
    browser.get('https://angularjs.org');
    // Get Locale information
    var childElements = element(by.css('div[title="Localization"]')).all(by.css('span'));
    // Find Date, Currency, Number
    childElements.then(function (elements) {
      elements.forEach(function (ele) {
        ele.getText().then(function (text) {
          console.log(text);
        })
      })
    });
  });
});

%d bloggers like this: