What is Protractor?

The Protractor is an automation testing tool for web applications testing; combining powerful technologies such as Jasmine, Selenium Webdriver, Node.js etc.

The Protractor testing tool is an end to end behavior-driven testing framework. It works both with AngularJS and non-AngularJS applications as well.

Protractor vs Selenium WebDriver

What makes Protractor different from Selenium WebDriver? Take a minute to answer these questions:

  • Is it a struggle to determine when exactly the web page is finally loaded (All of the asynchronous elements are ready and processed)?
  • Are you tired of adding waits and sleeps to your code?
  • Do you want to get rid of locate the angular elements?
  • Frustrated with locating elements with changing Ids?
  • Do you want to create your own locator?

If you answered Yes to these questions, Protractor can help.

Features

It’s a wrapper built on top of Selenium Webdriver and provides all the capabilities of Selenium along with many useful additions. It offers:

1) WaitForAngular

Instruct WebDriver to wait until Angular has finished rendering and has no outstanding $http or $timeout calls before continuing. Protractor automatically applies this command before every WebDriver action.

It means that there is no need to manually add waits to your script and Protractor will automatically wait for the web elements to load and only then executes the next steps.

2) Compact locate syntax

It has the ability to export a global function element, which takes a locator and will return an ElementFinder. This ElementFinder has a set of action methods, such as click(), getText(), sendKeys() etc. This is the core of how to interact with the element and get information from it.

This global function helps to reduce the element locating syntax. Take a look at the following statement to locate the element in both Selenium WebDriver and Protractor:

Copy to Clipboard

3) New locator strategies

Protractor are adding some new locator strategies and functions to help locate the Angular elements are: By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate, etc.

How-To

As it is a node.js program, you need to install node.js to get it running.  Protractor installation cmd:

Copy to Clipboard

You need to install the selenium server and ChromeDriver. Use the following command:

Copy to Clipboard

Now you can initialize your first project, and Implement your test actions.

Copy to Clipboard

Assertions are an important part of the automation scripts. Annotations are also very useful in effectively tagging certain methods in a class to have special meaning.

It provides a variety of assertions & annotations and in addition to that, also provides the ability to create your own assertions.

Copy to Clipboard

NPM provides various reporting packages, with which screenshot of each test step can be captured and also, once the test run completes, it will generate an HTML report for you. All you have to do is to install those packages by cmd:

Copy to Clipboard

Java/Python instance

If you are not familiar with the JavaScript framework and syntax. You can also implement your Selenium WebDriver instance by referring Protractor core wait methodology in Java or Python.

Here is the demo code which achieve using Python, Selenium WebDriver, RobotFramework

Copy to Clipboard

Wait for angular 1

Copy to Clipboard

Wait for angular 2

Copy to Clipboard

Conclusion

With the emergence of more and more rich front-end frameworks, the front-end automation testing framework should be enhance/upgrade accordingly to meet the needs of testing and ensure product quality.

Find us if you want to know more about Protractor and WebDrider.