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 );
Related
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());
}
}
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