I am trying to select an option from a drop-down that does not populate until the locator has been clicked. This my solution but it's not working.
List<WebElement> options = driver.findElements(By.cssSelector("mat-select"));
for (WebElement option : options) {
if (option.getAttribute("ng-reflect-value").contentEquals("50757")) {
Actions build = new Actions(driver);
build.moveToElement(option).click().build().perform();
}
}
HTML of the dropdown.
<div role="listbox"
tabindex="-1"
class="ng-tns-c114-22 ng-trigger ng-trigger-transformPanel mat-select-panel mat-primary"
id="mat-select-0-panel"
aria-multiselectable="false"
aria-labelledby="mat-form-field-label-27"
style="transform-origin: 50% 22px 0px; font-size: 15px; opacity: 1; min-width: calc(100% + 32px); transform: scaleY(1);">
<mat-option
_ngcontent-tqo-c274=""
role="option"
class="mat-option mat-focus-indicator mat-active ng-tns-c114-22 ng-star-inserted"
ng-reflect-value="50757"
id="mat-option-0"
tabindex="0"
Please try with the below code: If possible please share the application URL then I can replicate it from my side.
WebElement option = driver.findElement(By.xpath("//mat-
option[contains(text(),'option text')]");
driver.waitUntilElementVisible(option, 10);
driver.findElement(option).click();
Also please refer link for more details on selecting a particular value in a dropdown without using the methods of Select class in Selenium
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"));
it's been a long time ago i last scripted a website i'm just started making a portfolio website to show my photo's, i have al my photo as thumb image on a page and use this script for a lightbox:
https://www.w3schools.com/howto/howto_js_lightbox.asp
it's nice and simple, but it won't work wel with my website layout my mainnav hover over the image and try to prevent this by this script:
// Open the Modal
function openModal() {
document.getElementById('myModal').style.display = "block";
var mainnav = document.getElementsByClassName("hoc clear");
mainnav[slideIndex-1].style.display = "none";
}
// Close the Modal
function closeModal() {
document.getElementById('myModal').style.display = "none";
var mainnav = document.getElementsByClassName("hoc clear");
mainnav[i].style.display = null;
}
now my navigation bar will stay above the image but when you close the image it wont delete the style i gave him?
can some one help me out?
Website http://www.kiekda.eu/p/gallery
You could try changing the z-index of the .modal CSS class to a higher number - change it from z-index: 1; to z-index: 9999;:
.modal {
display: none;
position: fixed;
z-index: 9999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
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.