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
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>
just wondering if anyone knows how i can get an angular expression from within the ng-repeat, in the same object. eg
<!..This is the abgpankit..>
<div ng-repeat="equip in portal[0].equipment[0].sub" id="{{equip.id}}" class="displaydiv">
<div class="contentimg">
<h3>{{equip.item}}</h3>
</div>
<a ng-repeat="x in equip.links" href="#pdfdiv" onclick ="return iframeSrc("{{x.links}}");">
<li>{{x.desc}}</li></a>
<div class="information">
<p>{{equip.info}}</p>
</div>
<div class="items">
<table>
<tr>
<th>Items in Kit</th>
</tr>
<tr>
<td class="icons">
<a href="#panharness" class="panharnessicon">
<div class="iconimg">
<h2>Pan Harness</h2></div></a>
</td>
<td class="icons">
<a href="#displaymodule" class="displaymodicon">
<div class="iconimg">
<h2>Display Module</h2></div></a>
</td>
<td class="icons">
<a href="#halo" class="haloicon">
<div class="iconimg">
<h2>Halo</h2></div></a>
</td>
<td class="icons">
<a href="#edm" class="edmicon">
<div class="iconimg">
<h2>EDM</h2></div></a>
</td>
<td class="icons">
<a href="#dm" class="dmicon">
<div class="iconimg">
<h2>DM</h2></div></a>
</td>
<td class="icons">
<a href="#sft" class="sfticon">
<div class="iconimg">
<h2>SFT</h2></div></a>
</td>
</tr>
</table>
</div>
</div>
Sorry just changed it to the actually code from the site. I believe i have the syntax right, i just though there might be some limitation using an expression in the same object the ng-repeat is defined in.
Once i sort this out i can move further down and fix things up.
Cheers,
Mitchell
here i want to fill the input field, but unable to access it by Xpath... Plz Help me out..
and the Code is below....
<table class="detailList" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="labelCol">
<div id="div1">
<div class="pbSubsection">
<table class="detailList" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="data2Col" colspan="2">
<span style="font-Size:12px;">
Process Name
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td style="text-align:left;" class="data2Col">
<div id=div2">
<div class="pbSubsection">
<table class="detailList" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="data2Col" colspan="2">
<div id="div3" class="requiredInput">
<div id="div4" class="requiredBlock"></div>
<input name="pName" style="width:50%;" type="text">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
iam trying
WebElement ele = driver.findElement(By.xpath("//span[text()='Process Name']/preceding::td/div/input[#type='text']"));
ele.sendKeys("PM 001");
But here after preceding i know its wrong.. Plz Help me out with this.......
Here the name attribute value of input and div id's will change dynamically...
so iam trying to find by the label and preceding input tag...
Thanks in Advance
Your XPath is entirely wrong.
//span[normalize-space(text())='Process Name']/ancestor::tr/descendant::input
Is what you are after.
If the name of that input doesn't change, you can simply get it via:
driver.findElement(By.name("pName"));
Your XPath falls over at the first hurdle simply because that span has a lot of whitespacing around "Process Name", so use normalize-space to force it to strip the whitespaces from the text before comparing it.
You are also then falling over at the next stop, preceding ...you are the the span's level here, it's as deep as you can go, there's nothing 'preceding' it in the first place.
//span[normalize-space()='Process Name']//ancestor::tr//div//input[#type='text']
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.
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');