Locators are used in end to end tests for webpages in finding DOM elements. It gets information about the current state of your application. We will have an overview of how you can use locators and perform the actions with Protractor in your Angular application. And we will see what are key advantages of using Protractor over selenium.

[vc_row][vc_column][vc_column_text]

We will discuss the different types of locators in both protractor and Selenium, the pros and cons, and find which are most suitable for angular and non-angular.

Let’s dive in.

What is Protractor?

Protractor is an open source end to end testing framework used for Angular application. It was developed by Google to support Angular applications. It works as a solution integrator combining powerful tools and technologies such as Selenium, WebDriver, Mocha, Cucumber, and NodeJS. Now, It supports both Angular and Non- Angular applications.

Features of Protractor

Angular Specific locators

Extensibility

Supports IDE and Editors

Cross-browser

Headless Browser

Parallel execution

Reporting Plugins

Multiple Assertion libraries

Cloud testing platform

Common Locators between Protractor and Selenium

ID Locator

IDs are unique for each element. It is commonly used and the most reliable locator. ID locators are the fastest and considered the safest locators among other locators.

id = id of the element

findElement(By.id("IdName")) 1 findElement ( By . id ( "IdName" ) )

Name Locator

Locating elements using Name is the same as locating elements using ID locator.

These are not unique on a page. If there are multiple elements with the same Name locator, then the first element on the page is selected. The test may fail if another element with the same Name locator is present on the web page or added by the developers in the later stages.

Name = Name of the element

findElement(By.name("Name")) 1 findElement ( By . name ( "Name" ) )

Class Name Locator

Class Name locator provides the element, which matches the values specified in the attribute name “class”.

findElement(By.className("Element Class")) 1 findElement ( By . className ( "Element Class" ) )

Tag Name Locator

Tag Name locator is used to find the elements matching the specified Tag Name. It is very helpful when we want to extract the content within a Tag.

findElement(By.tagName("HTML Tag Name")) 1 findElement ( By . tagName ( "HTML Tag Name" ) )

Link Text Locator

If there are multiple elements with the same link text, then the first one will be selected. This Link Text locator works only on links (hyperlinks).

findElement(By.linkText("LinkText")) 1 findElement ( By . linkText ( "LinkText" ) )

Partial Link Text

In some situations, we may need to find links by a portion of the text in a Link Text element and contains. In such situations, we use Partial Link Text to locate elements.

findElement(By.partialLinkText("partialLinkText")) 1 findElement ( By . partialLinkText ( "partialLinkText" ) )

CSS Selector Locator

CSS selector is the most preferred Locator that makes the execution of the script faster compared to the XPath locator. This locator is always the best way to locate elements on the page.

The following are some of the mainly used formats of CSS Selectors.

1. Tag and ID

