Protractor : Locators for Protractor

 The heart of end-to-end tests for webpages is finding DOM elements, interacting with them, and getting information about the current state of your application. This post is an overview of how to locate and perform actions on DOM elements using Protractor.

Overview on locators

Protractor exports a global function element, which takes a Locator and will return an ElementFinder. This function finds a single element - if you need to manipulate multiple elements, use the element.all function.

The ElementFinder has a set of action methods, such as click(), getText(), and sendKeys. These are the core way to interact with an element and get information back from it.

A locator tells Protractor how to find a certain DOM element.

Protractor exports locator factories on the global by object.

Below are most frequently used properties in our projects:

Id: If an object is having id property then use below syntax:

element(by.id('Id property of your object'));

Classname : If an object is having class name as below  

Object class property is : classname =btn btn-primary

then write as  element(by.css(‘.btn.btn-primary’));

Function name: If an object is having an ng-click- function as below

<button ng-click="myFunction()" ng-show="flag">

    Submit

</button>

Then use this syntax to identify object: element(by.css('[ng-click="myFunction()"]'))

Text present on a button: If there is a text on an button then use below syntax

element(by.buttonText("Download AngularJS"));

Link text: If there is a link to identify we can use any of below given 2 options:

Option 1: element(by.linkText('Complete')).click()

Option 2: element(by.css('a[href*="Previous Versions"]')).click();

Table objects: If your applications is having an header row with multiple links and if it doesn’t have any specific properties as below screenshot

Then use below syntax:

by.xpath("//span[contains(@class,'MenuText')][contains(text(),’Text on Link')]"));

Protractor command would be like this:

browser.driver.findElement(by.xpath("//span[contains(@class,'MenuText')][contains(text(),’ ’Text on Link ')]"));

Once protractor was installed you can find examples from the below location:

C:\Users\surendra\AppData\Roaming\npm\node_modules\protractor

We need to save this path to run our scripts on other browsers like IE