How to get value from hierarchy with Selenium WebDriver and WebElement?
The web page application is Telerik model.
Part of my java code:
public void ChangeElementSaveAndVerify() throws InterruptedException
{
driver.findElement(By.xpath(myPrinterTab.printerTabIconLeftPane)).click();
Thread.sleep(5000);
driver.findElement(By.xpath(myPrinterTab.showHideDriverDetailed)).click();
Thread.sleep(5000);
WebElement select = driver.findElement(By.id("ctl00_ContentPlaceHolder2_RadGrid_Driver_ctl00_ctl05_EditFormControl_Preton_ucSettings_Driver_treeList_ctl04_Enabled_DropDown"));
WebElement innerElemt = select.findElement(By.tagName("div"));
WebElement innerElemt2 = innerElemt.findElement(By.tagName("ul"));
List<WebElement> allOptions = innerElemt2.findElements(By.tagName("li"));
for (WebElement option : allOptions) {
System.out.println("Value is: "+ option.getText());
System.out.println(option.getAttribute("value"));
driver.findElement(By.xpath(myPrinterTab.arrowUsePreton)).click();
Thread.sleep(5000);
option.click();
Thread.sleep(5000);
driver.findElement(By.xpath(myPrinterTab.saveButton)).click();
}
Page Source
<div class="rcbSlide" style="z-index: 6000; visibility: visible; display: block; overflow: visible; margin-left: 0px; position: absolute; top: 328px; left: 1122.5px; height: 42px; width: 370px;">
<div id="ctl00_ContentPlaceHolder2_RadGrid_Driver_ctl00_ctl05_EditFormControl_Preton_ucSettings_Driver_treeList_ctl08_GraphicMode_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Default " style="display: block; visibility: visible; top: 0px; left: 0px; width: 368px;">
<div class="rcbScroll rcbWidth" style="width: 100%; overflow: auto; height: 40px;">
<ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
<li class="rcbItem "> … </li>
<li class="rcbHovered "> … </li>
</ul>
</div>
</div>
</div>
The WebElement you are getting by findElement has no such attributes like a text value.
Try finding the correct WebElement by using a different By-Mechanism (By.id or By.xpath).
If this is not working, post HTML so it is easier to help.
options=driver.find_element_by_class_name("the class name in which u r text monitor is present")
for option in options:
temp=option.text
print temp
this is in python script and i think this idea will help u
Related
Im trying to build a simple single page react project where data is fetched from a public API and then it renders the data to the site. When styling my project I stumbled across a problem where my footer component doesnt stay at the bottom of the site.
I googled the solutions with stylings like :
.footer__container {
margin: auto;
width: 100%;
position: absolute;
right: 0;
left: 0;
bottom: 0;
background-color: #efefef;
text-align: center;
}
This works good if data is not rendered into the site : Correct
But when data is rendered to the website, the footer component stays at the same place. When scrolling down, it doesnt move along. Example
Without position: absolute; and styling
.footer__container {
margin: auto;
height: 60px;
background-color: #efefef;
margin-top: 2.5rem;
text-align: center;
}
it stays at the bottom when data is rendered to the site. But the start view is this : Without data rendered.
App.js :
function App() {
return (
<div className="App">
<Header/>
<Form/>
<Footer/>
</div>
);
}
Form.jsx
return (
<div className="form__section">
<form onSubmit={handleFetch}>
<input
value={word}
onChange={(e) => setWord(e.target.value)}
id='enter__word'
className='form__input'
></input>
<button>Search</button>
</form>
<div className='word__section'>
{synonyms.map((synonym) => (
<div className="word__container" key={synonym.word}>
<ul>
<li>
{synonym.word}
</li>
</ul>
</div>
))}
</div>
</div>
)
Please remove the position: absolute; and add the min-height: calc(100vh - HEADER_HEIGHT - FOOTER_HEIGHT) to form__section.
If you have something like CodeSandbox, I will modify it there.
Please forgive me, but i am kinda new to coding. I only need one word translated and was hoping to not need a translating plugin installed on my site. I have translated the word "Shopping Cart" on the cart-page using the following css-code:
.woocommerce-cart .woocommerce > form > h1 {
visibility: hidden;
position: relative;
}
.woocommerce-cart .woocommerce > form > h1:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: 'Handlekurv' !important;
}
But when i try to translate the WPBakery Page Builder in the admin-menu, nothing happens. I have tried the following code, but i think there is something wrong with the class:
.wp-has-submenu .wp-has-current-submenu .wp-menu-open .menu-top #toplevel_page_vc-general {
visibility: hidden;
position: relative;
}
.wp-has-submenu .wp-has-current-submenu .wp-menu-open .menu-top #toplevel_page_vc-general:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: 'Page Builder' !important;
}
<li class="wp-has-submenu wp-not-current-submenu menu-top toplevel_page_vc-general" id="toplevel_page_vc-general"><div class="wp-menu-arrow"><div></div></div><div class="wp-menu-image dashicons-before" aria-hidden="true"><img src="https://hygg.no/wp-content/plugins/js_composer/assets/vc/logo/wpb-logo-white_32.svg" alt=""></div><div class="wp-menu-name">WPBakery Page Builder</div>
<ul class="wp-submenu wp-submenu-wrap"><li class="wp-submenu-head" aria-hidden="true">WPBakery Page Builder</li><li class="wp-first-item">General Settings</li><li>Role Manager</li><li>Product License</li><li>About</li></ul></li>
<div class="wp-menu-arrow"><div></div></div><div class="wp-menu-image dashicons-before" aria-hidden="true"><img src="https://hygg.no/wp-content/plugins/js_composer/assets/vc/logo/wpb-logo-white_32.svg" alt=""></div><div class="wp-menu-name">WPBakery Page Builder</div>
<div class="wp-menu-arrow"><div></div></div>
<div class="wp-menu-image dashicons-before" aria-hidden="true"><img src="https://hygg.no/wp-content/plugins/js_composer/assets/vc/logo/wpb-logo-white_32.svg" alt=""></div>
<div class="wp-menu-name">WPBakery Page Builder</div>
<div class="wp-menu-arrow"><div></div></div><div class="wp-menu-image dashicons-before" aria-hidden="true"><img src="https://hygg.no/wp-content/plugins/js_composer/assets/vc/logo/wpb-logo-white_32.svg" alt=""></div><div class="wp-menu-name">WPBakery Page Builder</div>
<ul class="wp-submenu wp-submenu-wrap"><li class="wp-submenu-head" aria-hidden="true">WPBakery Page Builder</li><li class="wp-first-item">General Settings</li><li>Role Manager</li><li>Product License</li><li>About</li></ul>
Given your html code, adding this to your CSS will replace all instances of WPBakery Page Builder with Page Builder.
.wp-menu-name, .wp-submenu-head{
visibility: hidden;
position: relative;
}
.wp-menu-name:after, .wp-submenu-head:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: 'Page Builder' !important;
}
Though definitely test this as looking at this without further context of html on the whole page/site it might effect other items as well.
I have a need to use a CellList that flows horizontally, like this:
This is traditional celllist (showing vertically)
Page
1
2
3
....
I want it to show horizontally like this:
Page 1 2 3 ......
I found a solution, but some people said that this solution is not so good cos it modifies the html tag (by replacing all <div> to <span>) of the Widget.
public class HorizontalCellList<T> extends CellList<T> {
public HorizontalCellList(Cell<T> cell) {
super(cell);
}
#Override
protected void renderRowValues(
SafeHtmlBuilder sb, List<T> values, int start, SelectionModel<? super T> selectionModel) {
SafeHtmlBuilder filteredSB = new SafeHtmlBuilder();
super.renderRowValues(filteredSB, values, start, selectionModel);
SafeHtml safeHtml = filteredSB.toSafeHtml();
String filtered = safeHtml.asString().replaceAll("<div", "<span").replaceAll("div>","span>");
sb.append(SafeHtmlUtils.fromTrustedString(filtered));
}
}
Then they suggest me to use Css to achieve the same result. I tried but none of them works.
.horizontalCellList { display: inline; } --> it doesn't work
.horizontalCellList { display: inline; float:left; } --> it doesn't work either
myCellList.getElement().getStyle().setDisplay(Display.INLINE_BLOCK); --> doesn't work
myCellList.getElement().getElementsByTagName("li").getItem(i).getStyle().setDisplay(Display.INLINE);also doesn't work
For people who do not know GWT but know CSS/Html, then here is the Html code of CellList, i don't see any <span> there, they only have <div>. The trick here is how to make all the <div> turn to <span> by JUST using CSS.
<div class="GNOXVT5BEB" __gwtcellbasedwidgetimpldispatchingblur="true" __gwtcellbasedwidgetimpldispatchingfocus="true">
<div></div>
<div>
<div aria-hidden="true" style="width: 100%; height: 100%; padding: 0px; margin: 0px; display: none;">
<div aria-hidden="true" style="width: 100%; height: 100%; display: none;"></div>
</div>
<div aria-hidden="true" style="width: 100%; height: 100%; padding: 0px; margin: 0px; display: none;">
<div aria-hidden="true" style="width: 100%; height: 100%; display: none;">
</div>
</div>
</div>
</div>
Can anyone provide a good solution?
Based on what Thomas suggested, this is a complete solution
1- myCellList.css
.cellListWidget {
}
.cellListEvenItem {
display: inline-block;
cursor: pointer;
zoom: 1;
}
.cellListOddItem {
display: inline-block;
cursor: pointer;
zoom: 1;
}
.cellListKeyboardSelectedItem {
background: #ffc;
}
#sprite .cellListSelectedItem {
gwt-image: 'cellListSelectedBackground';
background-color: green;
color: white;
height: auto;
overflow: visible;
}
2- MyCellListResources.java
import com.google.gwt.user.cellview.client.CellList;
import com.google.gwt.user.cellview.client.CellList.Style;
public interface MyCellListResources extends CellList.Resources{
#Source({"myCellList.css"})
#Override
public Style cellListStyle();
}
3- YourMainPresenter.java
CellList<String> myHorizontalCellList = new CellList<String>(myTextCell, GWT.<MyCellListResources> create(MyCellListResources.class));
The code was tested & met your requirement.
It's not the .horizontalCellList that you want display: inline-block, it's the inner <div> elements for each item. The selector needs to be:
.horizontalCellList .gwt-CellList-cellListEvenItem, .horizontalCellList .gwt-CellList-cellListOddItem
assuming you #Imported CellList.Style on your CssResource.
(disclaimer: I only tried that in a completely re-defined custom CellList.Style, but there's no reason it wouldn't work with #Import and a descendant selector)
I'm trying to set a max-height to an image. It works well in Safari and Chrome, but not in Firefox/Opera/IE. Now I read that html and body heights should be put at 100%, and it did work when I used jsfiddle. However, it doesn't work in my page (memo-designs.com/portfolio.php).
The following is the source of the page:
<!DOCTYPE html>
<html>
<head>
<title>memodesigns</title>
<link rel='stylesheet' href='style/stylesheet.css'>
<script type = 'text/javascript'>
function displayImage(image, link) {
document.getElementById('img').src = image;
document.getElementById('mylink').href = link;
}
function displayNextImage() {
if (x < images.length-1){
x++;
} else {
x = 0;
}
displayImage(images[x], links[x]);
}
function displayPreviousImage() {
if (x > 0){
x--;
} else {
x = images.length-1;
}
displayImage(images[x]);
}
function startTimer() {
setInterval(displayNextImage, -1);
}
var images = [], links = [], x = 0;images[0] = "http://memo-designs.com/items/doublek-01.png"
links[0] = "http://memo-designs.com/items/doublek-01.png"
images[1] = "http://memo-designs.com/items/memodesigns.png"
links[1] = "http://memo-designs.com/items/memodesigns.png"
</script>
</head>
<body style = 'background-color: #000000'><div id = 'menucontainer'>
<div id = 'menu'>
<p>
<ul>
<li><a class = 'menu' href = '/'>HOME</a></li>
<li><a class = 'menu' href = 'about.php'>ABOUT</a></li>
<li><a class = 'menu' href = 'portfolio.php'>PORTFOLIO</a></li>
<li><a class = 'menu' href = 'rates.php'>RATES</a></li>
<li><a class = 'menu' href = 'contact.php'>CONTACT</a></li>
</ul>
</p>
</div>
</div>
<div id = 'contentcontainer' style = 'padding-top: 0%; max-height: 100%; overflow: hidden; background-color: #000000'>
<p>
<img id= 'img' src = 'http://memo-designs.com/items/doublek-01.png' style = 'max-height: 100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;'>
<img class = 'arrow' onclick = 'displayPreviousImage()' id= 'img' src = 'style/graphics/larrow.png' style = 'position: absolute; left: 0; top: 40%;'>
<img class = 'arrow' onclick = 'displayNextImage()' id= 'img' src = 'style/graphics/rarrow.png' style = 'position: absolute; right: 0; top: 40%;'> </p>
</div>
</body>
</html>
And the css stylesheet (only part of it is shown here):
*{
margin: 0;
padding: 0;
}
html{
margin: 0;
min-width: 100%;
height: 100%;
min-height: 100%;
}
body{
margin: 0px;
background-color: #f3f4f4;
min-width: 100%;
height: 100%;
min-height: 100%;
}
Would appreciate any help as to what I'm doing wrong :)
First of all I recommend you to start using a CSS-Reset like Normalize.css . It makes browsers render all elements more consistently and in line with modern standards.
Your HTML notation might also cause inconsistency across browsers. Turn things like <div id = 'menu'> into <div id="menu">. This makes it also more readable IMHO.
Inline style attributes make maintaining the pages a pain and may override things you didn't intent to. They also need to be applied to every single element thus also increasing download time. Using classes / id's is the way to go. Also pseudo-elements can't be used with inline styles. I advice to only use them for quick changes during development. I use the element inspector from Chrome / Firefox to change things quickly and instantly see how the changes look, copy/pasting the edits afterwards.
So, make sure to put all css into your stylesheet. It's also considered as a best practice for maintainability and better download speed (minify the files for production) of your pages.
You surely have heard about jQuery before. Try using it. jQuery makes developing things like image sliders a breeze (once you understand the syntax, but it's a low learning curve). Furthermore, there are LOTS of ready-to-use plugins for jQuery.
Another "good practice" is to put your javascripts at the very end of your document just before the </body> tag. Read more about this here and here.
Ok, enough tips. Let's get the hands dirty:
The HTML Part:
<!DOCTYPE html>
<html>
<head>
<title>memodesigns</title>
<link rel="stylesheet" href="/assets/css/normalize.css">
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<div id="menuContainer">
<div id="menu">
<p>
<ul>
<!-- Instead of writing in CAPITALS use the text-transform:uppercase; css property -->
<li><a class="menu" href="/">Home</a></li>
<li><a class="menu" href="about.php">About</a></li>
<li><a class="menu" href="portfolio.php">Portfolio</a></li>
<li><a class="menu" href="rates.php">Rates</a></li>
<li><a class="menu" href="contact.php">Contact</a></li>
</ul>
</p>
</div>
</div>
<div id="contentContainer">
<p>
<!-- NOTE: Use IDs only once, else use classes to share css styles -->
<img id="img" src="http://memo-designs.com/items/doublek-01.png">
<img class="arrow left" src="style/graphics/larrow.png" onclick="displayPreviousImage()">
<img class="arrow right" src="style/graphics/rarrow.png" onclick="displayNextImage()">
</p>
</div>
<!-- Put the JavaScript at the end of the document just before the closing body tag -->
<script>
var images = [], links = [], x = 0,
baseUrl = "http://memo-designs.com/items/";
images[0] = baseUrl + "doublek-01.png";
links[0] = baseUrl + "doublek-01.png";
images[1] = baseUrl + "memodesigns.png";
links[1] = baseUrl + "memodesigns.png";
function displayImage(img, link)
{
document.getElementById('img').src = img;
document.getElementById('mylink').href = link;
}
function displayNextImage()
{
if (x < images.length-1) x++;
else x = 0;
displayImage(images[x], links[x]);
}
function displayPreviousImage()
{
if (x > 0) x--;
else x = images.length-1;
displayImage(images[x]);
}
function startTimer()
{
setInterval(displayNextImage, -1);
}
</script>
</body>
</html>
...and the CSS:
/* Assuming you'll use a CSS-Reset */
body {
background-color: #f3f4f4;
font:
...
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#menuContainer { ... }
#menu { ... }
#menu ul { ... }
/* Making the menu labels all UPPERCASE */
#menu ul > li {
text-transform: uppercase;
}
#contentContainer {
background-color: #000;
padding-top: 0;
overflow: hidden;
/* IMPORTANT: Set a fixed pixel height here to make the images use up the given space */
height: 200px; /* change 200 to your needs */
}
#img {
display: block;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#contentContainer .arrow {
position: absolute;
top: 40%;
}
#contentContainer .arrow.left {
left: 0;
}
#contentContainer .arrow.right {
right: 0;
}
Ok, try out the suggestions and the code example. Tell us if and what helped.
Good luck and happy coding!
The same question has been asked in this post, but the accepted answer doesn't help (me, at least).
I use dojox.mobile.View to display two views that look like this. Everything works fine, except the map container doesn't get displayed correctly. It is shown as a small box on the top page. Do I miss something on the layout file? Thank you!
<div id="view1" dojoType="dojox.mobile.View" selected="true">
<h1 dojoType="dojox.mobile.Heading">View 1</h1>
<ul dojoType="dojox.mobile.RoundRectList">
<li dojoType="dojox.mobile.ListItem" icon="images/icon1.png" moveTo="view2" transition="slide">Go To View 2
</li>
</ul>
</div>
<div id="view2" dojoType="dojox.mobile.View" style="height:100%">
<h1 dojoType="dojox.mobile.Heading" back="View 1" moveTo="view1">View 2</h1>
<div dojoType="dojox.mobile.RoundRect" id="map_canvas" style="width:100% !important;height:100% !important;"></div>
</div>
Update:
<body style="visibility: visible;">
<div id="view1" class="mblView" selected="true" style="visibility: visible; width: 100%; height: 100%; top: 0px; left: 0px; display: none;" dojotype="dojox.mobile.View" widgetid="view1">
<div id="view2" class="mblView" style="visibility: visible; width: 100%; height: 100%; top: 0px; position: relative; left: 0px;" dojotype="dojox.mobile.View" widgetid="view2">
<h1 id="dojox_mobile_Heading_1" class="mblHeading mblHeadingCenterTitle" moveto="view1" back="View 1" dojotype="dojox.mobile.Heading" style="" widgetid="dojox_mobile_Heading_1">
<div id="map_canvas" class="mblRoundRect" style="width: 100% ! important; height: 100% ! important; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" dojotype="dojox.mobile.RoundRect" widgetid="map_canvas">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
Firebug logs
I had similar display problem with Dojo mobile + Google maps api version 3.
Simons solution did not work, but there was another way.
I don't create new topic, just give you this simple hint: Always check if Google maps loads AFTER DOM (for example using require(["dojo/domReady!"], function(){ ... })
the mobile view your using for the map view only has height:100% set where as the example has width + height 100%.
This can cause issues inside the div used for the map as its not picking up a width correctly. (i've seen a similar issue like this before, could be something else though)
EDIT:
Nothing pops out to me. Have you tried maybe using script to modify it ? something like:
var div = dojo.byId("map_canvas");
div.style.height = window.innerHeight+"px";
div.style.width = window.innerWidth+"px";