PROTRACTOR TUTORIAL 2– Identify Angular and Non-angular Application

As per Protractor Official Document:- 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.

So before selecting Protractor as front end automation tool, you must need to find if your application is an Angular application or not.

If is also possible to automate a non-angular application using Protractor but you can not use built in super features of Protractor like automatic waiting. We will see that later.

There are two best ways to identify an angular application:-

1. By running specific commands in console of browser.
2. By using a chrome/firefox extension called Wappalyzer.

Using commands:-

Steps:-

1. Launch desired application in a browser.
2. Navigate to console in developer tool.
3. Type “getAllAngularRootElements()[0].attributes[“ng-version”] ” and hit enter. If your application is an Angular application, it will give you angular version used in building application.

Mobikwik:-

But the problem with above command is that , it will work only for Angular application not for AngularJS application. For AngularJS application, you need to use “window.angular.version” command. For example:- Upwork is an AngularJS application. You can try both commands and see the difference.

So, you should run both the commands and try. If your application is non-angular you will get “Uncaught ReferenceError” as shown above.

Using Wappalyzer:-

Wappalyzer is a cross-platform utility that uncovers the technologies used on websites. 

According to me, it is best chrome/firefox extension to find if an application is Angular/AngularJs. It can identify both Angular and AngularJS applications. You need to install it as a plugin in chrome or firefox from here or you can directly search and install in browse. For example:- In chrome, navigate to “chrome://extensions/ ” and search for Wappalyzer. I will not explain step by step process of installing an extension in browser here. Kindly Google it.

After installation, you need to restart (If required). You will see an icon at top right side. It will dark greyed until any URL is loaded in tab.

Now launch Mobikwik URL, and observe the above icon.

Click on icon now, you will see below screen:-

You can see “Angular” under JavaScript Framework.

Note:- You will notice that icon will not be changed to “Angular” for AngularJS application. It will generally changes for only Angular applications. It is always good to click on icon and see.

For example:- Hit Super calculat URL as :-

http://juliemr.github.io/protractor-demo/

It is an AngularJs application and Wappalyzer icon is not changed to Angular. So click on icon and see in details.

Hope you are clear. Let me know in comments if any doubt.

More on Protractor in upcoming posts. Stay tuned and keep learning with me.

#ThanksForReading