How to automate Angular applications with UFT?

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 :    

 Browser(browsername).Page(PageName).TypeOfObject("css:="&expression) or
 Browser(browser name).Page(Page Name).TypeOfObject("xpath:="&expression).

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:

objCSSLocator="input[id='q']"
Browser("browser").Page("Page").WebEdit("css:="&objCSSLocator).Set "Automated360"

In case of xpath:

objCSSLocator="//button[@id='search-box-el']"
Browser("browser").Page("Page").WebEdit("xpath:="&objCSSLocator).Set "Automated360"

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.

Browser("browser").Page("Page").RunScript("document.getElementById("btnSecurity").Click();")

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 !!!