Hey i am trying to select the parent of the parent element i suppose. I have a table in which i am trying to use Watir/Ruby to select the edit or delete button from the same row but in a different coloumn, example.
Name 1 -> Edit Icon -> Delete Icon
Name 2 -> Edit Icon -> Delete Icon
Example code below:
<html>
<body>
<table class="table-responsive">
<thead>...</thead>
<tbody>
<tr>
<td class="col-name">Name 1</td>
<td>
<a class="edit" href="/">
<span class="icon-edit"></span>
</a>
<a class="delete" href="/">
<span class="icon-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="col-name">Name 2</td>
<td>
<a class="edit" href="/">
<span class="icon-edit"></span>
</a>
<a class="delete" href="/">
<span class="icon-delete"></span>
</a>
</td>
</tr>
<tr>
...
</tr>
<tbody>
</table>
</body>
</html>
So far i have tried this but it is not working. I get an error TypeError: can't convert Hash into an exact number
table = #browser.table.when_present(:class => "table-responsive")
iconrow = table.span(:text => "Name 1").parent
if iconrow.a(:class => "edit").exists?
iconrow.a(:class => "edit").click
end
There might be a couple issues with the code:
* The :class locator is being applied to when_present rather than the table itself.
* The element with "Name 1" is a td rather than a span.
Try:
table = #browser.table(:class => "table-responsive").when_present
iconrow = table.td(:text => "Name 1").parent
if iconrow.a(:class => "edit").exists?
iconrow.a(:class => "edit").click
end
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>
I am using ERB templating in Sinatra to display a table of data.
How can I use jQuery to get table data of a specific row when I click the EDIT button without having to assign specific class or ids to each <td> or <tr>?
<table>
<tr>
<td>question</td>
<td>answer</td>
<td>edit</td>
</tr>
<tr>
<td>What is a carrot?</td>
<td>A vegetable</td>
<td>
<a id="editbutton" class="btn btn-default" onclick="editModal()" data-toggle="modal" data-target="#basicModal4" aria-hidden="true" name="btn" data-modal-type="confirm"><em class="fa fa-pencil"></em></a>
</td>
</tr>
<tr>
<td>What does HTML stand for?</td>
<td>Hyper Text Markup Language</td>
<td>
<a id="editbutton" class="btn btn-default" onclick="editModal()" data-toggle="modal" data-target="#basicModal4" aria-hidden="true" name="btn" data-modal-type="confirm"><em class="fa fa-pencil"></em></a>
</td>
</tr>
</table>
UPDATE:
I have managed to get the following to get the value in the nearest <td>
$('.editbutton').click(function(e) {
var output = $(this).closest('tr').find('.as').text();
alert(output);
});
but I need values from both table data cells in that row. Any ideas?
Jquery .closest() , check API https://api.jquery.com/closest/
<tr>
<td>AAA</td>
<td>
<a class="btn" role="button"> </a>
<td>
</tr>
<tr>
<td>bbb</td>
<td>
<a class="btn" role="button"> </a>
<td>
</tr>
How to select a if tr contains <td>AAA</td>. Perfect if I can do it with XPath. But maybe another way in WebDriver
You can do this using Xpath.
//td[text() = 'AAA']/following-sibling::td/a
This will get find a td which has the text AAA. Then it will select the following td sibling and get the a from this td.
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.
I have grid of products. Each product row in the grid can be expended to show the full product details (done with Ajax). The sample bellow shows how I implemented the microdata into the grid (not the full product details). The same microdata repeats over and over in the page
Is this the best way?
<tbody>
#foreach (var product in Model)
{
<tr itemscope itemtype="http://schema.org/Product" class="tr_prod" style="height:105px;" productid="#product.Id" optionid="#product.OptionId" shopcityid="#product.ShopCityId">
<td>
<div class="prod_img_small">
<img class="preview" src="#Url.Content("~/Files/Products/" + product.ImgFileName)" />
</div>
</td>
<td itemprop="name">
<b>#product.Name</b>
</td>
<td>
<div itemprop='productID'>
<b>#product.Id</b>
</div>
</td>
<td>
<div itemscope itemprop="priceSpecification" itemtype="http://schema.org/DeliveryChargeSpecification">
<b><span itemprop="price">#product.DeliveryPrice</span></b>
</div>
</td>
<td>
<b>#product.ProductPrice</b>
</td>
<td>
<b>#product.TotalPrice </b>
</td>
</tr>
}
</tbody>
Does look valid to me. Some itemscopes can even be promoted to the <TD> like priceSpecification.
All metadata that's added using AJAX won't be showing up for spiders of course, so that's something to think about.
You can also add metadata to the page to indicate it's a collection of products.
<body itemscope itemtype="http://schema.org/CollectionPage">
...
</body>