Protractor Automation Test Cases For AngularJS UI

Protractor is a well-known end to end testing framework and it is an open source automation framework, designed especially for AngularJS Web based Applications. This automation tool is also recommended by AngularJS for test cases testing. We know Selenium WebDrivers are used for automation testing cases,  using C#, PHP, Ruby and other languages. In other words, Selenium WebDrivers are used to write the automaton test cases in the code at the backend file. In a similar way, Protractor is a wrapper, built on top of Selenium WebDrivers. It helps to automate the test cases of the AngularJS Web Applications.




Why Protractor?

• This tool is built on the top of Selenium Webdriver.
• Supports very simple syntax to write the automation test cases for AngularJS UI.
• Supports remote call.
• Supports the multiple Browsers at once.
• This tool is especially used for AngularJS
• Supports all the features, which are there in Selenium.

Protractor setup process

To setup protractor, we need to install the four things, given below:

1. Node.js
2. Java JDK file
3. Protractor
4. Update Selenium WebDriver
5. Start Webdriver
6. Writing and testing Protractor automation test cases.

Step 1

Install Node.js in your system. Node.js is an open source framework, and supports cross site platform at the runtime environment both for the Server side and networking apps. Usually for Windows based Web Applications, we do hosting in IIS Server whereas, in case of NodeJS, it acts both for client and Server. In other words, for NodeJS Applications, there is no need to host in IIS Server and the reason is NodeJS is itself a Server.



Select Windows installer and based on your operating system bit size, go with the appropriate bit size and download the setup file. Install it. Once the  installation is successful, we have to check, whether it's successfully installed or not. To check Node.js is installed successfully or not, go to Windows command prompt and type “npm-version”, which will give you the installed NodeJS version. The screenshot, given below, is for your reference:



Step 2

Now, install JAVA JDK. If you don’t have setup file, download it from online. Based on an operating system and bit size, install into your system. Refer to the screenshot, given below, for reference:



Step 3: Protractor Installation can be done in two ways; globally and locally.

You can install protractor, either local to one project or you can install in the global place, where it can be accessible for all the projects. To install local to one project, in Windows command prompt, navigate to the project file location and type the command npm install Protractor. With this command, Protractor is available only to the project, where you installed protractor.

If you install protractor globally, it will be available to all the projects. Let's say, you have one folder location. All your projects are available there. Navigate to that point and type the command npm install -g protractor in Windows command prompt.



If you observe the screenshot, shown above, we are installing Protractor in D:\...\OWASP-POC> location. This means that protractor is available for all the projects, which resides in this location.

Step 4: Once the first three steps are completed successfully, we have to update the Webdriver. During  the Webdriver update process, the following things will take place:

• Selenium standalone driver will be updated and download the latest version in .JAR file format.
• Default driver, which is Chrome driver will be updated and will download the latest version in .ZIP file format.

Here is the command to update the Webdriver, given below:

Type the command Webdriver-manager update in your Windows command prompt. The screenshot is given for reference.

Step 5

Once the Webdriver update completes, we have to start the Webdriver. Once you start the Webdriver, your NodeJS server will be started. Make a note that without NodeJS Server, you can run or test your protractor automation test cases. If you start the Webdriver in Windows command prompt, NodeJS Server will be started in 4444 port number, which is a default port number, where NodeJS Server runs. To start the Webdriver, type the command, given below, in Windows command prompt, as given below:

webdriver-manager start

Please find the screenshot, given below, for the reference:



Keep the Window as it is, because we have to test protractor automation test cases in NodeJS Server. To test them, NodeJS Server should be in the running mode.

Step 6: Now, it's time to write Protractor automation test cases for AngularJS UI and test them. To do so, we need:

1. AngularJS Web page. Let'S say, the file is .HTML file.
2. Protractor automation test cases, which is in .JS file format.
3. Protractor configuration file, which is in .JS file format.
4. Execute Protractor automation test cases.

Let's say, we have a HTML page for the login details. Let's say the file name is Login.HTML. Sample code is given below:

1. Login.HTML
   
   
   
   
2. Protractor test method for login page is given below:
   
   
   • by.binding
     Find an element by text binding.
     
   • by.repeater
     Used to iterate each element by Repeater.
     
   • by.textarea
     Finds an element by textarea tag.
     
   • By.model
     Finds an element by modal property.
     
   • WebElement.all
     Using this, we can get complete object. Using this object, let's say putting the object in the loop, we can get many operations.
     
   • WebElement.evaluate
     Using this function, you can evaluate an angular expressions, which is given in an element.
     
   
   In a similar way, you can find many other functions or the attributes, which are supported by the Protractor tool. For more details, you can follow this link,
   
   Ex:
   
   
   
   
3. In the configuration file, we should configure NodeJS Server, Webdrivers and your Protractor test cases file, which are in .JS file format. If you want to use only one driver to test the test cases, you can configure in capabilities:{} block and if you want to use multiple Webdrivers to test your test cases, you have to configure your drivers in multiCapabilities:[{},{}…] block. You have to configure your test case in specs:[] block. In your case, the file extensions are in .JS format. You can give any name for your configuration file.
   
   Let's say the configuration file name is Conf.js and the sample code is given below:
   
   
   
   
4. Now, open a new command prompt Window and navigate to the project location and type protractor conf.JS. The sample screenshot is given below:
   
   
   

After your test, method runs successfully and you will get the screenshot, shown above:

If all your test cases run successfully, you will get spec count and 0 failure count. Since you have written one test case, from the above screenshot, you can say that 1 spec executed and there is 0 failure.

If any of the written test cases fail, you will get the spec count and fail count is greater than or equal to zero. From the screenshot, shown below, you say that you have written 1 test case and 1 failed.



At the same time, you will get the failed test cases reason also. For reference,  please have a look at the screenshot, shown below: