Angular App Development

Why protractor for end-to-end testing in AngularJs?

Are you working on AngularJS applications? Are you searching for a test framework to do End-to-End testing in Angular applications more effectively? Then this post will help you to taste a familiar automation framework specific to AngularJS called Protractor or commonly referred as Protractor AngularJS.

Most of us are familiar with the WebDriver (Selenium) which we use to automate the browsers. But being frustrated with all the waits needed for the WebDriver to sync with the app, causing flakes and prolonged test times? then Protractor is a right framework for you.

Protractor is an Open Source, End-to-End test framework specifically built for AngularJS apps. It was built by a team in Google on top of WebDriverJS with existing technologies such as Selenium, Node.js, and Jasmine which makes writing tests a breeze. It’s also a replacement for the existing AngularJS E2E testing framework called Angular Scenario Runner.

Why Protractor AngularJS?
  1. It’s a wrapper around Selenium WebDriverJS and Selenium Server.
  2. Having new locator strategies and functions specifically for Angular apps.
  3. Automatic waiting can execute the next step in your test the moment the web page finishes pending tasks.
  4. Can take the advantage of the Selenium grid to run multiple browsers at once.
  5. Can run test on both real and headless browsers.
  6. Can use Jasmine or Mocha or Cucumber to write your test.
How does Protractor work?
  1. Jasmine helps to create the test.
  2. Protractor helps to run the test.
  3. Selenium Server helps to manage browsers.
  4. Selenium WebDriver helps to invoke browsers APIs.
Advantages of Protractor
  1. Easy installation and setup.
  2. Easily readable jasmine framework.
  3. Support Data-Driven test.
  4. Include all advantages of Selenium WebDriver.
  5. Auto-Synchronization.
  6. Support parallel testing through multiple browsers.
  7. Excellent speed.
Limitations of Protractor
  1. Basically, a UI driven testing tool, provide only front-end testing.
  2. No detailed test report, other than test log.
  3. Even though easily understandable framework, need more time to script.
  4. More sensitive and Zero Tolerance.

Hope you are eager to know how to setup protractor and start testing your angular app. Simply follow the steps given here to setup the environment.

So you have installed Protractor successfully, right? But we are still not ready to go for a test. Protractor wants two files, to run a test, such as Spec or test file and Config file. Spec file is simply the test file which defines our test cases or suite. The config file is used to define the parameters which will be passed to protractor to execute our Spec file.

All right..! Before going for defining the test, let’s see how to define the config file.

The config file should have the following mandatory parameters:

  1. Selenium server address
  2. Location of spec file
  3. Browser capabilities
  4. Node options

The Spec or test file should be defined using Jasmine framework. The basic structure of test suite should be as follows:

So now we got an idea about the 2 files Spec.js and Conf.js.

  1. conf.js
  2. example-spec.js

Now we are great enough to start our test. We have to move up just 2 more steps to Run the test.

Here’s how

Step 1: Start the WebDriver (webdriver-manager start)

Step 2: Run the conf.js file using protractor (protractor conf.js)

About Perfomatix

We specialize in building highly scalable APIs and Mobile apps and we also have strong expertise in IoT apps, Virtual Reality apps, and Augmented Reality apps. Get in touch with us to find out how we can help in shaping your disruptive idea into a prototype, MVP and finally into a killer product. Visit our success stories section to find out more about some of the startups which made it big with us.