I want to select a row and delete it,but id of row is dynamically generated so how can i access it using java in selenium webdriver. when i will add a row by using the application a new tr tag will be added with different id.so how can i select the row.Below is the html code for a table that has two rows with different id's.
<table id="SlotTable" class="noborder" cellspacing="0" cellpadding="0" align="left"
paging="false" style="border-top: 0px none; table-layout: fixed; width: 984px;">
<tbody id="tableBody">
<script>
<tr id="97.115.104.105.115.104" style="background-color: rgb(221, 221, 221);">
<td width="254px" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 254px;">
<td width="110px" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 110px;">
<td width="60px" style="text-align: right; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 60px;">
<td width="170px" style="text-align: right; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 170px;">
<td width="100px" style="text-align: right; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100px;">
<td width="120px" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 120px;">
<td width="170 px" style="text-align: right; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
</tr>
<tr id="107.117.109.97.114" style="background-color: rgb(232, 232, 232);">
</tbody>
</table>
</div>
</td>
</tr>
<tr>
</tbody>
</table>
You can select the rows for example by using CSS-selectors like :
#SlotTable > tr:nth-child(1)
#SlotTable > tr:nth-child(2)
The style of the elements seem to be the same, so you could use them as identifier and select all elements with that particular style and then do your actions on those.
Try to get row using xpath:
//tbody[#id='tableBody']//tr[1]
//tbody[#id='tableBody']/script/tr[1]
Change number to access the row you need.
Put this method you will get list of all the ids of rows and you can perform all the activity after that using their id's :
public ArrayList<String> ListOfIdsOfRows()
{
WebElement table =driver.findElement(By.id("SlotTable"));
WebElement tbody=table.findElement(By.tagName("tbody"));
List<WebElement> rows=tbody.findElements(By.tagName("tr"));
ArrayList<String> ListOdIds=new ArrayList<>();
for(int i=0;i<rows.size();i++)
{
WebElement row = tbody.findElement(By.xpath("//table[#id='SlotTable']/tbody/tr["+(i+1)+"]"));
String rowId=row.getAttribute("id");
ListOdIds.add(rowId);
}
return ListOdIds;
}
Related
Alright, I've been making a table that allows the user to enter certain input and acts like excel. Since this has nothing to do with the purpose of the program and more of how it displays things, I won't discuss its purpose in this post. Is there a way to add more decimal points to the demo output? I have tried adding 'total.toFixed(3) That didn't solve the issue. Then I tried what I have inserted now. I am out of ideas.
import java.text.NumberFormat;
private static NumberFormat percent = NumberFormat.getPercentInstance();
var rate = .00125;
var x = myFunction(.04375, rate);
function myFunction(a, b) {
return a + b;
}
var total = x*100;
percent = new DecimalFormat("0.000#%");
document.getElementById("demo").innerHTML = percent.format(total);
<!DOCTYPE>
<style>
th{
font-family: Arial Narrow;
background: #D6D6D6;
overflow: hidden;
font-size: 28px;
}
table, th, td{
border-color: black;
border: 1px solid black;
border-collapse: collapse;
}
.row2 {
font-family: Arial Narrow;
font-size: 28px;
}
td {
</style>
<html>
<head>
<table border="1">
<tr>
<th colspan="9" >FANNIE MAE MANDATORY</th>
</tr>
<tr class="row2">
<td></td>
<td colspan="2">30</td>
<td colspan="2">20</td>
<td colspan="2">15</td>
<td colspan="2">10</td>
</tr>
<tr class="row2">
<td></td>
<td>1 PT</td>
<td>0 PT</td>
<td>1 PT</td>
<td>0 PT</td>
<td>1 PT</td>
<td>0 PT</td>
<td>1 PT</td>
<td>0 PT</td>
</tr>
<tr class="row2">
<td>$35,000 - $99,999</td>
<td><p id="demo"></p></td>
<td id="c7"></td>
<td id="d7"></td>
<td id="e7"></td>
<td id="f7"></td>
<td id="g7"></td>
<td id="h7"></td>
<td id="i7"></td>
</tr>
</table>
Use a floating point with String.format
String.format("%.3f", number)
Try using string format by mentioning the type of decimals you need such as #xxx.xx it restricts the decimal of 2 based on rounding strategy
<div class="dataTables_scrollBody" style="position: relative; overflow: auto; height: 370px; width: 100%; min-height: 0px;">
<table id="offer_create" class="display article-list ranklist_drag table table-bordered dataTable no-footer" aria-describedby="offer_create_info" role="grid" style="position: absolute; top: 0px; left: 0px; width: 100%;" width="100%" cellspacing="0">
<thead>
<tbody>
<tr class="odd" role="row">
<td>test1</td>
<td>test2</td>
</tr>
How to get XPath and its in data table to be clickable at once?
Check for image data table looks like this:
WebElement htmltable=driver.findElement(By.xpath("//*[#id='main']/table[1]/tbody"));
List<WebElement> rows=htmltable.findElements(By.tagName("tr"));
for(int rnum=0;rnum<rows.size();rnum++)
{
List<WebElement> columns=rows.get(rnum).findElements(By.tagName("th"));
System.out.println("Number of columns:"+columns.size());
for(int cnum=0;cnum<columns.size();cnum++)
{
System.out.println(columns.get(cnum).getText());
}
}
Note: <tr> represent your row name and <th> represent your column name here.
environment is : flyingsaucer r8 and itext 2.0.8
I'm going to create pdf file with flyingsaucer and itext, I added
table-layout:fixed;word-wrap:break-word;
to wrap the cell content. However, the generated pdf file looks like next :
from the above diagram, we can see that over long English sentence of column 'Description' can be wrapped correctly, but the over long number in 'Account Code' and 'Description' cannot be wrapped.
I also tried "word-break: break-all;", but it still doesn't work.
my xhtml file is :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#page {-fs-flow-top: 'header';-fs-flow-bottom: 'footer';size:210mm 297mm;margin-top:40pt;#top-center {content: element(header)}
#bottom-center {content: element(footer)}page-break-before:always}#pagenumber:before { content: counter(page); }
#pagecount:before { content: counter(pages); }.pageNext{page-break-before: always;}
#header {position: running(header);font-style: italic;font-family: Arial Unicode MS;
-fs-move-to-flow: 'header';width: 100px; padding-top:10pt;}#footer {position: running(footer);font-style: italic;
font-family: Arial Unicode MS;-fs-move-to-flow: 'footer';color: #6c6ce8;}
body{font-size:13px;font-family:Arial Unicode MS;white-space:inherit;}b{font-size:13px;font-weight:bold;font-family:Arial;}
#dt th{text-align: center;font-family:Arial;font-weight:bold;}#title {font-size:15px;font-weight:bold;}#lab {font-size:15px;font-weight:bold;}
table.data{ border-top: 1px solid #333;border-bottom: 1px solid #333;width:100%;border:1px solid #333;}table{ border-collapse:collapse;}
table td{ padding:0 0 0 0; vertical-align:top;white-space:inherit;}
table.uReportStandard > thead > tr > th{ border:0.5pt #333 solid; background:#d5d0c3;color:#000;text-align:center;font-size:15px;
font-family:Arial,sans-serif;font-weight:bold;}
table.uReportStandard > tbody > tr > td{ padding:1px 1px; font-size:13px;}.data td.left_text{ font-size:13px;
font-family:Arial Unicode MS,sans-serif;width:300px;}.data td.right_text{ text-align:right;font-size:13px;
font-family:Arial Unicode MS,sans-serif;width:120px;}table#uPageCols td#uRightCol,table#uPageCols td#uRightCol aside{width:0;}
table.uReportStandard{border:0.5px #333 solid;}
</style>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<title></title>
</head>
<body>
<div id='footer' style='text-align:center;margin-top:0;'>
Page <span id='pagenumber' /> of <span id='pagecount' /><span style='margin-left:150px;'>2016-05-23 16:03:07</span>
</div>
<div>
<table border='0' id='dt' style='width:100%;table-layout:fixed;word-wrap:break-word;'>
<thead>
<tr style='background-color: gainsboro;border:solid 1px #333;'>
<th style='border:solid 1px #333;width:10%;'>Account Code</th>
<th style='border:solid 1px #333;width:29%;'>Bank Name</th>
<th style='border:solid 1px #333;width:35%;'>Description</th>
<th style='border:solid 1px #333;width:13%;'>Load(CNY)</th>
<th style='border:solid 1px #333;width:13%;'>Borrow(CNY)</th>
</tr>
</thead>
<tr>
<td style='border:solid 1px #333;'>66020901039</td>
<td style='border:solid 1px #333;'>ABC DEF<br />
-Global Logistics LTD</td>
<td style='border:solid 1px #333;white-space:inherit;'>break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text. Debit: EUR 50.00</td>
<td style='text-align: right;border:solid 1px #333;'>367.47</td>
<td style='text-align: right;border:solid 1px #333;'>
</td>
</tr>
<tr>
<td style='border:solid 1px #333;'>220201</td>
<td style='border:solid 1px #333;'>ACCOUNT PAYABLE<br />
-Global Logistics LTD</td>
<td style='border:solid 1px #333;white-space:inherit;'>88888888888888888889999999999999999997777777777777 Credit: EUR 284.36</td>
<td style='text-align: right;border:solid 1px #333;'>
</td>
<td style='text-align: right;border:solid 1px #333;'>2,089.85</td>
</tr>
</table>
</div>
</body>
</html>
my code is :
ITextRenderer renderer = new ITextRenderer();
renderer.setDocument(new File("test.xhtml"));;
renderer.layout();
FileOutputStream fos = new FileOutputStream("a.pdf");
renderer.createPDF(fos);
fos.close();
my questions are :
how table-layout:fixed;word-wrap:break-word; wrap content? it base on what to wrap?
why English/Chinese centense can be wrapped correctly, while number cannot?
how to wrap the number in my case?
Thanks in advance!
after using itext 5.5.9, number can be wrapped correctly, but now css : -fs-table-paginate: paginate; #pagenumber:before { content: counter(page); }#pagecount:before { content: counter(pages); } doesn't work in itext 5.5.9
as #Lonzak said, I just replaced core-renderer-r8.jar with flying-saucer-core.9.0.9.jar and flying-saucer-pdf.9.0.9.jar, use itext 2.1.7, then it works with css :
table-layout:fixed;word-wrap:break-word
, the long non-blank string or number can be wrapped correctly.
I was breaking my mind with that and i would recommend you to follow this solution.
If you are using thymeleaf try to use the .abbreviate method :
${#strings.abbreviate( ${exampleOfText}, 10)}
source
I found a nearly identical case to mine here. But the accepted answer does not work for me so I hope it's OK that I make a new question.
The pic below is what I want to achieve in all major browsers (at least IE8+, Firefox and Chrome). INPUTs placed inside TDs fills their parents both width and height.
My issue is that I can't get it done in Chrome with below code snippet. Thanks in advance
UPDATE: My issue on Chrome explained:
If you take a closer look, there's 1 or 2px padding at top and bottom border. This is me on Chrome Version 47.0.2526.111 m on Windows 7 (Please open in new windows to see clearer)
UPDATE2: Big mistake on the sample. DIVs adapt their parent just fine without using the box-sizing. What I actually want is the INPUT to adapt their parent as well. Just updated my code snippet again.
table {
border-collapse: collapse;
width: 100%
}
td {
height: 100px;
border: 1px #ccc solid;
}
input {
border: 1px #ccc solid;
height: 100%;
width: 100%;
box-sizing: border-box; /* works fine with IE8+ */
-moz-box-sizing: border-box; /* works fine Firefox */
-webkit-box-sizing: border-box; /* height is not correct in Chrome */
/*-webkit-box-sizing: content-box; width is not correct in Chrome */
}
<table>
<tr>
<td>
<input type="text" value="this INPUT need to adapt to its parent TD">
</td>
</tr>
</table>
This is an odd one, but I think what you are seeing is a td with a fixed height of 100px, and border widths on top and bottom of 1px throwing off the child divs height 100% calculation.
Would it be possible to assign the height to the div instead of the td like below? This works for me in chrome.
table {
border-collapse: collapse;
width: 100%
}
td {
border: 1px #ccc solid;
}
div {
border: 1px #ccc solid;
height: 100px;
width: 100%;
box-sizing: border-box; /* works fine with IE8+ */
-moz-box-sizing: border-box; /* works fine Firefox */
-webkit-box-sizing: border-box; /* height is not correct in Chrome */
/*-webkit-box-sizing: content-box; width is not correct in Chrome */
}
<table>
<tr>
<td>
<div>BOX1</div>
</td>
<td>
<div>BOX2</div>
</td>
<td>
<div>BOX3</div>
</td>
</tr>
</table>
why not use simple css layouts rather than doing an over kill with tables?
Fiddle
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 100%;
}
.padding {
height: 100px;
}
.outer_border {
padding: 1px;
border: 1px solid black;
}
input {
border: 1px black solid;
height: 100%;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
HTML
<div class="container">
<div class="outer_border">
<div class="padding">
<input type="text" value="this INPUT need to adapt to its parent TD">
</div>
</div>
</div>
I'm actually looking for the answer to this question for quite a time now (since 2014). Lying around the internet are some post say that this is a bug of Chromium. I managed to recall a link here. Nonetheless, I doubt there will be answer soon.
Meanwhile, I would like to propose a quick and dirty fix for anyone who got in the same problem as me: For chrome, wrap all the INPUTs inside a DIV.
$(function() {
// if agent is of Chrome
var isChrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
if (isChrome) {
$("table td>:input").wrap($("<div>", {"class": "input-container"}));
}
});
table {
border-collapse: collapse;
width: 100%
}
td {
height: 100px;
border: 1px #ccc solid;
}
input {
border: 1px #ccc solid;
height: 100%;
width: 100%;
box-sizing: border-box; /* works fine with IE8+ */
-moz-box-sizing: border-box; /* works fine Firefox */
/*-webkit-box-sizing: border-box; height is not correct in Chrome
*-webkit-box-sizing: content-box; width is not correct in Chrome */
}
div.input-container {
height: 100%;
width: 100%;
-webkit-box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" value="this INPUT need to adapt to its parent TD">
</td>
</tr>
</table>
I'm having a hard time retrieving the text of an element, for some reason WebDriver can find the element but it can't retrieve the text, I'm suspecting because for some reason the element is not visible to WebDriver, I'll get to that in a moment.
Here's a snippet of the HTML:
<td id="x-auto-4169" class="x-grid3-col x-grid3-cell x-grid3-td-badCalls " style="width:53px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-badCalls" unselectable="on">0</div>
</td>
The Xpath to get to this is
String valueXpath = "((//div[#id=\"QosDashpardPanelBottom\"]//div[#id=\"CollectorQoSPerformanceMetricsgrid\"]//div[contains(#class, \"x-grid3-row x-unselectable-single\")])[" + j + "]//div)[" + i + "]";
WebElement value = driver.findElement(By.xpath(valueXpath));
Where 'j' is the row number and 'i' is the column number respectively in a table/grid. I know that Selenium can find the element because I can do
WebElement class = driver.findElement(By.xpath(fullXpath));
String classAttr = arg.getAttribute("class");
and I return
x-grid3-cell-inner x-grid3-col-badCalls
but when I try
String cellValue = value.getText();
System.out.println(cellValue);
I get an empty string. I'm staring at my computer screen and I can see the value, it's visible, I know Selenium finds the element but I can't retrieve the text. Interestingly someone suggested to first click on the value then try to getText() so when I tried to click I got the exception:
org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
So I'm wondering if I'm not able to retrieve the text value because it's not visible? However if that's the case it seems strange that I can retrieve things like class attribute, tags, etc but not the text value.
Any suggestions would be greatly appreciated.
HTML:
<body class=" ext-gecko ext-windows" onload="processLoaders();">
<script type="text/javascript">
<div id="topNavDiv" style="height: 90px">
<div id="bodyContentOuter" style="width: 1280px; height: 587px;">
<div id="bodyContentInner">
<script src="RLT/RLT.nocache.js" language="javascript" type="text/javascript">
<script defer="defer">
<script language="javascript" type="text/javascript">
<div id="rtcpMain" class=" x-component x-border-layout-ct" style="width: 1280px; height: 587px;">
<div id="rtcpMainWest" class=" x-panel x-component x-border-panel" style="left: 5px; top: 5px; width: 225px;">
<div id="x-auto-2" class=" x-tab-panel x-component x-border-panel" tabindex="0" hidefocus="true" style="left: 235px; top: 5px; width: 1040px;">
<div class="x-tab-panel-header x-unselectable" style="width: 1038px;" unselectable="on">
<div class="tone-rtcp-tabbed-content-panel" style="width: 1040px; height: 550px;">
<div id="x-auto-10" class=" x-component" style="overflow: auto; width: 1040px; height: 550px;">
<div id="QosDashboardPanel0" class=" x-panel x-component" style="width: 1040px;">
<div id="x-auto-13" class=" x-small-editor x-panel-header x-component x-hide-display" role="presentation">
<div id="rtcpDPBWrap" class="x-panel-bwrap" role="presentation" style="overflow: visible;">
<div class="x-panel-tbar x-panel-tbar-noheader" role="presentation" style="width: 1040px;">
<div id="rtcpDPBody" class="x-panel-body x-panel-body-noheader x-border-layout-ct" role="presentation" style="width: 1038px; height: 700px;">
<div id="QosDashboardPanelTop" class=" x-component x-border-panel x-border-layout-ct" style="left: 0px; top: 0px; width: 1038px; height: 400px;">
<div id="QosDashpardPanelBottom" class=" x-component x-border-panel x-border-layout-ct" style="left: 1px; top: 401px; width: 1036px; height: 298px;">
<div id="QosDashpardPanel_pqosChartsLC" class=" x-component x-border-panel x-border-layout-ct x-hide-display" style="left: 0px; top: 0px; width: 1036px; height: 400px;">
<div id="QosDashpardPanel_metricsTablesLC" class=" x-component x-border-panel x-border-layout-ct" style="left: 1px; top: 1px; width: 1034px; height: 296px;">
<div id="CollectorMetrics_toneletWrapper" class=" x-panel x-component x-border-panel" style="left: 1px; top: 1px; width: 330px;">
<div id="x-auto-99" class=" x-small-editor x-panel-header x-component x-hide-display" role="presentation">
<div class="x-panel-bwrap" role="presentation">
<div class="x-panel-body x-panel-body-noheader" role="presentation" style="width: 328px; height: 292px;">
<div id="CollectorMetrics" class=" x-panel x-component" style="width: 328px;">
<div id="x-auto-109" class=" x-small-editor x-panel-header x-component x-unselectable" role="presentation" unselectable="on">
<div class="x-panel-bwrap" role="presentation">
<div class="x-panel-body" role="presentation" style="width: 326px; height: 265px;">
<div id="CollectorQoSPerformanceMetricsgrid" class=" x-grid-panel x-component" style="position: relative; width: 326px; height: 265px;" tabindex="0" hidefocus="true" unselectable="">
<div class="x-grid3" role="presentation" style="width: 326px; height: 265px;">
<div class="x-grid3-viewport" role="presentation">
<div class="x-grid3-header" role="presentation">
<div class="x-grid3-scroller" role="presentation" style="width: 326px; height: 243px;">
<div class="x-grid3-body" role="presentation">
<div id="CollectorQoSPerformanceMetricsgrid_x-auto-633" class="x-grid3-row x-unselectable-single x-grid3-row-selected x-grid3-highlightrow " style="width:510px;">
<table class="x-grid3-row-table" cellspacing="0" cellpadding="0" border="0" style="width:510px;" role="presentation">
<tbody role="presentation">
<tr role="presentation">
<td id="x-auto-634" class="x-grid3-col x-grid3-cell x-grid3-td-name x-grid-cell-first " style="width:148px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-name" unselectable="on">
<u>Lync</u>
</div>
</td>
<td id="x-auto-635" class="x-grid3-col x-grid3-cell x-grid3-td-badCalls " style="width:53px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-badCalls" unselectable="on">36</div>
</td>
<td id="x-auto-636" class="x-grid3-col x-grid3-cell x-grid3-td-totalCalls " style="width:58px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-totalCalls" unselectable="on">120</div>
</td>
<td id="x-auto-637" class="x-grid3-col x-grid3-cell x-grid3-td-avgLatency " style="width:73px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-avgLatency" unselectable="on">223</div>
</td>
<td id="x-auto-638" class="x-grid3-col x-grid3-cell x-grid3-td-avgLoss " style="width:53px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-avgLoss" unselectable="on">0.80</div>
</td>
<td id="x-auto-639" class="x-grid3-col x-grid3-cell x-grid3-td-avgJitter " style="width:58px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-avgJitter" unselectable="on">29</div>
</td>
<td id="x-auto-640" class="x-grid3-col x-grid3-cell x-grid3-td-avgMOS x-grid3-cell-last " style="width:53px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-avgMOS" unselectable="on">3.86</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="CollectorQoSPerformanceMetricsgrid_x-auto-641" class="x-grid3-row x-unselectable-single " style="width:510px;">
<table class="x-grid3-row-table" cellspacing="0" cellpadding="0" border="0" style="width:510px;" role="presentation">
<tbody role="presentation">
<tr role="presentation">
<td id="x-auto-642" class="x-grid3-col x-grid3-cell x-grid3-td-name x-grid-cell-first " style="width:148px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-name" unselectable="on">
<u>CUCM-Publisher</u>
</div>
</td>
<td id="x-auto-643" class="x-grid3-col x-grid3-cell x-grid3-td-badCalls " style="width:53px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-badCalls" unselectable="on">3</div>
</td>
<td id="x-auto-644" class="x-grid3-col x-grid3-cell x-grid3-td-totalCalls " style="width:58px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-totalCalls" unselectable="on">52</div>
</td>
<td id="x-auto-645" class="x-grid3-col x-grid3-cell x-grid3-td-avgLatency " style="width:73px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-avgLatency" unselectable="on">190</div>
</td>
<td id="x-auto-646" class="x-grid3-col x-grid3-cell x-grid3-td-avgLoss " style="width:53px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-avgLoss" unselectable="on">0.79</div>
</td>
<td id="x-auto-647" class="x-grid3-col x-grid3-cell x-grid3-td-avgJitter " style="width:58px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-avgJitter" unselectable="on">31</div>
</td>
<td id="x-auto-648" class="x-grid3-col x-grid3-cell x-grid3-td-avgMOS x-grid3-cell-last " style="width:53px;" role="gridcell">
<div class="x-grid3-cell-inner x-grid3-col-avgMOS" unselectable="on">3.98</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
After much (much) troubleshooting it turned out that I had a slight mistake on my Xpath. From my html
<div id="QosDashboardPanel0" ...
I was not accounting for multiple tabs. In my AUT I was opening a new tab, not a new browser tab but a tab in the application itself, and the whole Hmtl would remain the same except the snippet above would change to
<div id="QosDashboardPanel1" ...
I was assuming that the ID wouldn't change, well lesson learned! This is why I was running into the 'not able to click an invisible element', the element was in fact there but it was hidden behind my active tab.
Not much of a solution but I hope if someone is running into something similar this at least points them in the correct direction or makes a bell go off.