We Keep Coding

How to validate font sizes in single column of webtable?

DOM structure of Name column:
<div comp-id="362" class="ag-cell-value ag cell ag-cell-not-inline-editing ag-cell-normal-
height nameVal-cell ag-cell-focus" aria-colindex="2" tabindex="-1" col-id="Name" role="gridcell"
style="left: 0px; width: 150px; line-height: 18px; padding: 8px; display: inline-block; white-space: nowrap; overflow:hidden; margin-right: 20px;">
<span>
<span>
"Sam Michaels" == $0
<span>
<br>
<span style="font-size: 1.2rem">Male</span>
</span>
I got 4 columns: Name, Gender, Location and Occupation.
Name column xpath: //div[#col-id='Name']
Inside Name column, every row has two things: "Name" (Large font) and "Age" (Small font). How to validate font sizes in that "Name" column?

You should be able to use the WebElement#getCssValue(propertyName) method, e.g. like this:
By findBy = By.xpath("//div[#col-id='Name']")
WebElement element = driver.findElement(findBy);
String fontSizeCssValue = element.getCssValue("font-size");
System.out.println(fontSizeCssValue );

Get Angular table rows data

I want to get Angular table rows data. Full page source: https://pastebin.com/JszeSf8q (I had to cut the beginning because it's huge). I have this table:
<div class="ag-center-cols-container" ref="eCenterContainer" role="rowgroup" unselectable="on" style="width: 700px; height: 50px;">
<div role="row" row-index="0" aria-rowindex="2" row-id="0" comp-id="130" class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-position-absolute ag-row-first ag-row-last" aria-selected="false" style="height: 50px; transform: translateY(0px); " aria-label="Press SPACE to select this row.">
<div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="4" comp-id="138" col-id="accessorialExpectedUOMShortName" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 100px; left: 600px; ">m</div>
<div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="1" comp-id="131" col-id="operationCodeName" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 300px; left: 0px; ">Accessorial Charge</div>
<div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="2" comp-id="132" col-id="accessorialExpectedAmount" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 150px; left: 300px; ">120.00000000</div>
<div tabindex="-1" unselectable="on" role="gridcell" aria-colindex="3" comp-id="133" col-id="accessorialActualAmount" class="ag-cell ag-cell-not-inline-editing ag-cell-auto-height ag-cell-value" style="width: 150px; left: 450px; ">110.00000000</div>
</div>
</div>
I tried this:
WebElement accessorialExpectedUOMShortNameWebElement = driver.findElement(By.xpath("//div[#col-id='accessorialExpectedUOMShortName']"));
assertEquals(accessorialExpectedUOMShortNameWebElement.getText(), "UOM");
WebElement operationCodeNameWebElement = driver.findElement(By.xpath("//div[#col-id='operationCodeName']"));
assertEquals(operationCodeNameWebElement.getText(), "Operation Code");
WebElement accessorialExpectedAmountWebElement = driver.findElement(By.xpath("//div[#col-id='accessorialExpectedAmount']"));
assertEquals(accessorialExpectedAmountWebElement.getText(), "Expected");
WebElement accessorialActualAmountWebElement = driver.findElement(By.xpath("//div[#col-id='accessorialActualAmount']"));
assertEquals(accessorialActualAmountWebElement.getText(), "Actual");
I get the table labels. Do you know how I can get the table row values?

See if this works
List<WebElement> tableRows = driver.findElements(By.xpath(".//div[#class='ag-center-cols-container']/div/div"));
for (WebElement e : tableRows) {
if (e.getAttribute("col-id").equalsIgnoreCase("accessorialExpectedAmount")
|| e.getAttribute("col-id").equalsIgnoreCase("accessorialActualAmount"))
System.out.println(e.getText());
}
}

**How to select specified number of IMG tags from quantity input value**

Image example:
As you can see from clicking the image example link above, “EE” is the row and “8” is the item number.
I would like to select three of the following four IMG tag items located in the same row and echo the result.
<div id="surface" style="width: 4567px; height: 4137px; left: -1850px; top: -1152px; cursor: default;">
<img src="https://media.memories.png" data-items="L:106|EE:5" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2221px; top: 1561px; display: block;">
<img src="https://media.memories.png" data-items="L:106|EE:6" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2237px; top: 1561px; display: block;">
<img src="https://media.memories.png" data-items="L:106|EE:7" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2253px; top: 1561px; display: block;">
<img src="https://media.memories.png" data-items="L:106|EE:8" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2269px; top: 1561px; display: block;">
</div>
I figured out how to select one of the above img tags by specified row and item number using the following xpath, but how can select three items in the row “EE” after selecting the number 3 from a drop-down menu?
Xpath=//img[#data-items = ' L:106|EE:8']
Example Drop-down Menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<h2>Select Quantity</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Item Count</button>
<div class="dropdown-content">
1
2
3
</div>
</div>
</body>
</html>

