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());
Related
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 );
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();
I want to get the texts associated with the xpath "//p[#class='list-group-item']".
Below is the HTML snippet:
<div _ngcontent-c3="" class="list-group bg-trans mar-no">
<p _ngcontent-c3="" class="list-group-item" style="border-bottom: 1px dotted #ddd;">
<span _ngcontent-c3="" class="badge badge-pink" id="stat_2" style="background-color: rgb(225, 124, 167);">0</span>
In Action
</p>
<p _ngcontent-c3="" class="list-group-item" style="border-bottom: 1px dotted #ddd;">
<span _ngcontent-c3="" class="badge badge-purple" id="stat_3" style="background-color: rgb(152, 98, 145);">5</span>
Completed
</p>
<p _ngcontent-c3="" class="list-group-item" style="border-bottom: 1px dotted #ddd;">
<span _ngcontent-c3="" class="badge badge-dark" id="stat_4" style="background-color: rgb(59, 65, 70);">0</span>
Closed
</p>
<p _ngcontent-c3="" class="list-group-item" style="border-bottom: 1px dotted #ddd;">
<span _ngcontent-c3="" class="badge badge-defadivt" id="stat_8" style="background-color: rgb(227, 232, 238);">0</span>
Long Term Solution
</p>
<p _ngcontent-c3="" class="list-group-item" style="border-bottom: 1px dotted #ddd;font-weight:bold">
<span _ngcontent-c3="" class="badge badge-defadivt" id="stat_8">5</span>
Total
</p>
</div>
In result I want "In action", "Completed", "Closed", Total".
Below is the code I have written so far.
List<WebElement> lst= driver.findElements(By.xpath("//p[#class='list-group-item']"));
List<String> strgs = new ArrayList<String>();
for(WebElement e1 : lst){
strgs.add(e1.getText());
}
System.out.println(strgs);
Output I got:
[
0 In Action,
5 Completed,
0 Closed,
0 Long Term Solution,
5 Total
]
If you want to populate the values on text node then it doesn't supported by the Selenium.
e.g. your locator would be //p[#class='list-group-item']/text()[2] to find only the <p> tag text exclude <span>
An alternative way is you can use below JavascriptExecutor code to perform the task :
List<WebElement> lst= driver.findElements(By.xpath("//p[#class='list-group-item']"));
List<String> strgs = new ArrayList<String>();
for (WebElement element : lst) {
JavascriptExecutor js = (JavascriptExecutor) driver;
String sourceName = (String) js.executeScript("return arguments[0].childNodes[2].textContent", element);
strgs.add(sourceName.trim());
}
System.out.println(strgs);
Here return arguments[0].childNodes[2].textContent is javascript code which returns the second textnode of <p> which is expected text you need.
I am working on a project where data is coming from a server. In certain fields data is stored in html format. My problem is that i want to display that information in Android Text View. but not with this html part. However, I want to keep the Line break information intact So, that it can properly displayed to user. I have tried Jsoup.clean but it also left some style sheet data, like , elements etc
One of sample string is :
<ul style="list-style-position: initial; list-style-image: initial; padding-top: 0px;
padding-right: 0px; padding-bottom: 0px; padding-left: 14px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px;">
<li style="line-height: 18px; padding: 0px; margin: 0px;">Offer is on a choice of veg or non-veg meals for Two
<ul style="list-style-type: disc; list-style-position: initial; list-style-image: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; line-height: normal; margin: 0px;">
<li style="line-height: 18px; padding: 0px; margin: 0px;"><strong>Offer 1- Rs.499 Worth Rs. 1000:</strong> Veg Lunch OR Dinner for 2 Persons</li>
<li style="line-height: 18px; padding: 0px; margin: 0px;"><strong>Offer 2 – Rs.599 Worth Rs. 1200:</strong> Non-Veg Lunch OR Dinner for 2 Persons</li>
</ul>
</li>
<li style="line-height: 18px; padding: 0px; margin: 0px;">Traditional restaurant serving authentic cuisine in mud pots</li>
<li style="line-height: 18px; padding: 0px; margin: 0px;">Inclusive of all taxes and service charges</li>
<li style="line-height: 18px; padding: 0px; margin: 0px;"><strong><span class="upc gry sml">Cost for 2: </span>Rs. 700</strong></li>
</ul>
after applying jsoup.clean the string becomes
<ul style="list-style-position: initial; list-style-image: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px;"> <li style="line-height: 18px; padding: 0px; margin: 0px;">Offer is on a choice of veg or non-veg meals for Two <ul style="list-style-type: disc; list-style-position: initial; list-style-image: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; line-height: normal; margin: 0px;"> <li style="line-height: 18px; padding: 0px; margin: 0px;"><strong>Offer 1- Rs.499 Worth Rs. 1000:</strong> Veg Lunch OR Dinner for 2 Persons</li> <li style="line-height: 18px; padding: 0px; margin: 0px;"><strong>Offer 2 – Rs.599 Worth Rs. 1200:</strong> Non-Veg Lunch OR Dinner for 2 Persons</li> </ul> </li> <li style="line-height: 18px; padding: 0px; margin: 0px;">Traditional restaurant serving authentic cuisine in mud pots</li> <li style="line-height: 18px; padding: 0px; margin: 0px;">Inclusive of all taxes and service charges</li> <li style="line-height: 18px; padding: 0px; margin: 0px;"><strong><span class="upc gry sml">Cost for 2: </span>Rs. 700</strong></li> </ul>
Please help me solving this issue.
Try this
html.fromHtml(string);
My CSS file below sets width "50px" for style "myButton", and accordingly the element is correctly created with width 50px.
The issue is managing the element from Java (GWT). The following lines:
MyFile.java
final Element box1 = DOM.getElementById("myButton");
String test=box1.getStyle().getWidth();
box1.getStyle().setWidth(100, Unit.PX);
String test2=box1.getStyle().getWidth();
have as a result test="" and test2="100px", and element is correctly resized to 100px.
Why doesn't test have any value?
Thanks,
MyFile.html
<div style="width: 100%">
<a id ="myButton" href="#" class="myButton" style="text-decoration: none">Hey</a>
</div>
MyFile.css
.myButton {
display:block;
padding: 10px;
font-family:"Garamond 3 W01","Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;/*"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;*/
font-size: medium;
color: #000000;
text-align: center;
border-radius: 8px;
background-color: #E7E7E7;
background-image: url('bar1.png');
border-bottom: 1px solid #BBB;
border-top: 1px solid #BBB;
box-shadow: 0 0 6px 0 #B3B2B7;
text-shadow: 0 1px 0 white;
width: 50px;
height: 30px;
margin: 10px 10px 10px 10px;
}
Element#getStyle() returns the same as JavaScript's element.style, i.e. the style applied inline to the element (via its style="" attribute).
GWT does not emulate getComputedStyle or similar; if you really need them (which is unlikely; you should probably refactor your code instead), then you'll have to use JSNI.
See https://developer.mozilla.org/en/DOM/element.style