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>
For the following link,
<td style="padding-top:3px" align="center">
GNWL200/WL102
<br/>
<a id="17235-SL-GN-0" href="javascript:jpBook($('#17235-SL-GN-0'),'17235','HSRA','SRT','22-9-2017','SL','GN',3,false,0,0,'S');" tabindex="1">Book Now</a>
</td>
If I uses the link as shown below, it succeeds to click
browser.element(link: "Book Now").click
But if I uses the id as shown below it says element is not visible(not present). May I know why?
browser.link(:id, "17235-SL-GN-0").click
Error
Uncaught exception: element located, but timed out after 30 seconds, waiting for #<Watir::Anchor: located: true; {:id=>"17235-SL-GN-0", :tag_name=>"a"}> to be present
C:/Ruby23/lib/ruby/gems/2.3.0/gems/watir-6.8.4/lib/watir/elements/element.rb:633:in `raise_present'
C:/Ruby23/lib/ruby/gems/2.3.0/gems/watir-6.8.4/lib/watir/elements/element.rb:672:in `rescue in element_call'
C:/Ruby23/lib/ruby/gems/2.3.0/gems/watir-6.8.4/lib/watir/elements/element.rb:684:in `element_call'
C:/Ruby23/lib/ruby/gems/2.3.0/gems/watir-6.8.4/lib/watir/elements/element.rb:136:in `click'
C:/Users/rajagopalan.m/RubymineProjects/SeleniumLearning/Rest/TrainTicketBooking.rb:18:in `<top (required)>'
If link is not visible for regular Click() use jsClick:
"arguments[0].click();"
I'm not sure how it looks like in Ruby, but C#, Java looks simillar to:
JavascriptExecutor executor = (JavaScriptExecutor) driver;
executor.executeScript("arguments[0].click();", element);
I found the solution to my question from #yong comment
Actually there are two element present in the page with same id and the first one is invisible and the second one is actual element which I wanted to click, that's what it's throwing the error.
Here is the html file
<td style="padding-top:3px" align="center">
GNWL203/WL105
<br/>
**<a id="17235-SL-GN-0" href="javascript:jpBook($('#17235-SL-GN-0'),'17235','HSRA','SRT','22-9-2017','SL','GN',3,false,0,0,'S');" tabindex="1">Book Now</a>**
</td>
<td style="padding-top:3px" align="center">
<td style="padding-top:3px" align="center">
<td style="padding-top:3px" align="center">
<td style="padding-top:3px" align="center">
<td style="padding-top:3px" align="center">
</tr>
</tbody>
</table>
<span style="font:11px arial;color:red;float:right">* CURR_AVBL : Current Booking Available | RAC : Reservation Against Cancellation | WL # : Wait List | REGRET/WL : No more booking allowed | AVAILABLE : Available | NOT AVAILABLE : Not Available</span>
<br/>
</div>
</div>
<div id="j_idt413" class="rf-p ">
<div id="enqpanelid1" class="rf-p ">
</div>
</span>
<form id="avlAndFareForm" name="avlAndFareForm" method="post" action="/eticketing/trainbetweenstns.jsf" enctype="application/x-www-form-urlencoded">
<input name="avlAndFareForm" value="avlAndFareForm" type="hidden"/>
<div id="avlAndFareForm:trainSchedPanel" style="visibility: hidden;">
<div id="avlAndFareForm:j_idt480" class="rf-p " style="min-height:383px;width:99%;">
<div id="avlAndFareForm:j_idt480_body" class="rf-p-b ">
<ul id="tabul">
<div id="tabcontent">
<div id="c1" class="container-div">
<div id="j_idt382" class="rf-p ">
<div id="j_idt382_header" class="rf-p-hdr ">
<div id="j_idt382_body" class="rf-p-b ">
<table class="t1" cellspacing="0" cellpadding="4px">
<tbody>
<tr>
<tr>
<td style="text-align: left;padding-left: 1em;">
<td style="padding-top:3px" align="center">
GNWL203/WL105
<br/>
**<a id="17235-SL-GN-0" href="javascript:jpBook($('#17235-SL-GN-0'),'17235','HSRA','SRT','22-9-2017','SL','GN',3,false,0,0,'S');" tabindex="1">Book Now</a>**
</td>
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>
I am struggling to grab the artist and track name data from these tables as they are identical! Does anyone know how I can do this? Another thing is picking up URL data, this doesn't seem to return either. I have got all the rest of the fields, just stuck on these, any help would be gladly received. (The info here: <td class="r-pad">)
<tr data-trid="**1350474**" class="ptk-1350474 play-trk">
<td class="tnum-td">
<div class="tnum-ppl-cont">
<div class="tnum">1</div>
<div class="play-fly"></div>
</div>
</td>
<td class="thumb"><div class="thumb-cont"><img src="http://static.example.com/scripts/image.php/44x44/240148.jpg" /><img src="http://w-static.example.com/img/promo_large.png" class="**promo**" /></div></td>
<td class="r-pad">**TRACK NAME** <br /><span class="version">**Original Version** <span class="duration">**(6:40)**</span></span></td>
<td class="r-pad">**Artist Name**, ****Artist Name 2**<br /></td>
<td class="label-e r-pad"><div class="lab-div ellip"><a href="/label/8831/music-label-name" title="**Music Label Name**">**Music Label<**/a></div></td>
<td class="genre-e r-pad"><div class="genr-div ellip"><**a href="/genre/13/country-music**" title="Country Music">**Country Music**</a></div></td>
<td class="rdate r-pad">**2013-11-14**</td>
<td class="drop">
<div class="ttl-drop-menu">
<div class="com-drop-menu">
<div class="fol-div ellip">follow test</div>
<div class="fol-div ellip">follow test</div>
<div class="fol-div ellip">follow test</div>
</div>
</div>
</td>
<td class="buy-stat"><span class="price">**$2.99**</span></td>
</tr>
You can get the track name by doing the next XPath:
//td[#class='r-pad' and contains(a/#href, 'track')]
To get the both artists names, do:
//td[#class='r-pad']/a[#class='com-artists']
To get the price, do:
//td[#class='buy-stat'/a[#class='com-buy']/span[#class='price']
To get the track ID, do:
//tr[contains(#class, 'play-trk')]/#data-trid
I need to click on the textbox next to username . Am unable to find the Xpath for this using webdriver...can I get some help?
here is the html snippet:
<div id="form-1013-body" class="x-panel-body x-panel-body-default x-panel-body-default x-docked-noborder-top x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left" style="padding: 0px; height: 108px; left: 0px; top: 0px; width: 376px;">
<span id="form-1013-outerCt" style="display: table; height: 100%;">
<div id="form-1013-innerCt" class="" style="display:table-cell;height:100%;vertical-align:top;padding:5px 5px 5px 5px">
<table id="textfield-1014" class="x-field x-table-plain x-form-item x-field-default x-anchor-form-item x-form-invalid" cellpadding="0" style="table-layout: auto;">
<tbody>
<tr id="textfield-1014-inputRow">
<td id="textfield-1014-labelCell" class="x-field-label-cell" width="205" valign="top" halign="right" style="">
<label id="textfield-1014-labelEl" class="x-form-item-label x-unselectable x-form-item-label-right" unselectable="on" style="width:200px;margin-right:5px;" for="textfield-1014-inputEl">Username:</label>
</td>
<td id="textfield-1014-bodyEl" class="x-form-item-body " role="presentation" colspan="1">
<input id="textfield-1014-inputEl" class="x-form-field x-form-required-field x-form-text x-form-invalid-field" type="text" autocomplete="off" name="username" aria-invalid="true">
</td>
<td id="textfield-1014-sideErrorCell" width="17" valign="middle" style="">
<div id="textfield-1014-errorEl" class="x-form-error-msg x-form-invalid-icon" style="" data-errorqtip="<ul class="x-list-plain"><li>This field is required</li></ul>">
<ul class="x-list-plain">
<li>This field is required</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<table id="textfield-1015" class="x-field x-table-plain x-form-item x-field-default x-anchor-form-item" cellpadding="0" style="table-layout: auto;">
</div>
</span>
Try replacing your code
List<WebElement> elements = driver.findElements(By.tagName("input"));
with this one:
List<WebElement> elements = driver.findElements(By.xpath("//input"));
Check this cool cheat sheet for further selections
http://www.simple-talk.com/content/file.ashx?file=4937