Tuesday, 31 May 2016

Can we use Selenium WebDriver to Automate AngulatJS Applications?

    YES.

     Selenium Interacts with Web Elements ( I.e. HTML content ) to perform Actions.
     So, underlying technology is not a constraint for selenium. It works as expected.

     Then Why Protractor?
     Let’s look at a simple AngulerJS application view souce.

<!DOCTYPE HTML>
<html ng-app="calculator">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="./calc.js"></script>
<link href="./bootstrap.css" rel="stylesheet">
<title>Super Calculator</title>
</head>
<body class="ng-cloak">
<div ng-controller="CalcCtrl" class="container">
<div>
<h3>Super Calculator</h3>
<form class="form-inline">
<input ng-model="first" type="text" class="input-small"/>
<select ng-model="operator" class="span1"
ng-options="value for (key, value) in operators">
</select>
<input ng-model="second" type="text" class="input-small"/>
<button ng-click="doAddition()" id="gobutton" class="btn">Go!</button>
<h2>{{latest}}</h2>
</form>
</div>
<h4>History</h4>
<table class="table">
<thead><tr>
<th>Time</th>
<th>Expression</th>
<th>Result</th>
</tr></thead>
<tr ng-repeat="result in memory">
<td>
{{result.timestamp | date:'mediumTime'}}
</td>
<td>
<span>{{result.first}}</span>
<span>{{result.operator}}</span>
<span>{{result.second}}</span>
</td>
<td>{{result.value}}</td>
</tr>
</table>
</div>
</body>
</html>

Were you able to see any known Attributes in any Tags to locate an element using By class methods?
I.e ID, NAME etc.

NO rite?

Were you able to see anything new in this code?

Attributes:
ng-controller
ng-model
ng-options
ng-repeat

Can we perform required Actions on the elements which contains above attributes?
Yes, But Could be quite difficult way to achieve required actions.

Again, Why these new attributes? Who brought in?
AngulerJS development team, so there is no escape.

So, will be happy if I give you easier way to locate elements and perform Actions on top of it.
Yes. 

Eg:
         1.       element.all( by.repeater('result in memory').column('{{ result.operator }}'));
         2.       element(by.css('some-css'));
         3.       element(by.model('item.name'));
         4.       element(by.binding('item.name')); 
more info: http://www.protractortest.org/#/api


Salient features of the Protractor Automation tool:

1. Built on the top of WebdriverJS and Selenium server
2. Introduced new simple syntax to write tests
3. Allows running tests targeting remote addresses
4. Can take advantage of Selenium grid to run multiple browsers at once
5. Can use Jasmine or Mocha to write test suites









Posted by at
Labels: , , ,

1 comment:

Subscribe to: Post Comments (Atom)