Protractor find element inside parent - angularjs

I have a protractor test where I create a user and it is then added into a table of users. I then want to find the user that was created and click the edit/delete buttons. The user could be in any of the rows so I don't want to hardcode the test to a specific row just in case it's not in the specified row.
html
<tr ng-repeat="user in users | orderBy:sortType:sortReverse | filter:query track by $index">
<td class="text-center" title="{{$index + 1}}"><span class="section-index" id="index">{{$index + 1}}</span></td>
<td title="{{user.username}}">{{user.username}}</td>
<td title="{{user.email}}">{{user.email}}</td>
<td title="Role">
<span class="label" ng-class="{'admin': user.role.name == 'ROLE_ADMIN',
'user': user.role.name == 'ROLE_USER', 'trainer': user.role.name == 'ROLE_TRAINER',
'reviewer': user.role.name == 'ROLE_REVIEWER'}">
{{user.role.name | roleFilter: true}}
</span>
</td>
<td title="Created">{{user.creationDate | date:"dd MMM yyyy"}}</td>
<td class="text-center" title="Edit">
<span class="btn-details standard pull-right" ng-click="editUserClicked(user.id)">Edit</span>
</td>
<td title="Delete">
<span class="btn-details warning pull-right" ng-click="deleteUserClicked(user)">Delete</span>
</td>
</tr>
user-spec.js
var editedUserCell = element(by.css('td[title="' + EDITED_EMAIL + '"]')).getWebElement();
var deleteButton = editedUserCell.getDriver().findElement(by.css('[ng-click="deleteUserClicked(user)"]'));
Using the example from http://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.getDriver, it finds the first button on the page and not the one inside the parent, can anyone help?

Related

How do I get all results where at least one property contains the parameter passed in the filter? (angullarjs)

I am trying to convert my paginated table from individual columns to a search all columns that contain the result.
//Newly added input that I want to query all columns
<input type="text" ng-model="searchCriteria" />
<table ng-table="tableParams" class="table table-condensed" show-filter="true">
<tr ng-repeat="memberInfo in $data">
<td data-title="'Name'" filter="{ Name: 'text'}" sortable="'Name'">
{{memberInfo.Name}}
</td>
<td data-title="'Location'" filter="{ Location: 'text'}" sortable="'Location'" style="width: 275px;">
{{memberInfo.Location}}, {{memberInfo.country}}
</td>
<td data-title="'Phone'" >
{{memberInfo.Phone}}
</td>
<td data-title="''" style="width: 30px;">
<button type="button" class="btn btn-xs btn-info" title="View on map" ng-click="goToMarker(memberInfo.Key)">Map</button>
</td>
</tr>
</table>
Above you can see I have each column has it's own filter, but I want to remove them and have a single catch all.
I have added a screen shot below of a visual mockup
Thank you.
UPDATE
I got the filters to work, but not with the pagination...
<input type="text" class="form-control" placeholder="Search name, phone, or location" ng-model="queryFilter" />
<table ng-table="tableParams" class="table table-condensed" show-filter="true">
<tr ng-repeat="memberInfo in $data | filter:query">
<td data-title="'Name'" sortable="'Name'">
{{memberInfo.Name}}
</td>
<td data-title="'Location'" sortable="'Location'" style="width: 275px;">
{{memberInfo.Location}}, {{memberInfo.country}}
</td>
<td data-title="'Phone'" >
{{memberInfo.Phone}}
</td>
<td data-title="''" style="width: 30px;">
<button type="button" class="btn btn-xs btn-info" title="View on map" ng-click="goToMarker(memberInfo.Key)">Map</button>
</td>
</tr>
</table>
And in the controller I have added this method
$scope.query = function (memberInfo) {
return memberInfo.Name.toLowerCase().indexOf($scope.queryFilter.toLowerCase()) !== -1
|| memberInfo.Location.toLowerCase().indexOf($scope.queryFilter.toLowerCase()) !== -1
|| memberInfo.Phone.toLowerCase().indexOf($scope.queryFilter.toLowerCase()) !== -1
|| memberInfo.Country.toLowerCase().indexOf($scope.queryFilter.toLowerCase()) !== -1
;
};

