I am having following problem. I have a table which contains a dropdown in each row corresponsing to first column element of that particular row. But when i try to select an element from a particular dropdown, i am getting element not visible exception.
Here is the page structure :-
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabPopup::content" style="top:auto;right:auto;left:auto;bottom:auto;width:auto;height:auto;position:relative;">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog" class="x1c9">
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<table class="x1cg" border="0" cellspacing="0" cellpadding="0" summary="" data-afr-shaddec="sd$1">
<tbody>
<tr>
<tr>
<td id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog::_cse" class="p_AFResizable x1ct"/>
<td id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog::contentContainer" class="p_AFResizable x1o" tabindex="-1">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog::_ccntr" class="x1cr" style="width:800px;height:450px;position:relative;overflow:auto;">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabpgl1" class="x1a">
<div>
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pgl108" class="x1a" style="margin-left:15px; width:auto;min-height:500px;/*width:750px;height:500px*/">
<div>
<div>
<div>
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:psl2" class="xpq" style="margin-left:15px; width:auto;min-height:450px; /*width:720px;height:450px*/">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:psl2::f" class="xrd" style="left:0px;top:0px;height:181px;right:0px;padding:0px;border-width:0px">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pglks4" class="x1a" style="position:absolute;width:auto;height:auto;top:0px;left:0px;bottom:0px;right:0px">
<div>
<table id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:j_id__ctru13pc10" class="xsk x1a" border="0" cellspacing="0" cellpadding="0" summary="">
<tbody>
<tr>
<td>
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pb78" class="xsk xdn" style="height:165px">
<table class="xu2 p_AFCore p_AFDefault" border="0" width="0" cellspacing="0" cellpadding="0" summary="">
<div class="x1fp p_AFCore p_AFDefault">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pb78::content" class="x5s p_AFCore p_AFDefault">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable" class="xsk xsw" _leafcolclientids="['dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:j_id__ctru16pc10','dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:j_id__ctru18pc10','dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:j_id__ctru21pc10']" style="height:114px" tabindex="0">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable::ch" class="x143" _afrcolcount="3" style="overflow: hidden; position: relative; width: 441px; border-right-width: 0px;">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable::db" class="x13v" _afrcolcount="3" style="position: relative; width: 441px; overflow: hidden; height: 85px; z-index: 1;">
<table class="x13w x14n" cellspacing="0" _startrow="0" _rowcount="10" _selstate="{'3':true,'2':true,'1':true,'0':true,'7':true,'6':true,'5':true,'4':true,'9':true,'8':true,'afrSelectAll':true}" _totalwidth="363" style="table-layout: fixed; position: relative; width: 441px;">
<tbody>
<tr class="x13u " _afrrk="0">
<tr class="p_AFFocused p_AFSelected x13u " _afrrk="1">
<td class="x14j" align="center" nowrap="" style="">
<td class="x14j" align="center" nowrap="">
<span id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:1:j_id__ctru19pc10" class="p_AFFocusTarget p_AFHoverTarget x1z">
The last dropdown is the is the item from where i am trying to select an option but getting this exception .
And below is the code that i used to find it.
WebElement we = driver.waitVisible(By.xpath("//div[contains(#id,'changesTable::db')]/table//span[.='" + currentActivity + "']"));
scrollIntoView(we);
Select select = new Select(driver.waitVisible(By.xpath("//div[contains(#id,'changesTable::db')]/table//span[.='" + currentActivity + "']/../..//select")));
select.selectByVisibleText(newActivity);
Related
<th style="position: relative; top: 0px;">
<div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="2">123</div></th>
<th id="" class="abc_naem" nowrap="" style="position: relative; top: 0px;">
<div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="4">...</div>
<th style="position: relative; top: 0px;">
<div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="5">123</div></th>
<th id="" class="abc_phase" nowrap="" style="position: relative; top: 0px;">
<div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="3">...</div>
how do I select all 'th' element using css selectors that do not have a classname? All the 'th' elements have exactly the same attributes except classname and I need the ones without it. I tried th[classname=''] and that does not do the trick. I tried all the css selection options like 'no-child' etc, still it always returns all th elements
Assuming your HTML is properly formed, you can use :not() with the attribute selector []. Ex th:not([class])
Example:
th:not([class]) {
color: red;
}
<table>
<tr>
<th style="position: relative; top: 0px;">
<div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="2">123</div>
</th>
<th id="" class="abc_naem" nowrap="" style="position: relative; top: 0px;">
<div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="4">123</div>
<th style="position: relative; top: 0px;">
<div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="5">123</div>
</th>
<th id="" class="abc_phase" nowrap="" style="position: relative; top: 0px;">
<div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="3">123</div>
</th>
</tr>
</table>
How to derive the path for the following which in DOJO? It is a dropdown. There are many elements in this page but some elements like this is not getting identified inspite of giving the correct xpath.
Code for selecting the dropdown arrow:
<div class=" dijitSelect dijitValidationTextBox dijitSelectError dijitValidationTextBoxError dijitError dijitSelectHover dijitValidationTextBoxHover dijitSelectErrorHover dijitValidationTextBoxErrorHover dijitErrorHover dijitHover" lang="en" widgetid="accountType" aria-expanded="false">
<table id="accountType" class="dijit dijitReset dijitInline dijitLeft dijitSelect dijitValidationTextBox dijitDownArrowButton" cellspacing="0" cellpadding="0" aria-haspopup="true" role="listbox" data-dojo-attach-point="_buttonNode,tableNode,focusNode" style="-moz-user-select: none;" tabindex="0" aria-required="true" aria-labelledby="addAccountRecordMain_accountType">
<tbody role="presentation">
<tr role="presentation">
<td class="dijitReset dijitStretch dijitButtonContents" role="presentation">
<td class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" role="presentation" data-dojo-attach-point="titleNode">
The element in the drop down arrow:
<div id="accountType_menu" class="dijit dijitMenu dijitReset dijitSelectMenu dijitValidationTextBoxMenu hdxSelectDropDownPopup accountTypePopup dijitMenuActive" style="overflow: hidden; top: 0px; visibility: visible; max-height: none; width: 331px; height: 270px;" role="presentation" widgetid="accountType_menu" tabindex="0">
<table class="dijitReset dijitMenuTable" cellspacing="0" data-dojo-attach-event="onkeypress:_onKeyPress" tabindex="0" role="listbox" style="width: 100%;">
<tbody class="dijitReset" data-dojo-attach-point="containerNode">
<tr id="dijit_MenuItem_43" class="dijitReset dijitMenuItem" tabindex="-1" role="option" data-dojo-attach-point="focusNode" aria-labelledby="dijit_MenuItem_43_text dijit_MenuItem_43_accel" style="-moz-user-select: none;" aria-disabled="false" widgetid="dijit_MenuItem_43">
<tr id="dijit_MenuItem_44" class="dijitReset dijitMenuItem dijitMenuItemHover dijitHover dijitMenuItemFocused dijitMenuItemHoverFocused dijitHoverFocused dijitFocused dijitMenuItemSelected" tabindex="0" role="option" data-dojo-attach-point="focusNode" aria-labelledby="dijit_MenuItem_44_text dijit_MenuItem_44_accel" style="-moz-user-select: none;" aria-disabled="false" widgetid="dijit_MenuItem_44">
<td class="dijitReset dijitMenuItemIconCell" role="presentation">
<td id="dijit_MenuItem_44_text" class="dijitReset dijitMenuItemLabel" data-dojo-attach-point="containerNode" colspan="2">FA-FA</td>
<td id="dijit_MenuItem_44_accel" class="dijitReset dijitMenuItemAccelKey" data-dojo-attach-point="accelKeyNode" style="display: none"/>
The various combinations that I have used for selecting this element :
->
drive.findElement(By.xpath("//div[#id='accountType_dropdown']/div/div[1]/div/table/tbody/tr[2]/td[2]")).click();
drive.findElement(By.xpath("//td[#id='dijit_MenuItem_44_text'][contains(text(),'FA-FA')]")).click();
->
drive.findElement(By.xpath("//div/table[#id='accountType']/tbody/tr/td/div[2]")).click();
drive.findElement(By.xpath("//table[#id='accountType']/tbody/tr/td[2]")).click();
The Error message I am getting:
Exception in thread "main" org.openqa.selenium.ElementNotVisibleException: Cannot click on element (WARNING: The server did not provide any stacktrace information)
I even tried using Webdriver wait and Javascript executer but still not working.
i created directive for making print page.this directive have template page that included button and print template(this have ngRepeat on Result object).print button was clicked fire "click" funciton in Controller of directive then ajax request send to server for get array of object that fill print tamplate.
Mainpage.html
<div ng-class="{'btn':true,'btn-warning':true,'disabled':disableBtn}" data-toggle="modal"
ng-click="getdetail=true;" data-target="#detailModal">order detail</div>
<print-order disable-btn="disableBtn" order="selectedItem"></print-order>
print.template.html
<a ng-click="ctrl.click()" ng-class="{'btn':true,'btn-info':true,'disabled':ctrl.disableBtn}" >
print
<i class="fa fa-print"></i>
</a>
<div id="printSection">
<table style="width: 100%;font:13px tahoma;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="border-bottom: 3px solid black;">
<p>number: </p>
{{ctrl.order.fldTracking}}
</th>
<th>
<img src="/images/receipt-logo.png" alt="">
</th>
<th style="border-bottom: 3px solid black;">
<p>code :</p>
<p> {{ctrl.order.customer.fldMobilePhone}}
<br> {{ctrl.order.fldAtFA.split("-")[0]}}
</p>
</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 3px solid black;">
<td colspan="3" style="padding: 10px;line-height: 20px;">
cutomer : {{ctrl.order.customerAddress.fldContactName }}
<br /> address: {{ctrl.order.customerAddress.fldAddress }}
<br/>mobile : {{ctrl.order.customerAddress.fldMobilePhone}}
<br/> phone : {{ctrl.order.customerAddress.fldTelephone}} </td>
</tr>
</tbody>
</table>
<h1>{{ctrl.title}}</h1>
<table dir="rtl" width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin-top:20px;border-top:2px solid #000000;;border-bottom:2px solid #000000;border-color: #000000">
<tbody>
<tr>
<td width="40%" style="padding-right:10px;font-size: 10px" align="right">name</td>
<td width="20%" style="font-size: 10px" align="center">number</td>
<td width="20%" style="font-size: 10px" align="center">price</td>
<td width="25%" style="font-size: 10px" align="right">price</td>
</tr>
<tr ng-repeat="item in ctrl.Components track by $index">
<td style="padding-right:10px;font-size: 9px">
{{item.offer.fldTitle}}<br>
</td>
<td style="font-size: 12px" align="center">{{item.fldQty}}</td>
<td style="font-size: 10px" align="center">{{item.fldUnitPrice}}</td>
<td style="font-size: 10px;padding: 5px">{{item.fldTotalPrice}}</td>
</tr>
</tbody>
</table>
</div>
printdirective.js
myApp.directive("printOrder",["$window","orderService","$timeout","$compile",function($windows,orderService,$timeout,$compile){
return{
restrict:"AE",
bindToController:{
disableBtn:"=",
order:"="
},
templateUrl:"/Widgets/printOrder.template.html",
transclude: true,
scope:true,
controllerAs:"ctrl",
controller:function(){
this.click=function(){
var popupWinindow =$windows.open("", '_blank', 'width=300,height=500');
orderService.getOrderDetail(this.order.id)
.then(function(result){
this.Components=result;
popupWinindow.document.open();
var el=angular.element("#printSection")
$compile(el)(this);
$timeout(function(){
// console.log(el.html());
popupWinindow.document.write(
`<html>
<head></head>
<body style="direction: rtl;">`+el.html()+` </body>
</html>`);
popupWinindow.document.close();
},500)
});
}
},
}
}])
when i clicked on print button .id of order send to directive then detail of order request of server with ajax that this should fill "#printSection" of template by $compile but this dont binding and Components property is empty.
but this dont binding and Components property is empty.
You cannot call $compile with this, in your case $compile(el)(this);
this != scope
Use:
controller:function($scope){
$compile(el)($scope);
}
Small Demo
Is it typo? var el=angular.element("#printSection")
Did you mean something like:
var warapper = document.querySelector('#printSection');
angular.element(warapper); //...
enter code here.repeat-animation {
-webkit-transition: 0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition: 0.5s linear all;
position:relative;
}
.repeat-animation.ng-enter {
left:10px;
opacity:0;
}
.repeat-animation.ng-enter.ng-enter-active {
left:0;
opacity:1;
}
.repeat-animation.ng-leave {
left:10px;
opacity:1;
}
.repeat-animation.ng-leave.ng-leave-active {
left:-10px;
opacity:0;
}
.repeat-animation.ng-move {
opacity:0.5;
}
.repeat-animation.ng-move.ng-move-active {
opacity:1;
}
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<input class="form-control repeat-animation" type="text" ng-model="customerFilter.name" placeholder="Filter">
</div>
</div>
</div>
<br/><br/>
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-responsive table-striped">
<tr class="repeat-animation">
<th ng-click="doSort('name')">Name</th>
<th ng-click="doSort('city')">City</th>
<th ng-click="doSort('order')">OrderTotal</th>
<th ng-click="doSort('joined')">Join</th>
<th>Orders</th>
<th>Delete</th>
</tr>
<tr ng-repeat="cust in customers |filter:customerFilter | orderBy:sortBy:reverse">
<td>{{ cust.name | uppercase }}</td>
<td>{{ cust.city }}</td>
<td>{{ cust.orderTotal | currency: 'AED ' }}</td>
<td>{{ cust.joined | date}}</td>
<td>View Orders</td>
<td class="center"><span class="glyphicon glyphicon-remove delete" ng-click="remove(cust.id)"></span></td>
</tr>
</table>
</div>
</div>
</div>
<br/>
<div class="container">
<div class="row" >
<div class="col-md-4">
<span class="lead">Total number of customers : {{ customers.length }}</span>
</div>
</div>
</div>
I have included ngAnimate script and dependency also but my animations are not working
can anyone solve my issues please,i edit my question with ng repeat,now can you please suggest and my angular and animate version is 1.5
The class you use for your animations need to be placed on the elements you want animated.
In your case it needs to be placed on the same element as ng-repeat:
<tr class="repeat-animation" ng-repeat="...">
<div class="dataTables_scroll">
<div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
<div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
<table id="DataTables_Table_4" class="dataTable no-footer" role="grid" aria-describedby="DataTables_Table_4_info" style="width: 100%;">
<thead>
<tbody>
<tr class="odd" role="row">
<tr class="even" role="row">
<td class="center-col multiRowSelect sorting_1">
<td>GROUP4</td>
<td class=" center-col">Enterprise Open</td>
<td class=" center-col">0</td>
</tr>
</tbody>
</table>
</div>
Are you absolutely sure you don't like xpath for that? It is awfully powerful and can in fact very well be used to find by text:
Click Element xpath=//*[contains(text(),"GROUP")]/parent::tr