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"));
Here is HTML:
<select size="1" id="F_21__3" class="c3" style="position: absolute; left: 127px; top: 173px; width: 148px; height: 14px; font-style: normal; font-weight: normal; text-decoration: none; text-shadow: none; font-stretch: normal;" disabled="disabled">
<option value="I" des="Item">Item</option>
<option value="S" des="Service">Service</option>
</select>
How to check that text "Service" is visible with Selenium + Java?
Code to check if 'Services' is selected:
WebElement selectedByDefault= driver.findElement(By.xpath("//select[#id='F_21__3']"));
Select select = new Select(selectedByDefault);
if(select.getFirstSelectedOption().equals("Service"))
{
System.out.println("Services is displayed by Default.");
}
Code to check if text 'Service' is VISIBLE or not
String checkTextVisible = driver.findElement(By.xpath("//*[contains(text(),'Service')]").getText();
if(checkTextVisible.equals("Service")){
System.out.println(checkTextVisible + " text is visible");
}
It's not important if the field is disabled or enabled. You just find the correct selector and after that you can check it very easy.
String actualText = driver.findElemeny(By.cssSelector("yourSelector")).getAttribut("value");
Assert.assertEqual(actualText, "Service");
or more simple (but only if Service don't appear in another place on your page).
boolean presence = false;
if(driver.getPageSource().contains("Service")){
System.out.println("Text is present");
presence = true;
}else{
System.out.println("Text is absent");}
Assert.assertTrue(presence);
You can use getFirstSelectedOption() to get the visible selected dropdown.
#Findby(id="F_21__3")
private WebElement selectID;
Select s = new Select(selectID);
String selected = s.getFirstSelectedOption().getText();
Assert.assertTrue(selected.equals("Service"));
If you want to check if "Service" selected or not, code below will return true/false:
driver.findElement(By.xpath("//select[#id='F_21__3']/option[.='Service']")).isSelected()
I'm using anki and I'm trying to insert "hints" and explantions.
I took a code from this guy on youtube who created just that - the possibility of clicking on a hint symbol that will only then display the content of the hint.
That's the link to the video - https://www.youtube.com/watch?v=Hv0IxQSYZiM
That is the code he wrote that I insert to Anki -
http://pastebin.com/raw/tqWNkeHV
The problem I have is that I've got hint's that have mulitple lines / images in them, and this method won't allow me to show them in a good way. The code will only receive the first line in the "hint" category, and won't hide the rest of the content. It looks like this -
Example
Here is the current code -
{{Question}}
{{#Hint}}
<div id="hint" class="hidden">
<p class="trigger">[ click to show hint ]</p>
<p class="payload">{{Hint}}</p>
</div>
<script>
var hint = document.getElementById('hint');
hint.addEventListener('click', function() {
this.setAttribute('class', 'shown'); });
</script>
{{/Hint}}
And HERE IS THE STYLING -
.card { font: 1.5em/1.5 sans-serif; text-align: center; }
#hint { background: #f2fbe7; border: 1px solid #dff5c4; border-radius: 6px;
color: #7a876b; }
#hint.hidden:hover { background: #dff5c4; color: #000; cursor: pointer; }
#hint.hidden .payload { display: none; }
#hint.shown { background: #fff; color: #000; }
#hint.shown .trigger { display: none; }
#hint.shown .payload { display: block; }
Can anyone help me modify the JAVA / HTML code so I can insert all lines into the hints section?
Thank you very much.
In the third line of {{#Hint}} section, you must change from:
'<p class="payload">{{Hint}}</p>'
to:
'<pre class="payload">{{Hint}}</pre>'
I've been trying to select this WebElement for a while. It's a sign up button on the front page of the web application I test. I was wondering, is there a method I could use to grab text within the HTML to define a WebElement?
<div>
<div>
<div style="">
<div style="transform: translate(0px, 0px) scale(0.5, 0.5) rotate(0deg);">
<div role="img">
<img src="images/lsloginform/newskin/try_it_normal.png?1444658058414">
</div>
</div>
<div style="transform: translate(0px, 75px) scale(1, 1) rotate(0deg);">
<canvas height="7" width="75" style="top: 0px; left: 0px; width: 75px; height: 7px;"></canvas>
</div>
<div style="transform: translate(0px, 82px) scale(1, 1) rotate(0deg);">
<div style="font-family: franklin-gothic-ext-comp-urw; font-weight: 700; font-style: normal; font-size: 15px; opacity: 1; color: rgb(63, 63, 63); transform: translate(7px, 0px) scale(1, 1) rotate(0deg);">SIGN UP</div>
</div>
</div>
<div style="display: none;"></div>
<div style="display: none;">
<div style="transform: translate(0px, 0px) scale(0.5, 0.5) rotate(0deg);">
<div role="img">
<img src="images/lsloginform/newskin/try_it_MO.png?1444665385167">
</div>
</div>
<div style="transform: translate(0px, 75px) scale(1, 1) rotate(0deg);">
<canvas height="7" width="75" style="top: 0px; left: 0px; width: 75px; height: 7px;"></canvas>
</div>
<div style="transform: translate(0px, 82px) scale(1, 1) rotate(0deg);">
<div style="font-family: franklin-gothic-ext-comp-urw; font-weight: 700; font-style: normal; font-size: 15px; opacity: 1; color: rgb(63, 63, 63); transform: translate(7px, 0px) scale(1, 1) rotate(0deg);">SIGN UP</div>
</div>
<div></div>
</div>
<div style="display: none;"></div>
<div style="display: none;"></div>
</div>
</div>
Specific example, I'd like to the xpath of the above div utilizing the "SIGN UP" text at the end of the HTML. How do I go about doing that?
The application I test on is finicky as all hell, and being able to select by that attribute would make my life much easier. The reason this is a problem is because I need 3 different methods of grabbing an xpath: One for the button as normal, one for the hover, and another because the button changes momentarily when it is clicked. Most of my automation scripts look something like:
public class changeLanguageLogin {
public void run(WebDriver driver) {
WebElement changeLanguage = getWebElement(driver, "xpath", "img", "src", "select_application_language_normal");
Actions actions = new Actions(driver);
actions.moveToElement(changeLanguage).build().perform();
WebElement changeLanguageMO = getWebElement(driver, "xpath", "img", "src", "select_application_language_hover");
changeLanguageMO.click();
WebElement changeLanguageClicked = getWebElement(driver, "xpath", "img", "src", "select_application_language_pushed");
changeLanguageClicked.click();
}
private static By buildXPathExpression(String htmlElement, String attributeName, String attributeValue)
{
return By.xpath("//"+htmlElement+"[contains(#"+attributeName+",'"+attributeValue+"')]");
}
private static By buildCSSExpression(String htmlElement, String attributeName, String attributeValue)
{
return By.cssSelector(""+htmlElement+"["+attributeName+"='"+attributeValue+"']");
}
private static WebElement getWebElement(WebDriver driver, String operation, String htmlElement, String attributeName, String attributeValue)
{
By byObj = null;
WebElement webElementObj = null;
if(operation!= null)
{
if(operation.equals("xpath"))
{
byObj = buildXPathExpression(htmlElement,attributeName,attributeValue);
}
else if(operation.equals("cssSelector"))
{
byObj = buildCSSExpression(htmlElement,attributeName,attributeValue);
}
}
if(byObj != null)
{
webElementObj = driver.findElement(byObj);
}
return webElementObj;
}
}
Many, many, many times a day, one method of defining the xpath simply "will not work" and I have to scrounge around for another one. The goal is to not use any "hard coded" xpaths, as that was problematic when I had began the job.
So the answer I'm looking for: Define an xpath by the text in the HTML, "SIGN UP".
This response will not help if you are bound to only xpath or
css lookups.
Option 1
If you would be willing to add another case to your helper method I'm thinking that By.linkText may do what you're wanting?
/**
* #param linkText The exact text to match against
* #return a By which locates A elements by the exact text it displays
*/
public static By linkText(final String linkText) {
if (linkText == null)
throw new IllegalArgumentException(
"Cannot find elements when link text is null.");
return new ByLinkText(linkText);
}
Or possibly By.partialLinkText
/**
* #param linkText The text to match against
* #return a By which locates A elements that contain the given link text
*/
public static By partialLinkText(final String linkText) {
if (linkText == null)
throw new IllegalArgumentException(
"Cannot find elements when link text is null.");
return new ByPartialLinkText(linkText);
}
This would potentially be an issue if you're testing against a system that has been internationalized. Depending on the environment the locale of the user/browser would change the text you're looking for.
This can also be a maintenance issue if the text changes.
Option 2
If you have control of the HTML, you may consider adding id's to the elements on the page. With that then you can use the By.id lookup. From some of my preliminary research the element id is seen as one of the more reliable and consistent paths.
/**
* #param id The value of the "id" attribute to search for
* #return a By which locates elements by the value of the "id" attribute.
*/
public static By id(final String id) {
if (id == null)
throw new IllegalArgumentException(
"Cannot find elements with a null id attribute.");
return new ById(id);
}
Option 3
My final suggestion would be to try to implement your own By lookup. I would fall short on suggesting an implementation for the lookup, but if this behavior is what you're needing then you should be aware that you could potentially create a subclass to do what you're wanting.
Best of Luck.
For old time inlie style css, you generate the css selector depends on the style written for the div like "div[style*='paste_style_attribute']". However this method is not dependable because of duplication of same style.
For the following div:
<div style="font-family: franklin-gothic-ext-comp-urw; font-weight: 700; font-style: normal; font-size: 15px; opacity: 1; color: rgb(63, 63, 63); transform: translate(7px, 0px) scale(1, 1) rotate(0deg);">SIGN UP</div>
You can generate the following css selector:
"div[style*='font-family: franklin-gothic-ext-comp-urw; font-weight: 700; font-style: normal; font-size: 15px; opacity: 1; color: rgb(63, 63, 63); transform: translate(7px, 0px) scale(1, 1) rotate(0deg);']"
Java code:
driver.findElement(By.cssSelector("div[style*='font-family: franklin-gothic-ext-comp-urw; font-weight: 700; font-style: normal; font-size: 15px; opacity: 1; color: rgb(63, 63, 63); transform: translate(7px, 0px) scale(1, 1) rotate(0deg);']"))
What I am trying to do is when you hover over a name, show a tooltip popup with details of that name.
I did the following but for some reason, it doesn't seem to work. No tooltip shows up. When you hover over a name it calls a function and does an AJAX request and we get back details as string. I have verified that the function works fine and returns string.
I just can't seem to be able to get that returned string into the tooltip popup. I am testing this on IE8
Javascript Function:
function showDetails(name){
var xmlHttpRequest;
if(window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
}else{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP>");
}
xmlHttpRequest.onreadystatechange=function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById("details").innerHTML = xmlHttpRequest.responseText;
}
}
xmlHttpRequest.open("GET", "showStopsInfoPopup.do?name="+name, true);
xmlHttpRequest.send();
}
CSS
#tooltip { position: relative; }
#tooltip a{text-decoration: none;}
#tooltip a span { display: none; color: #FFFFFF; }
#tooltip a:HOVER span { display: block; position: absolute;
width: 200px; background-color: #aaa;
height: 50px; color: #FFFFFF; padding: 5px; }
JSP page:
<tr id="tooltip">
<td onmouseover="showDetails('${name}')">
<c:out value="${name}"><span id="details"></span></c:out>
</td>
</tr>
Only the relevant part of my view source page(generated html): "span" tag inside the "a" tag is missing!!
<tr id="tooltip">
<td onmouseover ="showDetails('NRT')">NRT </td>
</tr>
.
.
.
...
<span id="details">*****************</span>
I am assuming you are generating your data that's being displayed dynamically and that you have more than one row.
If so, then all the span tag in your table will have the same id("details"). You have to be able to distinguish between two rows.
What you can do is add a number to the id and increment the number as you go to the next row, so that each span tag has unique id.
<c:out value="${name}"><span id="details${index}"></span></c:out>
be sure to pass the index as an argument to your javascript function and make the following change.
function showDetails(name, index){
..
...
document.getElementById("stopsInfo"+index).innerHTML = xmlHttpRequest.responseText;
.
...
}
Can you view the source and show us the HTML generated. I tried this and it seems to work okay when just doing a quick test.