If you want to select 3 from the drop-down you can use the below xpath.
//div[#class='dropdown-content']/a[normalize-space(.)='3']
You can click on the //button[.='Item Count'] and then use the xpath to select 3.
Alternatively, you can use js to select 3 without clicking on the button.
WebElement element = driver.findElement(By.xpath("//div[#class='dropdown-content']/a[normalize-space(.)='3']"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].click();",element);

You can make a list of all images and then iterate only 3 images using sublist. Please have a look on below code.
WebDriverWait wait = new WebDriverWait(driver, 40);
List<WebElement> allImages = driver.findElements(By.cssSelector("div#surface > img"));
for (WebElement image : allImages.subList(1, allImages.size()))
wait.until(ExpectedConditions.elementToBeClickable(image));
image.click();

How to get Text from Tooltip using Selenium in Java?

I'm trying to get the Text of a tooltip in Java
The curious thing is that I get any attribute of the span, even the TagName(), but when using getText() get an empty String
HTML code :
<div id="currentRebalancing1">
<div class="chart" id="donutCR1" data-highcharts-chart="8">
<div id="highcharts-cva4evt-30"
style="position: relative; overflow: hidden; width: 400px; height: 570px; text-align: left; line-height: normal; z-index: 0; left: 0.0999756px; top: 0.683334px;"
class="highcharts-container ">
<svg version="1.1" class="highcharts-root " width="400" height="570" viewBox="0 0 400 570">
<g class="highcharts-series-group">
<g class="highcharts-series highcharts-series-0 highcharts-pie-series highcharts-color-undefined highcharts-tracker "
transform="translate(10,47) scale(1 1)">
<path fill="RGB(19,37,91)"
d="M 206.97372615672333 91.00000267563894 A 129 129 0 1 1 79.03227795957477 236.2868694286062 L 130.21936677574485 229.77212165716372 A 77.4 77.4 0 1 0 206.984235694034 142.60000160538334 Z"
transform="translate(0,0)" stroke="#ffffff" stroke-width="1" stroke-linejoin="round"
class="highcharts-point highcharts-color-0 "></path>
<path fill="RGB(226,0,121)"
d="M 79.01605507671634 236.1588935844597 A 129 129 0 0 1 97.18697447921456 152.30879358460714 L 141.11218468752872 179.38527615076427 A 77.4 77.4 0 0 0 130.2096330460298 229.69533615067581 Z"
transform="translate(0,0)" stroke="#ffffff" stroke-width="1" stroke-linejoin="round"
class="highcharts-point highcharts-color-1 "></path>
<path fill="RGB(230,45,140)"
d="M 97.25472058085626 152.1990144229889 A 129 129 0 0 1 206.82082158798877 91.00012443766983 L 206.89249295279325 142.60007466260188 A 77.4 77.4 0 0 0 141.15283234851375 179.31940865379335 Z"
transform="translate(0,0)" stroke="#ffffff" stroke-width="1" stroke-linejoin="round"
class="highcharts-point highcharts-color-2 "></path>
</g>
<g class="highcharts-markers highcharts-series-0 highcharts-pie-series highcharts-color-undefined "
transform="translate(10,47) scale(1 1)"></g>
</svg>
<div class="highcharts-label highcharts-tooltip"
style="position: absolute; left: 160px; top: -9999px; opacity: 0; pointer-events: none; visibility: visible;">
<span style="font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; font-size: 12px; position: absolute; white-space: nowrap; color: rgb(51, 51, 51); margin-left: 0px; margin-top: 0px; left: 8px; top: 8px;">
Carmignac Sécurité A EUR Acc
<b>73.00%</b>
</span>
</div>
</div>
</div>
</div>
Java code:
s_Path = "//*[#id='currentRebalancing1']//*[contains(#class,'highcharts-point highcharts-color-0')]";
Actions builder = new Actions(driver);
WebElement w_AssetWeight = driver.findElement(By.xpath(s_Path));
builder.moveToElement(w_AssetWeight).build().perform();
Thread.sleep(2000);
s_Path = "//*[#id='currentRebalancing1']//div[contains(#class, 'highcharts-label')]//*[contains(. , 'Carmignac')]";
String s_Result = driver.findElement(By.xpath(s_Path)).getAttribute("style");
// Here s_Result has the value of 'Style'
s_Result = driver.findElement(By.xpath(s_Path)).getTagName();
// Here s_Result = "span"
s_Result = driver.findElement(By.xpath(s_Path)).getText();
//Here s_Result = "" instead of "Carmignac Sécurité A EUR Acc 73.00%"
First value of s_Result is as expected.
Second value of s_Result is "span" (as expected).
Third value of s_Result is "" ("Carmignac Sécurité A EUR Acc
73.00%" was expected)

The desired element is a dynamic element so to extract the tooltip you need to induce WebDriverWait for the visibilityOfElementLocated() and you can use either of the following Locator Strategies:
cssSelector:
System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div#currentRebalancing1 div.highcharts-label.highcharts-tooltip"))).getText());
xpath:
System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[#id='currentRebalancing1']//div[#class='highcharts-label highcharts-tooltip']"))).getText());

How to get the exact number of rows in webtable in Selenium WebDriver using Java

How to get the exact number of rows in webtable using xpath in webdriver using Java. Using the below xpath i am able to the count with header also. I don't want the count to include the header row and get the count of a webtable.
//table[#id='ctl00_MasterPlaceHolder_GrdHistory']/tbody/tr
HTML Code:
<table id="ctl00_MasterPlaceHolder_GrdHistory" cellspacing="2" cellpadding="0" border="0" style="color:#333333;width:100%;">
<tbody>
<tr style="color:Black;background-color:#DFC065;font-weight:bold;">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$0')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$1')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$2')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$3')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$4')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$5')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$6')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$7')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$8')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$9')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$10')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$11')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$12')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: rgb(251, 247, 234); text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$13')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color:#FBF7EA;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$14')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color:#FBF7EA;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GrdHistory','Select$15')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
Is this possible, if so then how do i get the count without including the header row in the count. Please help me on this. Help will be appreciated.

Use below xpath to exclude first row (Headers)
//table[#id='ctl00_MasterPlaceHolder_GrdHistory']/tbody/tr[position()>1]

I suggest :
count(table[#id="ctl00_MasterPlaceHolder_GrdHistory"]/tbody/tr) - 1

Try this code:
int count = (driver.findElements(By.xpath("//table[#id='ctl00_MasterPlaceHolder_GrdHistory']/tbody/tr")).size()) - 1;