findElement(By.cssSelector(tag#id)) 1 findElement ( By . cssSelector ( tag #id))

2. Tag and Class

findElement(By.cssSelector(tag.class)) 1 findElement ( By . cssSelector ( tag . class ) )

3. Tag and Attribute

findElement(By.cssSelector(tag[attribute=value])) 1 findElement ( By . cssSelector ( tag [ attribute = value ] ) )

4. Tag, Class, and Attribute

findElement(By.cssSelector(tag.class[attribute=value])) 1 findElement ( By . cssSelector ( tag . class [ attribute = value ] ) )

XPath Locator

XPath is designed to allow the navigation of XML documents, with the purpose of selecting individual elements, attributes, or some other part of an XML document for specific processing. XPath produces reliable locators, but in performance wise it is slower (especially in IE older versions) compared to CSS Selector.

Syntax

Here is the basic Syntax you can use.

Xpath=//input[@type='text'] Xpath= //label[@id='message23'] Xpath= //input[@value='RESET'] Xpath=//*[@class='barone'] Xpath=//a[@href='http://gmail.com/'] Xpath= //img[@src='//cdn.facebook.com/images/home/java.png'] 1 2 3 4 5 6 Xpath = //input[@type='text'] Xpath = //label[@id='message23'] Xpath = //input[@value='RESET'] Xpath = //*[@class='barone'] Xpath = //a[@href='http://gmail.com/'] Xpath = //img[@src='//cdn.facebook.com/images/home/java.png']

Take a look at the below syntax with contains.

Xpath=//*[contains(@name,'btn')] Xpath=//*[contains(text(),'here')] Xpath=//*[contains(@href,gmail.com')] 1 2 3 Xpath = //*[contains(@name,'btn')] Xpath = //*[contains(text(),'here')] Xpath = //*[contains(@href,gmail.com')]

An additional locator strategy specifically used only in Protractor for angular sites.

by.model() by.binding() by.exactBinding() by.repeater() by.exactRepeater() by.buttonText() by.partialButtonText() by.cssContainingText() by.options() 1 2 3 4 5 6 7 8 9 by . model ( ) by . binding ( ) by . exactBinding ( ) by . repeater ( ) by . exactRepeater ( ) by . buttonText ( ) by . partialButtonText ( ) by . cssContainingText ( ) by . options ( )

Locators Syntax Description Example by.model() element(by.model (‘person.name’)).click(); Locates the element by model attribute value given <p ng-bind=”person.name”></p> by.binding() var eleName = element (by.binding(‘person.name’)) ;expect(eleName.getText()). toBe(‘Robert’); Binding locator is used to locate the element using bind attribute value given <p ng-bind=”person.name”></p> by.exactBinding() expect(element (by.exactBinding(‘person.name’)) .isPresent()). toBe(true); Same as ng-bind locator, But with exact string/value <p ng-bind=”person.name”></p> by.buttonText() element(by. buttonText (‘Show Result’)).click(); It is used to locate an element using the text on button tag <button>Show Result</button> by.partialButtonText() element (by.buttonText (‘Show’)).click(); Locates the element using the partial text present in the button <button>Show Result</button> by.repeater() var eleID = element(by. repeater(‘product info’) .row(0)); expect(eleID.getText()) .toBe(‘101’); Repeater locator is used to locate the elements with ng-repeat attribute in it. <tr ng-repeat=”product info”>

<td>{{prod.id}}</td>

<td>{{prod.name}}</td>

<td>{{prod.quantity}}</td>

</tr> by.exactRepeater() expect (element (by.exactRepeater (’emp in employee_names’)). isPresent()). toBe(true); Locates element with ng-repeat attribute with exact string present in it <li ng-repeat=”emp in employee_names”></li> by.cssContainingText () element (by.cssContainingText (‘.name’, ‘Mike’)); Locates the element with text in it using css selector <li class=”name”>Mike</li> by.options() var allOptions = element.all (by.options (‘options in list’)); expect(allOptions.count()) .toEqual(3); Locates the element with ng-option attribute in it <select ng-options=”options in list”>

<option value=”0″>Option 1</option>

<option value=”1″>Option 2</option>

<option value=”2″>Option 3</option>

</select>

Protractor vs Selenium

We look into some of the basic pros and cons you should know about Protractor and Selenium.

Protractor Selenium Protractor supports automation testing for angular based web pages. But, it’s a wrapper for Web driver JS Selenium supports automation very well for all web-based applications as well as angular sites It has certain advantages in case of an angular specific locator strategy. Provides more options to work with Angular directives (i.e. angular specific locator strategy) Works even if you are testing an Angular JS website, but the issue is with dealing with page synchronization issues. It is compatible only with JavaScript/Typescript Selenium code is compatible with 6 popular programming languages Python, C#, Java, Perl, PHP, Ruby

Conclusion

For Angular applications, Protractor does interact with a browser through the Selenium WebDriver. Protractor provides a really convenient API and has unique Angular-specific features like Angular specific element locating strategies. You should also note that Protractor is nothing but an extra layer on the top of Selenium to make testing Angular JS applications easier.

If you are interested in E2E testing, Get to know what it is in detail. Take a look at this article on Introduction To E2E Testing In Angular CLI Using Protractor.

Like to read and stay updated on Development technologies. Subscribe for the exclusive weekly newsletters.

Looking for a highly skilled Angular developer for your project? Agira Technologies offers an extensive service with experts in industries. Hire an Angular Developer now!

Turn your vision to magnificent reality With Our Web and Mobile Solutions Request Quote

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_raw_js]JTNDc2NyaXB0JTIwdHlwZSUzRCUyMnRleHQlMkZqYXZhc2NyaXB0JTIyJTNFJTBBJTJGJTJBJTBBJTIwJTJBJTIwalF1ZXJ5JTIwVGFibGUlMjBGbGlwJTIwU2Nyb2xsJTIwcGx1Zy1pbiUwQSUyMCUyQSUyRiUwQSUyNC50YWJsZUZsaXBTY3JvbGwlMjAlM0QlMjBmdW5jdGlvbiUyOHNlbGVjdG9yJTI5JTdCJTBBJTIwJTIwdmFyJTIwJTI0b2JqJTIwJTNEJTIwJTI0JTI4c2VsZWN0b3IlMjklM0IlMEElMEElMjAlMjBmdW5jdGlvbiUyMG1hdGNoQ2VsbHNIZWlnaHRzJTI4Y29sdW1uSW5kZXglMjklN0IlMEElMjAlMjAlMjAlMjBjb2x1bW5JbmRleCUyQiUyQiUzQiUwQSUyMCUyMCUyMCUyMHZhciUyMCUyNGNlbGxzRm9yQ29sJTIwJTNEJTIwJTI0b2JqLmZpbmQlMjglMjd0aCUzQW50aC1jaGlsZCUyOCUyNyUyQmNvbHVtbkluZGV4JTJCJTI3JTI5JTJDJTIwdGQlM0FudGgtY2hpbGQlMjglMjclMkJjb2x1bW5JbmRleCUyQiUyNyUyOSUyNyUyOSUzQiUwQSUyMCUyMCUyMCUyMHZhciUyMGNvbHVtbkNlbGxzSGVpZ2h0cyUyMCUzRCUyMCUyNC5tYXAlMjglMjRjZWxsc0ZvckNvbCUyQyUyMGZ1bmN0aW9uJTI4dmFsJTI5JTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTI0JTI4dmFsJTI5Lm91dGVySGVpZ2h0JTI4JTI5JTNCJTBBJTIwJTIwJTIwJTIwJTdEJTI5JTNCJTBBJTBBJTIwJTIwJTIwJTIwdmFyJTIwY29sdW1uSGlnaGVzdENlbGwlMjAlM0QlMjBNYXRoLm1heC5hcHBseSUyOG51bGwlMkMlMjBjb2x1bW5DZWxsc0hlaWdodHMlMjklM0IlMEElMEElMjAlMjAlMjAlMjAlMjRjZWxsc0ZvckNvbC5jc3MlMjglMjdoZWlnaHQlMjclMkMlMjAxMDAlMjAlMkIlMjdweCUyNyUyOSUzQiUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCU3RCUwQSUwQSUyMCUyMHZhciUyMCUyNHRoJTIwJTNEJTIwJTI0b2JqLmZpbmQlMjglMjd0aCUyNyUyOSUzQiUwQSUyMCUyMCUyNHRoLmVhY2glMjhmdW5jdGlvbiUyOGluZGV4JTI5JTdCJTBBJTIwJTIwJTIwJTIwbWF0Y2hDZWxsc0hlaWdodHMlMjhpbmRleCUyOSUzQiUwQSUyMCUyMCU3RCUyOSUzQiUwQSU3RCUwQSUwQSUyNC50YWJsZUZsaXBTY3JvbGwlMjglMjcudGFibGUtZmxpcC1zY3JvbGwlMjclMjklM0IlMEElMEElM0MlMkZzY3JpcHQlM0UlMEElMEE=[/vc_raw_js][/vc_column][/vc_row]