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.
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"))
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"))
Class Name Locator
Class Name locator provides the element, which matches the values specified in the attribute name “class”.
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"))
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"))
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"))
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))
2. Tag and Class
findElement(By.cssSelector(tag.class))
3. Tag and Attribute
findElement(By.cssSelector(tag[attribute=value]))
4. Tag, Class, and Attribute
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']
Take a look at the below syntax with contains.
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()
| 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!
