I have a table as below with two buttons, how can I select the button for the 'FIRST' row?
<table id="comms-table" class="table table-condensed">
<tbody>
<tr><th class="bordered" style="text-align: center;" width="50">Status</th><th class="bordered" width="130">Component</th><th class="bordered">Last heart-beat</th></tr>
<tr class="data_row">
<td style="text-align: center;"><button class="btn btn-mini btn-success"> </button></td>
<td class="bordered">FIRST</td>
<td class="bordered">5 seconds ago</td>
</tr>
<tr class="data_row">
<td style="text-align: center;"><button class="btn btn-mini btn-success"> </button></td>
<td class="bordered">SECOND</td>
<td class="bordered">17 seconds ago</td>
</tr>
</tbody>
</table>
Try this:
WebElement we = driver.findElement(By.xpath("//*[contains(text(),'FIRST')]/preceding::button[1]"));
we.click();
Related
I don't understand the behavior of my bootstrap 3.3.7 + datatables 1.10.15 table.
Here is my initial HTML Table :
<table id="types-2" class="table-bordered table-striped table-condensed">
<thead>
<tr>
<th class="both" data-field="Type" data-sortable="true">Type</th>
<th class="both" data-field="Name" data-sortable="true">City</th>
<th class="both" data-field="City" data-sortable="true">‰ city</th>
<th class="both" data-field="Department" data-sortable="true">‰ department </th>
<th class="both" data-field="Region" data-sortable="true">‰ region</th>
</tr>
</thead>
<tbody>
<tr>
<td>Case 1</td>
<td>782 </td>
<td>13.84‰ </td>
<td>18.38‰ </td>
<td>24.25‰ </td>
</tr>
<tr>
<td>Case 2</td>
<td>267 </td>
<td>4.73‰ </td>
<td>5.37‰ </td>
<td>7.87‰ </td>
</tr>
<tr>
<td>Case 3 </td>
<td>191 </td>
<td>3.38‰ </td>
<td>4.27‰ </td>
<td>4.02‰ </td>
</tr>
<tr>
<td>Case 4</td>
<td>144 </td>
<td>0.04‰ </td>
<td>0.29‰ </td>
<td>0.24‰ </td>
</tr>
</tbody>
</table>
I'm using this script in order to hide pagination and search, to order by colomn 1 desc value, and to be responsive and to display directly all the rows.
<script>
jQuery(document).ready(function() {
jQuery('#types-2').DataTable( {
"bPaginate": false,
"bInfo" : false,
"responsive": true,
"searching": false,
"aaSorting": [[1,'desc']],
responsive: {
details: {
display: jQuery.fn.dataTable.Responsive.display.childRowImmediate,
type: ''
}
}
} );
} );
</script>
What I can't figure is why the script is adding two empty div class rows at the begining and the end of the table :
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
[...]
<div class="row">
<div class="col-sm-5"></div>
<div class="col-sm-7"></div>
</div>
The full render is :
<div id="types-2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-12">
<table id="types-2" class="table-bordered table-striped table-condensed dataTable no-footer dtr-" role="grid" style="width: 605px;">
<thead>
<tr role="row">
<th class="both sorting" data-sortable="true" data-field="Type" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 114px;" aria-label="Délit: activate to sort column ascending">Délit</th>
<th class="both sorting_desc" data-sortable="true" data-field="Name" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 127px;" aria-sort="descending" aria-label="Abrets en Dauphiné : activate to sort column ascending">Abrets en Dauphiné
</th>
<th class="both sorting" data-sortable="true" data-field="City" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 140px;" aria-label="‰ Abrets en Dauphiné: activate to sort column ascending">‰ Abrets en Dauphiné
</th>
<th class="both sorting" data-sortable="true" data-field="Department" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 48px;" aria-label="‰ Isère : activate to sort column ascending">‰ Isère
</th>
<th class="both sorting" data-sortable="true" data-field="Region" tabindex="0" aria-controls="types-2" rowspan="1" colspan="1" style="width: 101px;" aria-label="‰ Rhône-Alpes: activate to sort column ascending">‰ Rhône-Alpes
</th>
</tr>
</thead>
<tbody>
<tr class="odd" role="row">
<td tabindex="0">Case 1</td>
<td class="sorting_1">782 </td>
<td>13.84‰ </td>
<td>18.38‰ </td>
<td>24.25‰ </td>
</tr>
<tr class="even" role="row">
<td tabindex="0">Case 2</td>
<td class="sorting_1">267 </td>
<td>4.73‰ </td>
<td>5.37‰ </td>
<td>7.87‰ </td>
</tr>
<tr class="odd" role="row">
<td tabindex="0">Case 3</td>
<td class="sorting_1">191 </td>
<td>3.38‰ </td>
<td>4.27‰ </td>
<td>4.02‰ </td>
</tr>
<tr class="even" role="row">
<td tabindex="0">Case 4 </td>
<td class="sorting_1">144 </td>
<td>0.04‰ </td>
<td>0.29‰ </td>
<td>0.24‰ </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-5"></div>
<div class="col-sm-7"></div>
</div>
</div>
I can't figure where these additional 2 div class rows come from. Do you have any clue and how can I prevent them to appear (except display:none them)
Thanks.
It is added by default value for dom option when using Bootstrap styling.
If you're not using search, pagination and info controls, you can override the default layout with the following option.
dom: 'rt'
See official documentation for more information.
I created a new template for printing, and i want to customize it so it prints all the lines from account.invoice.line model. Is there a way you can do that. Here is the code of the template so far.
<t t-name="account.specifikacioni_report_document">
<t t-call="report.external_layout">
<div class="page">
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th class="text-right">Unit Price</th>
<th class="text-right" groups="sale.group_discount_per_so_line">Discount (%)</th>
<th class="text-right">Taxes</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.invoice_line" t-as="l">
<td>
<span t-field="l.name"/>
</td>
<td>
<span t-field="l.quantity"/>
<span t-field="l.uos_id" groups="product.group_uom"/>
</td>
<td class="text-right">
<span t-field="l.price_unit"/>
</td>
<td class="text-right" groups="sale.group_discount_per_so_line">
<span t-field="l.discount"/>
</td>
<td class="text-right">
<span t-esc="', '.join(map(lambda x: x.name, l.invoice_line_tax_id))"/>
</td>
<td class="text-right">
<span t-field="l.price_subtotal" t-field-options="{"widget": "monetary", "display_currency": "o.currency_id"}"/>
</td>
</tr>
</tbody>
</table>
</div>
</t>
</t>
This prints invoice lines for one invoice cause I copied the account.report_invoice_document and just edited it, but how can I list all invoice lines here not only the invoice lines for an invoice
You can follow the report_invoice.xml to print the lines.
<table class="table table-condensed">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th class="text-right">Unit Price</th>
<th class="text-right" groups="sale.group_discount_per_so_line">Discount (%)</th>
<th class="text-right">Taxes</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.invoice_line" t-as="l">
<td><span t-field="l.name"/></td>
<td>
<span t-field="l.quantity"/>
<span t-field="l.uos_id" groups="product.group_uom"/>
</td>
<td class="text-right">
<span t-field="l.price_unit"/>
</td>
<td class="text-right" groups="sale.group_discount_per_so_line"><span t-field="l.discount"/></td>
<td class="text-right">
<span t-esc="', '.join(map(lambda x: x.name, l.invoice_line_tax_id))"/>
</td>
<td class="text-right">
<span t-field="l.price_subtotal"
t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
</tr>
</tbody>
</table>
I have put together a Bootply demonstration here: http://www.bootply.com/Ss2aAnzqlZ.
It's a panel with a table as per http://getbootstrap.com/components/#panels-tables. However, I've also made the panel collapsible. The collapsing bit works OK, but the table itself doesn't retain shape. As you'll see in the Bootply, it doesn't fill the width of the panel when you first load the page. When you click "Improvements" in the panel header to collapse the panel, the table takes up the full panel width during the animation, then disappears. When you click again to show the panel content, the table is the full width until the animation stops, at which point, it shrinks back to what looks like an "auto" width.
Oddly enough, inspecting the table element shows that the table itself is full width, but the thead, tbody and tfoot aren't.
I've sort of tracked it down to the presence of the "collapse" class in the table. If you start the Bootply without the "collapse" class, it's full width until you collapse the panel. When you expand it, it goes back to auto width. I don't know why ... do you?
Here's the snippet, but the collapsing doesn't appear to run here. The Bootply is better.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div style="margin:15px">
<div class="panel panel-default">
<div class="panel-heading">
Improvements
</div>
<table id="improvementsPanel" class="table panel-collapse collapse in" aria-expanded="true" style="">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Qty</th>
<th>UOM</th>
<th class="text-right">Rate</th>
<th class="text-right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td class="text-right">133.00</td>
<td>m²</td>
<td class="text-right">425.00</td>
<td class="text-right">56,525</td>
</tr>
<tr>
<td>Item 2</td>
<td class="text-right">85.00</td>
<td>m²</td>
<td class="text-right">70.00</td>
<td class="text-right">5,950</td>
</tr>
<tr>
<td>Item 3</td>
<td class="text-right">25.00</td>
<td>m²</td>
<td class="text-right">100.00</td>
<td class="text-right">2,500</td>
</tr>
<tr>
<td>Item 4</td>
<td class="text-right"></td>
<td></td>
<td class="text-right"></td>
<td class="text-right">1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="4">Total</th>
<th class="text-right">66,475</th>
</tr>
</tfoot>
</table>
</div>
</div>
The collapse class toggles the display style on the table between none and block and this appears to be interfering with the standard table CSS.
You can resolve this by putting your table inside a div and setting that div to collapse rather than the table.
New Bootply: http://www.bootply.com/L8h2OdpMuD
HTML:
<div style="margin: 15px">
<div class="panel panel-default">
<div class="panel-heading">
Improvements
</div>
<div id="improvementsPanel" class="panel-collapse collapse in" aria-expanded="true">
<table class="table">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Qty</th>
<th>UOM</th>
<th class="text-right">Rate</th>
<th class="text-right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td class="text-right">133.00</td>
<td>m²</td>
<td class="text-right">425.00</td>
<td class="text-right">56,525</td>
</tr>
<tr>
<td>Item 2</td>
<td class="text-right">85.00</td>
<td>m²</td>
<td class="text-right">70.00</td>
<td class="text-right">5,950</td>
</tr>
<tr>
<td>Item 3</td>
<td class="text-right">25.00</td>
<td>m²</td>
<td class="text-right">100.00</td>
<td class="text-right">2,500</td>
</tr>
<tr>
<td>Item 4</td>
<td class="text-right"></td>
<td></td>
<td class="text-right"></td>
<td class="text-right">1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="4">Total</th>
<th class="text-right">66,475</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
Alternatively, you can add the css:
table.collapse.in {
display: table;
}
Arguably this could be a patch to component-animations.less.
I am attempting to pull a value and a header (string) from a website, but unable to find the element using selenium.
My Code
I used Firebug to get the XPath and this is what it determined:
//*[#id="DimensionForm"]/p[1]/table/tbody/tr[3]/td[3]
Code
Dim Right as double
Dim Marker as string
Marker = selenium.findElementByXPath("//*[#id="DimensionForm"]/p[1]/table/tbody/tr[2]/td[3]").getAttribute("value")
Right = selenium.findElementByXPath("//*[#id="DimensionForm"]/p[1]/table/tbody/tr[3]/td[3]").getAttribute("value")
HTML CODE
<form id="DimensionForm" name="validate" action="Dimension" method="post">
<div style="margin-top: 7px"></div>
<p><table width="100%" cellspacing="0" border="0" cellpadding="0" class="element">
<tr>
<td> </td><td class="formtitlenobg" colspan="6" align='right'>
AREA DIMENSIONS (AREA A) <span class='quote'> Front</span> 25.24</td>
</tr>
<tr align="right">
<td class="tablerowlightgreen" width=10> </td>
<th class="formtitle" width=250 align="left">Property</th>
<th class="formtitle" width=50>Check</th> <th class="formtitle" width=75>Front</th>
<th class="formtitle" width=75>Center</th><th class="formtitle" width=75>Left</th>
<th class="formtitle" width=120>Right</th>
<th class="formtitle" width=100>Total</th>
<td class="tablerow" width=50> </td>
<td class="tablerow"> </td>
</tr>
<tr align="right" nowrap>
<td> </td>
<td class="table" align="left"><strong>
Property O</strong></td>
<td class="table">+</td>
<td class="table">10</td>
<td class="table">12</td>
<td class="table"><strong>12</strong></td>
<td class="table"><strong><font class="front">
100</font></strong></td>
<td class="table">120</td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr></table>
You have incorrectly nested quotes:
selenium.findElementByXPath("//*[#id="DimensionForm"]/p[1]/table/tbody/tr[2]/td[3]")
Perhaps you meant:
selenium.findElementByXPath("//*[#id='DimensionForm']/p[1]/table//tr[2]/td[3]")
Note the single-quotes in the second line!
I hope someone here can help me. Im using selenium to test a page that has an image which when click displays a calendar. I can get as far as clicking the image using
browser.click("//center/table/tbody/tr/td[1]/a/img")
I got the above path by using the Selenium IDE. The problem is once i click the above image the Selenium IDE does not record what i have clicked after the calendar is shown.
Here is the code for the image button
<INPUT size='8' CLASS="field-date" TYPE="text" NAME="endQtrDate" VALUE="01/10/2004" ID="endQtrDate" onBlur="this.value=validateFieldValue(this.value,'date_error','endQtrDate',this.form)" onFocus="this.select()" TITLE="Enter date in format dd/mm/yyyy" />
<IMG ALIGN="absmiddle" ALT="Press to show calendar picker" NAME="calendarButton" SRC="../images/buttons/small/calendar.gif" onClick="return showCalendar('endQtrDate', 'dd/MM/yyyy');" />
Unfortunately i cant see the code for the calendar after i click it. The only way i can see it is using the mozilla plugin "Firebug". I managed to get the div layer of which the calendar is displayed.
<div class="calendar"
style="position: absolute; display: none; left: 234px; top: 416px;">
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<td colspan="1" class="button">-</td>
<td colspan="6" class="title" style="cursor: move;">October,
2004</td>
<td colspan="1" class="button">×</td>
</tr>
<tr class="headrow">
<td colspan="1" class="button">«</td>
<td colspan="1" class="button">‹</td>
<td colspan="4" class="button">Today</td>
<td colspan="1" class="button">›</td>
<td colspan="1" class="button">»</td>
</tr>
<tr class="daynames">
<td class="name wn">wk</td>
<td class="day name">Mon</td>
<td class="day name">Tue</td>
<td class="day name">Wed</td>
<td class="day name">Thu</td>
<td class="day name">Fri</td>
<td class="name day weekend">Sat</td>
<td class="name day weekend">Sun</td>
</tr>
</thead>
<tbody>
<tr class="daysrow">
<td class="day wn">40</td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day">1</td>
<td class="day weekend">2</td>
<td class="day weekend">3</td>
</tr>
<tr class="daysrow">
<td class="day wn">41</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
<td class="day">7</td>
<td class="day">8</td>
<td class="day weekend">9</td>
<td class="day weekend">10</td>
</tr>
<tr class="daysrow">
<td class="day wn">42</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
<td class="day">14</td>
<td class="selected day">15</td>
<td class="day weekend">16</td>
<td class="day weekend">17</td>
</tr>
<tr class="daysrow">
<td class="day wn">43</td>
<td class="day">18</td>
<td class="day">19</td>
<td class="day">20</td>
<td class="day">21</td>
<td class="day">22</td>
<td class="day weekend">23</td>
<td class="day weekend">24</td>
</tr>
<tr class="daysrow">
<td class="day wn">44</td>
<td class="day">25</td>
<td class="day">26</td>
<td class="day">27</td>
<td class="day">28</td>
<td class="day">29</td>
<td class="day weekend">30</td>
<td class="day weekend">31</td>
</tr>
<tr class="emptyrow">
<td class="day wn">36</td>
<td class="day">30</td>
<td class="day">31</td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
</tbody>
<tfoot>
<tr class="footrow">
<td colspan="8" class="ttip" style="cursor: move;">Select date</td>
</tr>
</tfoot>
</table>
<div class="combo" style="display: none;">
<div class="label">Jan</div>
<div class="label">Feb</div>
<div class="label">Mar</div>
<div class="label">Apr</div>
<div class="label">May</div>
<div class="label">Jun</div>
<div class="label">Jul</div>
<div class="label">Aug</div>
<div class="label">Sep</div>
<div class="label">Oct</div>
<div class="label">Nov</div>
<div class="label">Dec</div>
</div>
<div class="combo" style="display: none;">
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
</div>
</div>
If you look carefully you will see table cells for dates from 1 to 30th. How can i access these values using Selenium? I can use the IDE as it doesnt record anything when the calendar pops up.
The firebug has an option to display the xpath of any tag. I tried it on one of the td tags and it says this is the xpath.
/html/body/div/table/thead/tr[2]/td[3]
Can i use the above path to determine its value then click on it using selenium?
Thanks
To click on the image you can use click | calendarButton and that should load it up for you.
From there you will then need to click on items I would then use firebug to see the other items on the page.
Edit from extra info:
What you need to do then is use xpath=//td[#class="day" and text()="14"] for xpath or for css use css=td.day:contains('14')
The css route will be a lot quicker in browsers like Internet Explorer