0 Shares 3255 Views

How to automate Angular applications with UFT?

Apr 09, 2017
3255 Views
Automate Angular applications

Recently, software industry has shifted drastically in terms of adopting the refined and improved approaches like  Waterfall model to DevOps model or from traditional testing to being involved into early phase of development(shift left). With all these approaches, application development technologies has also been changed rapidly. AngularJS is one of the rapidly adopting framework, which provides faster development with rich user experience. Now here is the challenge for automation tools to be on top of supporting these changes and have automation tools filled with arsenal to easily take down and automate the tests. It has been observed that automation engineers are moving out from automation tools like Unified Functional testing , TestComplete as these tools lag to provide limited support to these rapid changes and every time we see a new tool/framework coming and capture the arena. 

 

What is Protractor?

Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

see more @ protractortest.org

 

Protractor is most recommended framework for AngularJS applications,but this also comes with limitation and many of the times its bit irritating. Debugging is a great challenge in Protractor , for testing of particular module in Protractor you need to run your complete suite again & again. So I thought to move out from the league and try UFT. Check out the all new UFT 14.0.  It has been improved a lot, and if you leave cost it has all the features that an automation engineer desires. So I tried, and can very much say that we can automate angularjs application with UFT. 

Before we go in detail to understand, how UFT started supporting Angular Based Application , the first question that will come is “what add in you will need to select to ensure that Angular JS feature is enabled?

The answer is no complex: “You need to just select .Net Add in for this.There is no dedicated Add in created for this support.”

 

Let’s See How to Automate Angular applications

To extend the support for Angular JS support HPE has added few more locator to identify the web objects in it list.These are xpath and css properties which are considered as backbone of Selenium , protractor tools.To utilize these properties follow the below steps :

  1. Launch the application in chrome.
  2. Right click on the element for which you need to see the property of the webpage and select the inspect option
  3. After identify the unique property of the element ,you can try the expath or css in the console. Step 4.After cross checking the xpath or css in the console you can use them in your script as below :    

To explain the above steps lets take the example of Upwork,com which has the Angular JS components like the “Search the Jobs” text-box.

Before we go ahead the first question most of you is how to confirm the application has angular component or not.For this just right click on the object and check if the element tag has property starting with the keyword “ng”.In the below snapshot you can see that the input tag has an property name as ng-model which tells us that the application is AngularJS application.

 

Step #1

Launch the application in Chrome.We are going to see how we are going to insert the value in “Find Freelancers” text box highlighted in Red in below picture

 

Step #2

Right click on the “Find Freelancers” textbox and click on Inspect option which will open the below window panel highlighting the object.

 

Step #3

For the “Search Freelancers” text box now analyse the blue highlighted part in above picture.We see it has name,id, ng-model property.Generally id is unique property for each element.So lets try id to find the element. Below snapshot give the side by side way to writing the xpath and css in console.

xpath : $x(“//input[@id=’q’]”)

css: $x(“input[id=’q’]”)

 

Step #4

Use the xpath or css in your script as below :

 

In case of CSS:

 

In case of xpath:

 

In case above two methods don’t work don’t feel left out as UFT has added flexibility for you to fire Javascript directly using the RunScript method.

The above link will click directly on the web button with id given as ‘btnSecurity’ . GetElementsByID is just one of the way.There are multiple other methods on which object identification take place. For more details refer to w3 schools javascript tutorial

I have tried various permutation and combination and these 3 ways has helped me to overcome all the challenges of automation of angular JS application via UFT.

Before i end it i will like to thanks Alaxhendra Yadav for sharing this approach.

Try this approach and in case of any issue feel free to contact us. Let us know your views on this. Do you have any other idea or tool which you feel would be easy, please comment.

Till then Happy Learning !!!

 

You may be interested

Setting up Web Service Automation Project
Katalon Studio
240 views
Katalon Studio
240 views

Setting up Web Service Automation Project

Saket - Oct 24, 2017

Web services are specific services that can be published and called over the Internet by client applications. Katalon Studio supports functional testing of web services. This topic…

Setting up Mobile Automation Project in MacOS
Katalon Studio
241 views1
Katalon Studio
241 views1

Setting up Mobile Automation Project in MacOS

Saket - Oct 09, 2017

Using Katalon Studio, mobile tester can design automation test for both Android and iOS to run on physical devices, cloud services and emulators. This tutorial explains how…

UFT Jenkins Integration
Unified Functional Testing
795 views
Unified Functional Testing
795 views

UFT Jenkins Integration

Saket - Oct 03, 2017

In our earlier post, we got to know the easy integration of UFT with GIT. This post focuses on integration of UFT and Jenkins. I have also…

Leave a Comment

Your email address will not be published.

Most from this category

Join The Growing Group of 15000+ Test Automation Engineers

Signup for our newsletter and get access to free downloads, as well as tips, tricks and techniques and various test automation resources.
Name
Email Address
Secure and Spam free...