Develop Reference

How to click on the aside / previous Table Cell (TD) in the same row using Selenium Webdriver with Java?

I want to click on the Checkbox element which is present in the dynamic web table which has 3 static columns (CheckBox, Description, Link) and dynamic rows.
I'm able to get the exact text of the description of the check box but I'm unable to click on the check box.
Here's the script I tried to achieve my expectation but didn't work. Might be a wrong approach.
WebElement dataTable = driver.findElement(By.id("table_id"));
List<WebElement> TDs = dataTable.findElements(By.tagName("td"));
for(WebElement td : TDs)
{
if (!td.getText().trim().equals("text that i want to click on its checkbox"))
continue;
WebElement particularTd = td.findElement(By.xpath("//*[#type='checkbox']//preceding::input"));
particularTd.click();
}
Could you tell me the right way to click on the check box?
Thanks,
Karunagara Pandi G

I think the td contains only the data.
What you can try is to navigate back to the immediate parent table-row (tr) containing table-data(td). Then searching for the input 'checkbox' there.
<table>
<tr>
<td>
<center><input type='checkbox'/></center>
</td>
<td>
<span>Cell Desc</span>
</td>
<td>
<hyperlink>
</td>
</tr>
</table>
To click the checkbox you can use xpath:
//*[#text='Cell Desc']/ancestor::tr//input
To make the xpath dynamic you can fetch the value and use that value
String value = "Cell Desc";
String xpath = "//*[#text='" + value + "']/ancestor::tr//input";

This worked for me please try the below code:
for(WebElement td : TDs)
{
if (td.getText().contains("Your Text")
td.click;
}
//if you are unable to click with td.click; use below code
for(WebElement td : TDs)
{
if (td.getText().contains("Your Text")
{
WebElement particularTd = td.findElement(By.xpath("//*[#type='checkbox']//preceding::input"));
particularTd.click()
}
}

Having trouble identifying popover text

I'm having trouble coming up with a cssSelector statement for the following control.
<div class="popover-content">
<i class="icon-time"></i>
<h3>24 Hours Risk Free!</h3>
<p>
Book now and
<strong>cancel for free up to 24 hours</strong>
</p>
</div>
I need to simply write a test that verifies this warning exists. Anyone have any ideas?

You can use JQuery
<a id="btnT" class="btn btn-xs btn-warning">Test</a>
var x = false;
$(document).ready(function(){
$('#btnT').popover({
placement: 'bottom',
title: '${trainingDetail.title}',
content: '${trainingDetail.description}',
trigger: 'click',
html : true,
container: 'body'
}).hover(function() {
if (x) {
$(this).popover('hide');
x = false;
}
else {
$(this).popover('show');
x = true;
}
});
});

Just find out the div tag using class and get its text. It will get you all the text in it for the h3 and p tags.
driver.findElement(By.className("popover-content")).getText();
Assuming you are able to already hover over it etc etc... Use the Actions class and moveToElement method.

How to automate click link in table cell by column name and row index using selenium (JAVA)

I want a generic approach to perform click link in table cell by providing column name and row index.
There may be multiple type of HTML table structure, but I need generic function which perform action in every table which looks like a generic HTML table.
For eg. following some generic tables are define :-
1- first table structure
<table>
<tr>
<th>column1</th><th>column2</th><th>column3</th>
</tr>
<tr>
<td>Link1</td><td>Link2</td><td>Link2</td>
</tr>
</table>
2- second table structure
<table>
<tr>
<td>column1</td><th>column2</th><td>column3</td>
</tr>
<tr>
<td>Link1</td><th>Link2</th><td>Link2</td>
</tr>
</table>
3- third table structure
<table>
<tr>
<td>column1</td><td>column2</td><td>column3</td>
</tr>
<tr>
<td>Link1</td><td>Link2</td><td>Link2</td>
</tr>
</table>
Here If I provide two parameter for eg.
String columnName = "column2", int rowIndex = 1;
then My generic function perform click link Link2 in table cell at 2,1 in all tables.
I can find the table using WebDriver as follows :-
WebDriverWait wait = new WebDriverWait(driver, 10000);
WebElement tableElment = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//table")));
But I do not know how to make a generic function to process this table as I want.
Please help me to create a generic function in Java to achieve this task.
Using JavascriptExecutor in WebDriver is also acceptable..
Pseudo code or Algorithm to achieve this is also acceptable..
Thanks in advance...:)

You could get the index of the column matching the targeted header and then return the link in the targeted row/column.
I would use a piece of JavaScript for this task:
static WebElement getTableLink(WebElement table, String column, int row) {
JavascriptExecutor js = (JavascriptExecutor)((RemoteWebElement)table).getWrappedDriver();
WebElement link = (WebElement)js.executeScript(
"var rows = arguments[0].rows, header = arguments[1], iRow = arguments[2]; " +
"var iCol = [].findIndex.call(rows[0].cells, (td) => td.textContent == header); " +
"return rows[iRow].cells[iCol].querySelector('a'); " ,
table, column, row);
return link;
}
Usage:
// get the table
WebElement tableElement = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("table")));
// click the link in column "column2", row 1
getTableLink(tableElement, "column2", 1).click();

