Chaining locators in Protractor

Concept of Chain Locators 

The essence of end-to-end website testing is finding DOM objects, dealing with them and getting details about the application’s current state. Protractor is one of the most commonly used frameworks for AngularJS applications where locators are used as instructions to show Protractor how to locate the element.

Finding the elements is not a significant challenge since there are many ways to do it, for example, by.css, by.id, by.name, by.model,etc.

Using a single locator to find:

– an element: element(by.css('.myclass’)); 

– a list of elements: element.all(by.css('.myclass’));

Considering that for some subelements of the website we are not always able to identify locators as mentioned above, we have to use the Concept of Chain Locators. This means that you can chain multiple locators to select an element in a complex application, such as:

element(by.css('.myclass')).element(by.tagName('tag-within-css'));

Chain Locators to Identify Child Elements

This is an overview of a Protractor test in Jasmine, where we have an example of using a chain locator to reach a child element.

describe('Chain locators', function() {  
  
it('Open Angular js website',function() {
  browser.get('http://juliemr.github.io/protractor-demo/');
  element(by.model("first")).sendKeys("3");
  element(by.model("second")).sendKeys("5");
  element(by.id("gobutton")).click();
element(by.repeater("resultinmemory")).element(by.css("td:nth-child(3)")).getText().then(function(text) {
    console.log(text);
  });
});
});