How to get multiple <td> values in single xpath in selenium

I am stuck in creating xpath which is under TR tag and
i want to get the value of td[2], td[3], td[4] and td[5] from each TR tag. See below HTML.
<tbody>
<tr role="row" class="odd">
<td><img src="/Content/Uploaded//Profile//MasterAdmin/ashishadmin/95.jpg" class="profilepic img-responsive img-circle"></td>
<td>Ashish A Admin</td>
<td>ashishad#mailinator.com</td>
<td></td>
<td>ashishadmin</td>
<td><label class="chkcontainer pointer-none"><input type="checkbox" class="chk" checked="checked"><span class="checkmark"></span> </label></td>
<td><i class="fa fa-circle text-warning"></i></td>
<td>EditDelete</td>
</tr>
<tr role="row" class="even">
<td><img src="/Content/Uploaded//Profile//MasterAdmin/shpatel/download.jpg" class="profilepic img-responsive img-circle"></td>
<td>Shree A Patel</td>
<td>shpatel#mailinator.com</td>
<td>8767676766</td>
<td>shpatel</td>
<td><label class="chkcontainer pointer-none"><input type="checkbox" class="chk" checked="checked"><span class="checkmark"></span> </label></td>
<td><i class="fa fa-circle text-warning"></i></td>
<td>EditDelete</td>
</tr>
<tr role="row" class="odd">
<td><img src="/content/custom/img/default-user.jpg" class="profilepic img-responsive img-circle"></td>
<td>Ashish G Savaliya</td>
<td>ashish#mailinator.com</td>
<td>7897897890</td>
<td>asavaliya</td>
<td><label class="chkcontainer pointer-none"><input type="checkbox" class="chk" checked="checked"><span class="checkmark"></span> </label></td>
<td><i class="fa fa-circle text-warning"></i></td>
<td>EditDelete</td>
</tr>
</tbody>
Want to create xpath of the only 2,3,4, and 5 TD values from each row. see below image of all the required data which i want to print using the xpath.
//tr/td[position() >= 2 and position() <= 5]

Getting values of specific tr in table repeated through angular JS using filters

I am calling an API wich will return a json object. Based on some conditions I am getting values from this Json object and displaying them in a table which can be repeated using angular JS. Now I need to get data of each table but I don't know how as some data is filtered. Below is the table:
<table class="table">
<thead>
<tr>
<th>Relation
</th>
<th>Date Of Birth
</th>
<th >In Hospital
</th>
<th >AMB & PM
</th>
<th > Total
</th>
</tr>
</thead>
<tr ng-repeat="member in CalculatorResponse">
<td>
{{member.Relation}}
</td>
<td>{{member.dateOfBirth}}
</td>
<td>
<span ng-repeat=" InHosp in member.InHospital | filter:{strClassName: class.className}">
{{InHosp.intClassValue}}
</span>
</td>
<td >
<span ng-repeat=" OutHosp in member.OutHospital | filter:{OptionType: Option_Select.type}">
<span ng-model="AMBPMVal" ng-repeat=" Benefits in OutHosp.Benefits | filter:{intExcess: CoBenefitsSelect.type}">
{{Benefits.intAMBPM}}
</span>
</span>
</td>
<td> Total value (unable to calculate it) {{InHosp.intClassValue}} + {{Benefits.intAMBPM}}
</td>
</tr>
</table>
<input type="button" value="Generate" ng-click="Generate()"/>
So the main problem is that I am trying to get all values of the table when generate button is clicked, but I cannot get the filtered values;
I did this but it is not working:
<span ng-repeat=" OutHosp in (filteredHosp = (member.OutHospital | filter:{OptionType: Option_Select.type}))">
<span ng-repeat=" Benefits in (filteredBenefits = (OutHosp.Benefits | filter:{intExcess: CoBenefitsSelect.type}))"> {{Benefits.intAMBPM}} </span>
<%--{{filteredBenefits[0].intAMBPM}}--%> </span> <%--{{filteredHosp[0].Benefits}}--%>
--> filtered benefits and filteredHosp can be only accessed in the commented region, if you put them outside the 2 spans you will get nothing.
I am also trying also to calculate the total of In Hospital and AMB&M but I cannot as I don't know how to get their values after filter.
Any suggestion?
They are not available, not because of filter but because they are outside the scope of ng-repeat. You can either do your calculations inside ng-repeat or iterate through your list and do calculations in your controller.

