I have a problem based on a similar question that has an answer but does not fit for me. I have an element that is not set up like this class="vote-link up" where it would be easy to make the class to change its attribute because that is just one word where mine is not similar to it.
The HTML code looks like this <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
And I want to remove display: none; which are the two last attribute of the HTML code. Or change it to display: shown; performing one of the options I have shown would give the same result that I want I just don't know how to do it.
i.e this is what i desire, to change the HTML to this <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none;"></textarea>
Just for clarification, display is not an attribute it's one of the properties of style attribute. Here is the reference for more information.
Here are the 2 options to handle your scenario.
Option 1: Update the style display property value to block
JavascriptExecutor js = (JavascriptExecutor)driver;
WebElement ele = driver.findElement(By.id("g-recaptcha-response"));
System.out.println("Before updating the property:" + ele.getAttribute("style"));
js.executeScript("arguments[0].style.display = 'block';",ele);
System.out.println("After updating the property:" + ele.getAttribute("style"));
Option 2: Remove the style > display property
JavascriptExecutor js = (JavascriptExecutor)driver;
ele = driver.findElement(By.id("g-recaptcha-response"));
js.executeScript("arguments[0].style.removeProperty('display')",ele);
System.out.println("After deleting the property:" + ele.getAttribute("style"));
Related
I have a Map where I need to click on the Toggle Full Screen button
What I have Tried:
I used the Actions Class to click on the Toggle button and is not working and have also used JavaScript Executor to click on the button but not happening .
Map Link - http://beta.findtoilet.dk/?term=2&lat=55.678937&lng=12.575738&zoom=15&maptype=roadmap
Below is my Script:
WebElement togglefullscreen = driver.findElement(By.xpath("//button[contains(#class,'gm-fullscreen-control')]"));
executor.executeScript("arguments[0].click();", togglefullscreen);
HTML:
<button draggable="false" aria-label="Toggle fullscreen view" title="Toggle fullscreen view" type="button" class="gm-control-active gm-fullscreen-control" style="background: none rgb(255, 255, 255); border: 0px; margin: 10px; padding: 0px; text-transform: none; appearance: none; position: absolute; cursor: pointer; user-select: none; border-radius: 2px; height: 40px; width: 40px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; overflow: hidden; top: 0px; right: 0px;">
Outer HTML:
...
Loading...
Loading...Loading...
Can I get information on this
try this css :
button[title='Toggle fullscreen view']
also, ideally as you are saying, it's in a map, we may need to change the locator.
I want to count how many IMG tags there are under the surface div tag and echo the amount.
<div id="surface" style="width: 4567px; height: 4137px; left: -1850px; top: -1152px; cursor: default;">
<img src="https://media.memories.png" data-seat="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-seat="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-seat="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-seat="L:106|EE:8" data-pl="1" style="position: absolute; cursor: pointer; width: 14px; height: 14px; left: 2269px; top: 1561px; display: block;">
</div>
Here is my non working attempt to get the count however its not returning the count to run my test in selenium IDE.
"//div[#surface='data-seat']/img"
Option 1:
You can simply use the below xpath and then get the count.
xpath to Image - "//div[#id='surface']/img"
System.out.println(driver.findElements(By.xpath("//div[#id='surface']/img")).size());
Option 2:
If you want to make it more complex, use the js to run the query and return the count.
JavascriptExecutor js = (JavascriptExecutor) driver;
Long number_of_imgs = (Long) js.executeScript("return document.querySelectorAll(\"div[id='surface'] img\").length");
System.out.println(number_of_imgs);
I would prefer the option 1.
Try:
//div[#surface='data-seat']/count(img)
For your example html, it outputs 4.
You can use the XPath-1.0 expression
count(//div[#id='surface']/img)
It counts all img children of all div elements.
To print the count of <img> tags within the <div> tag, you need to induce WebDriverWait for the visibilityOfAllElementsLocatedBy() and you can use either of the following Locator Strategies:
xpath:
System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//div[#id='surface']//img"))).size());
cssSelector:
System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.cssSelector("div#surface img"))).size());
I'm trying to fill a form on a website and I am unable to find the element that is listed in the code.
My code:
new WebDriverWait(driver, 30).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("/html/body/div[1]/form/div/div/input[1]")));
driver.findElement(By.xpath("/html/body/div[1]/form/div/div/input[1]")).sendKeys("TEST");
Relative website code:
<body>
<div id="pf_form" class="pf_formcontainer">
<form id="PF_1" class="form formBoxShadow" style="height: 1600px; width:
1800px; display: block; left: 0px; top: 30px;">
<div id="PF_4Container" class="PageContainer" style="left:0px;top:0px;z-
index:0;position:absolute">
<div id="PF_4" class="page" tabindex="" name="PF_4" style="width: 1800px;
height: 1600px; background-color: rgb(255, 255, 255); display: block;">
<input id="PF_5" class="textinput" name="PF_5" maxlength="99" value=""
onclick="return false;" style="left: 169px; top: 107px; z-index: 6; height:
18px; line-height: 18px; width: 206px; display: block;" type="text">
...
I've tried to change to the frame PF_4 and PF_4Container, no luck there. I've tried to find it by ID and other means but this one is kicking my butt.
The form is publicly visible here http://app.perfectforms.com/PresentationServer/Form.aspx/Play/FdjigAcE?f=FdjigAcE
Any guidance would be greatly appreciated. I've been trying to resolve this for weeks now.
If you have your HTMl elements with ids already why using xpath?
Simply use:
WebDriverWait wait = (new WebDriverWait(driver, 30));
WebElement input = wait.until(ExpectedConditions.presenceOfElementLocated(By.id("PF_5")));
input.sendKeys("tests tests");
I need to get whole content of an iframe using selenium API in java.
This is the expected result:
<div id="WIN_0_304255502" arid="304255502" artype="View" ardbn="z2VF_02"
arcontainerid="304255802" arpercentwidth="100"
arpercentheight="100" class="arfid304255502 ardbnz2VF_02"
ardcf="1" style="top: auto; left: auto; width: 1318px;
height: 744px; z-index: 1135; min-width: 20px;
max-width: 32767px; min-height: 20px;
max-height: 32767px; position: relative; overflow: hidden;
background-color: transparent;"
arvfframe="<iframe style="top:0px; left:0px; width:1170px;
height:744px;
background-color: transparent;" name="VF304255502" frameborder=0
scrolling="no"
allowtransparency="true" arviewbordercolor="null" title="z2VF_02" src="javascript:"<HTML></HTML>""
onload="DVFol()">
</iframe>
" arwindowid="0" arstop="1">
//more elements
For now I try:
WebDriver driver= new HtmlUnitDriver();
driver.get(url3);
saveFile(driver.getPageSource());
After run the program, the result that I have it´s not what I expected. Maybe because of iframe that exists.
Result:
<div id="WIN_0_304255502" arid="304255502" artype="View" ardbn="z2VF_02" arcontainerid="304255802"
arpercentwidth="100" arpercentheight="100" class="arfid304255502 ardbnz2VF_02"
ardcf="1" style="top:0px; left:0px; width:1170px; height:744px;z-index:1135;background-color:transparent;min-width:20px;max-width:32767px;min-height:20px;max-height:32767px;"
arvfframe="<iframe style="top:0px; left:0px; width:1170px;
height:744px;background-color: transparent;" name="VF304255502"
frameborder=0 scrolling="no" allowtransparency="true" arviewbordercolor="null"
title="z2VF_02" src="javascript:"<HTML></HTML>""
onload="DVFol()">
</iframe>
">
</div>
I also try to access iframe (driver.switchTo().frame(driver.findElement(By.name("VF304255503")), but occurs an exception (org.openqa.selenium.NoSuchElementException: Unable to locate element with name: VF304255503).
I am creating my first chat program (with graphics in java) and i am using JavaFx Scene builder to create a GUI that contains of some pictures and then 1 - 2 men who can then chat with eachother.
the idea is that that when ever 1 of the clients that are connected to the server communicates with the other a small speech bubble will show.
My idea was to create this using a textfield that i would then edit in CSS so it will look like a speech-bubble.
how ever i have tried to look for the css style sheet to be able to configure my textfield but so far nothing has worked is anyone able to help me with this? so far the two style sheets ive tried are these:
.speech-bubble {
position:relative;
width: 320px;
padding: 10px;
margin: 3em;
background-color:#FFF;
color: #666;
font: normal 12px "Segoe UI", Arial, Sans-serif;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 10px solid rgba(0,0,0,0.095);
}
.speech-bubble p {
font-size: 1.25em;
}
.speech-bubble:before,
.speech-bubble:after {
content: "\0020";
display:block;
position:absolute;
top:-20px; /* Offset top the height of the pointer's border-width */
left:20px;
z-index:2;
width: 0;
height: 0;
overflow:hidden;
border: solid 20px transparent;
border-top: 0;
border-bottom-color:#FFF;
}
.speech-bubble:before {
top:-30px; /* Offset of pointer border-width + bubble border-width */
z-index:1;
border-bottom-color:rgba(0,0,0,0.095);
}
.bubble{
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0px 0px 6px #B2B2B2;
height: 200px;
margin: 20px;
width: 275px;
}
.bubble::after {
background-color: #F2F2F2;
box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
content: "\00a0";
display: block;
height: 20px;
left: -10px;
position: relative;
top: 20px;
transform: rotate( 45deg );
width: 20px;
}
The problem is when i add this to my textfield it does not change apperance i dont know if i am doing it wrong or if these style sheets does not fit a textfield
Hope someone is able to help me thank you in advance:
This CSS looks like web CSS which is not supported as far as I know. Valid JavaFX css properties generally start with "-fx". There is a reference here:
http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html
Make sure you have the speech-bubble CSS class on your text field controls. Try adding changes one by one and checking the result in SceneBuilder. When I try and make too many changes at once one of them inevitably doesn't work.