What is Protractor?

Protractor is a node.js program or we can say it is an end-to-end test framework for Angular 2+ and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.
 Protractor is built on top of WebDriverJS, which uses native events and browser-specific drivers to interact with your application as a user. 
 Protractor is also compatible with Non-Angular apps also. Its work is mostly similar to Selenium.

Why Choose Protractor?

Protractor is mainly designed for Angular and Angular JS Applications. But it also supports non-angular apps.
Protractor was made so anybody can test UI in a way that is simple and fast. And the main advantage of the protractor is it creates fully automated test cases for web applications.
Protractor always executes test cases in a sequential manner. Also, both full and Limited Scope testing is possible through Protractor.

Let’s Start with Installation!

Before starting with the installation of Protractor I assume that you have already installed node.js and npm on your machine. Also, you have installed angular CLI and created a basic app with it.

There are two ways to install protractor:

1) If you want to install protractor globally for all projects, simply execute:

npm install -g protractor

2) If you want to install protractor locally for a single project, simply execute the following command in the projects root directory:

npm install protractor

3) To ensure that protractor is installed correctly, simply execute the following command:

protractor –version

Above command installs two command-line tools. 1) Protractor and 2) Webdriver Manager. As we know Protractor is a testing tool. But Webdriver Manager is a helper tool which easily gets an instance of a Selenium Server running. For angular, we don’t need the selenium server instance. We can create our localhost’s instance manually.
After installing protractor and web driver-manager please check your default browser’s version. Before running a test with protractor it is necessary that the web driver is updated to the latest release. To do that execute the following command:

webdriver-manager update

Running Your First Test

When you will install protractor, it will create and testing environment folder ‘e2e’ in your projects root directory. This environment directory contains basic test case files and protractor’s configuration files.
To run the test case in protractor you need to follow a few steps:
1) Get the scenario and write the test.
2) Set the configuration to run the test.
3) run it!
Let’s take a scenario here for our first test case. Your app starts with the login page. And you need to test whether our app navigates to exact URL of the login page at the initialization of the app.

Now, you have the scenario and the necessary actions which you have to execute in the test case. Here I want to mention that protractor by default use Jasmine framework, with BDD (Behaviour-Driven Development) makes really easy to write the test. So, Let’s go for it.

When you will open the ‘e2e’ folder from the project you will see two default testing files ‘app.po.ts’ and ‘app.e2e-spec.ts’. ‘app.po.ts’ is a page object file and ‘app.e2e-spec.ts’ will contain your test cases.

app.po.ts:-

app.e2e-spec.ts:-

As you can see in app.po.ts file, AppPage class is created by default. In this class, the default function navigateTo is written which navigates to the URL mentioned in it. This function is imported in app.e2e-spec.ts file. Where it will be executed and will return the given URL and protractor automatically redirects to that URL.

Now, your test case is ready, but we need to configure protractor to run the test case. So, you have to open ‘protractor.conf.js’ from ‘e2e’ folder. It will look somewhat like this:

protractor.conf.js:-

As you can see your test case should be included in ‘specs’ array. Also, the baseUrl will always be ‘http://localhost:4200/’ by default. 

Once you are done with the configuration, you just need to run the test case. To do that just execute the following command:

ng e2e

For some people, the above command might not work. So, don’t get stressed. Just use the following command :

protractor ‘e2e/protractor.conf.js’

This will finally execute your test case using a protractor. It will create a chrome browser instance for visual feedback and will also display log messages through the terminal to examine the test case output.

For more information about protractor and protractor methods, check out the official documentation at https://www.protractortest.org/#/

For more information about jasmine framework, check out the official documentation at https://jasmine.github.io/

Thank you for reading it, we will see protractor installation issues and their solutions in the next one!

If you find this post useful, share it with your friends and Colleagues!