Why I get gap in table rows?

I work on my angularjs project.
I use ng-repeat to create rows in table.
Here is plunker.
Here is html template:
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="object in arr1 track by object.id">
<td class="pull-left" ng-bind="object.name"></td>
<td ng-class="{'wrapper':showReview != $index }">
<div ng-class="{'slide':showReview != $index}">
<a class=" btn btn-default btn-xs" ng-click="showReview = showReview == $index ? -1 : $index;"><i class="glyphicon glyphicon-camera"></i></a>
<a class=" btn btn-default btn-xs" ng-click="showInspections = !showInspections; showReview = showReview == $index ? -1 : $index;"><i class=" glyphicon glyphicon-list-alt"></i></a>
</div>
</td>
</tr>
<tr ng-repeat-end ng-if="showInspections && showReview == $index">
<td colspan="">
{{t}}-{{$index}}
</td>
</tr>
</tbody>
</table>
Here is controller:
app.controller('MainCtrl', function($scope) {
$scope.arr1 = [{id:'124',name:'qqq'},
{id:'589',name:'www'},
{id:'45',name:'eee'},
{id:'567',name:'rrr'}];
$scope.t=100;
});
Here how it looks in the view:
You can see in picture above I have gap between the rows and I cant figure out why I get this gap?
You have one th in head and one td in second row you need to add colspan="2" on both of them.
Also do not use class="pull-left" with td take another element inside td and make it pull-left

how make ng repeat run only 10 times

I have to modify the UI for a Leshan Client. Currently the way it is setup, it displays every instance of the client in the browser. How do i make it display only 10 clients, although I will be still creating hundreds of them? I tried to modify the code below for ng repeat and ng click but the only thing that changes is that I stop displaying any of the clients.
<tbody>
<tr ng-repeat="client in clients" ng-click="showClient(client)">
<td><a ng-href="#/clients/{{client.endpoint}}"> <strong>{{client.endpoint}}</strong></a> </td>
<td>{{client.registrationId}}</td>
<td>{{client.registrationDate | date:'medium'}}</td>
<td>{{client.lastUpdate | date:'medium'}}</td>
<td><i class="glyphicon glyphicon-info-sign" tooltip-html-unsafe="{{clientTooltip(client)}}"></i></td>
<td><span ng-class="{hidden: client.secure == false}" class="glyphicon glyphicon-lock" tooltip-html-unsafe="Communication over DTLS"></span></td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="client in clients | limitTo:10" ng-click="showClient(client)">
<td><a ng-href="#/clients/{{client.endpoint}}"> <strong>{{client.endpoint}}</strong></a> </td>
<td>{{client.registrationId}}</td>
<td>{{client.registrationDate | date:'medium'}}</td>
<td>{{client.lastUpdate | date:'medium'}}</td>
<td><i class="glyphicon glyphicon-info-sign" tooltip-html-unsafe="{{clientTooltip(client)}}"></i></td>
<td><span ng-class="{hidden: client.secure == false}" class="glyphicon glyphicon-lock" tooltip-html-unsafe="Communication over DTLS"></span></td>
</tr>
</tbody>
use ng-if
<div ng-repeat="i in values">
<div ng-if="i < 3">Hello</div>
</div>
working example
or use an auxiliar variable just to display the results you want

Resources