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
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
