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]
Related
how to execute below type code in angular js
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists" >{{ 'x.'+{{z.field}}} </td>
</tr>`
This is your code
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists">{{ 'x.'+ z.field }} </td>
</tr>
Use bracket notation for the property accessor:
<!--
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists" >{{ 'x.'+{{z.field}}} </td>
</tr>
-->
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists" >{{ x[z.field] }} </td>
</tr>
Bracket notation first evaluates the contents of the brackets and uses that as the identifier of the desired property.
I have the table structured below
<table class="table">
<thead>
<tr>
<th class="checkbox-column"></th>
<th class="main-column main-column--checkbox">Name</th>
</tr>
</thead>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW2</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW1</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
</table>
I have got the root table element by using the below answer https://stackoverflow.com/a/41129924/2833311
But failing to get the nested repeater elements.
getSpecificNestedCell: function(tableObject, rowText, nestedTableObj, rowText1, columnCss) {
var ele = element.all(by.repeater(tableObject)).filter(function(rowElement){
return rowElement.element(by.css("td h4")).getText().then(function(text){
return text.indexOf(rowText) !== -1;
});
}).first();
ele = ele.all(by.repeater(nestedTableObj)).filter(function(rowElement1){
return rowElement1.element(by.linkText(rowText1)).getText().then(function(text1){
return text1.indexOf(rowText1) !== -1;
});
}).first().element(by.css('[' + columnCss + ']'));
findObject.waitUntilReady(ele);
return ele; }
Where as,
tableObject ==> (a, b) in tests
rowText ==> ROW2
nestedTableObj ==> test in testData
rowText1 ==> test.data
columnCss ==> ng-click="checkFunction()"
Using the above code I could able to get the element if it has the single row inside the nested repeated, but it was failing to get the element when the nested repeater has the multiple rows
this should give you what you want I believe
function getSpecificNestedCell(tableObject, rowText, nestedTableObj, rowText1, columnCss) {
return element(by.cssContainingText('tbody[ng-repeat="' + tableObject + '"]', rowText))
.element(by.cssContainingText('tr[ng-repeat="' + nestedTableObj + '"]', rowText1))
.element(by.css('[' + columnCss + ']'));
}
Here is the selector I used working
I have the existing method like below,
getSpecificCell: function(tableObject, rowNumber, columnCss) {
var ele = element(by.repeater(tableObject).row(rowNumber)).element(by.css('[' + columnCss + ']'));
return ele;
}
Is that possible to do the same using the row text instead of rowNumber?
Form the below html I need to get the column value without using the row number
HTML sample:
<table class="table">
<thead>
<tr>
<th class="checkbox-column"></th>
<th class="main-column main-column--checkbox">Name</th>
</tr>
</thead>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW2</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW1</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
</table>
You can use filter() method to filter the array of WebElement. have a look at below example,
getSpecificCell: function(tableObject, expectedRowValue, columnCss) {
var ele =element.all(by.repeater(tableObject).filter(function(rowElement){
return rowElement.element(by.css("td h4")).getText().then(function(rowValue){
return rowValue == expectedRowValue;
})
}).first().element(by.css('[' + columnCss + ']'));
return ele;
}
I'm creating a list of tables with collapsible tbodys. This code works fine but I want to have the first tbody open on default. I've tried ng-init="showReports0" on the table tag, but this doesn't work. I've also tried to predefine $scope.showReports0 = true; in the controller. Can anyone help me out here?
<table ng-repeat="set in reportsData" class="table table-striped hover-table report-list" id="reportList-{{$index}}" ng-init="showReports0">
<thead>
<tr>
<th colspan="3" class="trigger-man" ng-model="showReports[$index]" ng-click="showReports[$index] = !showReports[$index]" style="width: 100%;">{{set.type}}<span class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': showReports[$index], 'glyphicon-chevron-right': !showReports[$index]}"></span></th>
</tr>
</thead>
<tbody ng-hide="!showReports[$index]">
<!-- Start Dynamic Reports Content -->
<tr class="hover-check" ng-class="{'compare-row disabled': item.type=='Comparative' && selectionData.length == 1, 'rep-checked': item.checked}" ng-repeat="item in set.reports | orderBy : 'sequence'">
<td class="no-pad"><div href="" class="popup pop-details no-match" uib-popover-template="nomatchPopover.templateUrl" popover-trigger="outsideClick" popover-placement="auto"></div>
<label class="checkbox checky">
<input type="checkbox" ng-change="reportPush(item.checked, item)" ng-true-value="true" ng-false-value="false" ng-model="item.checked" class="hidden">
</label></td>
<td class="rep-list-td"><div href="" class="popup pop-details no-compare" uib-popover-template="comparePopover.templateUrl" popover-trigger="outsideClick" popover-placement="auto"></div>
{{item.name}}</td>
<td class="cell-details">Details</td>
</tr>
</tbody>
</table>
I am implementing bootstrap dropdown in my Angular application using accordion. When I click on accordion toggle, it is not sliding down and up.
This is my code:
<div class="container-fluid mt100 mr5 ml5">
<div class="row">
<table class='table s12'>
<tr style="background: #e4e9eb;">
<td>Name</td>
<td>Address</td>
<td>City</td>
<td>Edit</td>
<td></td>
</tr>
<tr ng-repeat="listItem in Items">
<td>
{{listItem.name}}
</td>
<td>
{{listItem.address}}
</td>
<td>
{{listItem.city}}
</td>
<td>
<a class="dropdown-toggle" ng-click="isCollapsed = !isCollapsed" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</a>
</td>
</tr>
<tr>
<td colspan="3" class="hiddenRow">
<div class="collapse" collapse="isCollapsed">
<table class="table display" style="border-collapse:collapse;">
<thead>
<tr class='pix2' style="background: #e4e9eb;">
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in listItem.subItems'>
<td>{{item.first}}</td>
<td>{{item.second}}</td>
<td>{{item.third}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
What is causing the issue?