Updating datatables with ajax

I am using spring MVC 4 and dandelion jsp datatables.
I wish to update a column in the table's column (progress percentage) every X seconds without reloading the entire page (probably via ajax).
The update should refer to the controller each X seconds, fetch the requested data and update the column with the results.
I tried to add a simple ajax for external div (not within the table) as a start but it seems to corrupt the table:
<script>
function testAjax() {
$.ajax({
url : 'ajaxtest.html',
success : function(data) {
$('#result').html(data);
}
});
}
<script>
var intervalId = 0;
intervalId = setInterval(testAjax, 6000);
</script>
<body>
<div id="result">123</div>
<div class="container-table">
<datatables:table id="listRecordsModel" data="${listModel}" row="record" cssClass="table table-hover table-striped table-bordered" cellspacing="2" scrollX="120%"
theme="bootstrap2" pageable="true" info="true">
<datatables:column title="Record ID" property="recordId"/>
.
.
.
The controller:
#RequestMapping(value = "/ajaxtest", method = RequestMethod.GET)
public #ResponseBody
String getTime() {
System.out.println("------------------------------------random");////////////////////
return "WORKS!!!";
Is there a simple way doing that?
Thanks,
Mike

I found the problem - the path to the html file was wrong and met with the initial method in the controller so the page loaded from scratch every 6 seconds.
I replaced url : 'ajaxtest.html', with url : '../../ajaxtest.html',.
Thanks anyway!

Jquery - adding image to multiple spans inside a table, dynamically created using Java

I'm creating a table in Java class (in controlTableInitial() method):
res.add("<tr>"+"<td>"+result.getString("product_barcode")+"</td>"
+"<td>"+showed+"</td>"
+"<td>"+result.getString("product_price")+"</td>"
+"<td>"+result.getString("submit_user_email")+"</td>"
+"<td>"+result.getString("sales_date")+"</td>"
+"<td id='setSale'><span id='img'></span></td>"
+"</tr>"+"<br/>");
than, I build this table in .jsp file:
<%
ArrayList<String> res = new ArrayList<String>();
ControlPanel tbl = new ControlPanel();
res = tbl.controlTableInitial();
%>
<table id="table">
<%
for(int i=0;i<res.size();i++) {out.println(res.get(i));}
%>
</table>
And finally, I add image into span with id "img" using jquery:
$(document).ready(function() {
$("#img").append('<img class="image" src="img/v.jpg"/>');
});
The problem is that i can see that image only in the 1st row, but not in others.
Also, using css, I change cursor type when hovering over the inserted image. And I can see cursor type changes in ALL rows where images should be (but, as I said, I can see iserted image only in the 1st row.).