I'm trying to click on "Enter Email" link which in inside nested div and also tr and td have same repeater. Below is sample markup:
<div class="table-responsive >
<table id="vertical-view" class="main-table" ng-table="main-ng-table" >
<tbody ng-repeat="tbody-ng-repeat" >
<tr ng-repeat="main-row-ng-repeat-data">
<td ng-repeat="main-col-ng-repeat-data" >
<span class="main-span-title">UserName</span>
</td>
<td ng-repeat="main-col-ng-repeat-data" >
<div class="item-outer-wrapper>
<div class="item-inner-wrapper>
Enter UserName
</div>
</div>
</td>
</tr>
<tr ng-repeat="main-row-ng-repeat-data">
<td ng-repeat="main-col-ng-repeat-data" >
<span class="main-span-title">Email</span>
</td>
<td ng-repeat="main-col-ng-repeat-data" >
<div class="item-outer-wrapper>
<div class="item-inner-wrapper>
Enter Email
</div>
</div>
</td>
</tr>
<tr ng-repeat="main-row-ng-repeat-data">
</tr>
<tr ng-repeat="main-row-ng-repeat-data">
</tr>
</tbody>
<tbody ng-repeat="tbody-ng-repeat" >
</tbody>
<tbody ng-repeat="tbody-ng-repeat" >
</tbody>
</table>
</div>
the code that i'm using to access the link element and click on Enter Email is look like this
var text = element(by.repeater('tbody-ng-repeat').row(0)).all(by.repeater('main-row-ng-repeat-data').row(1)).all(by.repeater('main-col-ng-repeat-data').row(1)).all(by.linkText('Enter Email'));
text.click();
Somehow it not clicking on right link. Is there a way to correctly locate link in nested repeater?
Also I'm getting warning on clicking the link
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
Related
I am creating a friends component that lists users friends based on a response from an endpoint.
I want to render the responses into rows of a table as part of this I would like to use the bootstrap striped-table class
https://getbootstrap.com/docs/4.0/content/tables/#striped-rows
when I do a v-for the table renders correctly but the rows are only showing one background color
This is my template code
<template>
<div>
<h5 class="mb-4">Friends</h5>
<table class="table table-borderless table-striped ">
<tbody>
<div v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</div>
</tbody>
</table>
<div v-if="!UserStore.friends">
<h6>You don't have any friends :(</h6>
Lets solve that Right now!
</div>
</div>
</template>
You should use a template element to render these rows. .table-striped works with sibling rows and in your code the rows are not siblings because they each have a div parent, so each row is seen as the first row.
<tbody>
<template v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</template>
</tbody>
This is what I've done, but I failed to make the alignment same as next picture. Hope someone can help.
<tr>
<td > </td>
<td ><b>Type Description</b></td>
<td align="Center"><b>:</b></td>
<td colspan="3"><input name="txtCAEMGE" value="<%=server.HTMLEncode(StrCAEMDE)%>" type="text" class="NormalInputTextField" size="30" >
<input name="chkHR" type="checkbox"> Tick for disable update from HR system
</td>
</tr>
<tr>
<td > </td>
<td > </td>
<td colspan="3">
<input name="chkHR2" type="checkbox"> Tick for disable update from HR system
</td>
</tr>
I would experiment with putting both checkboxes inside a single container (e.g. a DIV). If you want to position them as a single entity then it will be easier if they are organised in the DOM this way.
e.g.
<body>
<table>
<tr>
<td><b>Type Description</b></td>
<td align="Center"><b>:</b></td>
<td>
<input type="text" value="test value" size="30" >
<div style="display: inline-block;">
<div style="display: block;"><input name="chkHR" type="checkbox"> Tick for disable update from HR system</div>
<div style="display: block;"><input name="chkHR2" type="checkbox"> Tick for disable update from HR system</div>
</div>
</td>
</tr>
</table>
</body>
this seems like a scope problem, but i am not sure. my goal is to highlight a single row in a table. that implies that any previously highlighted row is returned to an unhighlighted state. the rows are created with the ng-repeat directive, like this:
<div id="myFedContents" style="height:320px" ng-controller="Controller2" class="scroller">
<table border="0" class="span12 table table-condensed" style="margin-left:0px" id="tblData">
<thead>
<tr><th>Year</th><th>Name</th><th>Useful Flag</th></tr>
</thead>
<tbody id="allRows">
<tr ng-repeat="item in itemlist | filter:thisText" ng-style="myStyle"> <td class="span1" valign="top"><a tabindex="-1" href="#">{{item.year}}</a></td>
<td id="{{item.id}}"> <a tabindex="-1" href="#" ng-click="myStyle={'background-color':'#cccccc'};">{{item.name}}</a>
</td> <td>
{{item.usefulflag}
</td> </tr>
</tbody>
</table>
</div>
i have code in a .js file that looks like this:
$("tr").mouseenter(function(){
alert("mouseenter");
});
the row in the table header reacts with the alert, but there is no reaction from the rows created by ng-repeat. how do i correct?
You can actually achieve this effect by using an ng-class in conjuction with ng-mouseenter and ng-mouseleave like so:
<div id="myFedContents" style="height:320px" ng-controller="Controller2" class="scroller">
<table border="0" class="span12 table table-condensed" style="margin-left:0px" id="tblData">
<thead>
<tr>
<th>Year</th>
<th>Name</th>
<th>Useful Flag</th>
</tr>
</thead>
<tbody id="allRows">
<tr ng-repeat="item in itemlist | filter:thisText" ng-style="myStyle" ng-class="highlightclass" ng-mouseenter="highlightclass='highlight'" ng-mouseleave="highlightclass=''">
<td class="span1" valign="top"><a tabindex="-1" href="#">{{item.year}}</a>
</td>
<td id="{{item.id}}"> <a tabindex="-1" href="#" ng-click="myStyle={'background-color':'#cccccc'};">{{item.name}}</a>
</td>
<td>
{{item.usefulflag}
</td>
</tr>
</tbody>
</table>
</div>
In this case you don't need the jquery syntax. If you haven't already you should also read https://stackoverflow.com/a/15012542/281335.
<span id="hintText_123" style="display:none">
<table id="hintTable" style="width:100%;border:0px none;padding:0px;border-collapse:collapse;margin:0px;background-color:#7F9DB9;">
<tr style=background-color:#56718A;>
<td style="color:white;font-size:11px;font-weight:bold;padding:2px">
Title
</td>
<td style="width:5%;padding:2px">
<img alt="" src="close.gif" style="width:15px;height:15px" align=middle onclick=parent.hidetip()>
</td></tr>
<tr style="background-color:#8CA7C0;"><td style="color:white;font-size:10px;padding:2px" colspan=2 >Description
</td>
</tr>
</table>
</span>
This is the table i want to display on mouseclick event of the below item
<span style="display:block;" onmouseout="toggleHelp('helpGrp_123',false,'group_field_name_123')" onclick="showhint(document.getElementById('hintTextGrp_123') , this, event, '380px')">
Hello!!!
</span>
</tr>
but the table is not getting displayed on clicking Hello!!!
<script>
function callMe()
{
var tmp = document.getElementById("hintText_123");
alert(tmp.style.display);
tmp.style.display = 'block';
}
</script>
Call on onmousemove="callMe()"
I need to detemine xpath for element mainForm:queryConfigure:fetchReport.
<span id="mainForm:queryConfigure:j_id18">
<table id="mainForm:queryConfigure:j_id19"
class="showReportTable" align="center">
<tbody>
<tr>
<td>
<input id="mainForm:queryConfigure:fetchReport" type="image"
src="images/show_report.gif" name="mainForm:queryConfigure:fetchReport"/>
</td>
</tr>
</tbody>
</table>
</span>
I tried
selenium.click("//input[#id='mainForm:queryConfigure:fetchReport'][#type='image'][#src='images/show_report.gif']");
and
selenium.click("//input[#id='mainForm:queryConfigure:fetchReport']");
One more case:
<div class="tabUnselectedText" align="center">
Notifications
</div>
Id and name attribute values are acceptable locators for method click. See locating elements in the documentation.
selenium.click('mainForm:queryConfigure:fetchReport');