I have been trying in selenium to click span element which has class named bullet. It's a tree structure where it expands it's children once clicked. I have tried in the following way, but it's not working.
Below is the UI Code
<ul id="treelist" class="ltree">
<li class="liClosed">
<span class="bullet"> </span>
<b>Setup</b>
<ul>
<li></li>
<li></li>............
.....................
</ul>
</li>
</ul>
The error is:
The given selector //*ul[#id='treelist']//li[2]//span is either invalid or does not result in a WebElement
The code I am using is:
WebDriver driver = new FirefoxDriver();
driver.get("http://somewebapp");
WebElement userElement = driver.findElement(By.xpath("//*ul[#id='treelist']//li[2]//span"));
I tried many ways of editing the xpath, but couldn't succeed. Can someone please help solve this issue?
The XPath expression is indeed invalid, remove the * before the ul:
//ul[#id='treelist']//li[2]//span
Here is an another alternative to locate the desired span tag:
//ul[#id='treelist']//span[#class='bullet']
Or, with a CSS selector:
driver.findElement(By.cssSelector("ul#treelist span.bullet"));
If you aren't tied to XPath, you can try a simple CSS selector.
WebElement userElement = driver.findElement(By.cssSelector("span.bullet"));
Looks like you need to deal with an element that exists inside of a frame. You can google lots of examples of how to do this but here's one from SO.
Find elements inside forms and iframe using Java and Selenium WebDriver
Your span.bullet is not within the second li, it's within the first one. Try
//ul[#id='treelist']//li[1]//span
Related
Trying to learn some Javascript now that I have a few months of Python under my belt. Having trouble with HTML elements on a page which uses Javascript (not sure that is the right wording).
I have a simple Chrome Extension which I am trying to tell it to click a button when the page loads.
The DOM shows this code more or less:
<body class="skin-mark toolbar-open table-active">
<div class="tile-tables"></div>
</body>
My attempt at clicking the button has been multiple ways similar to this:
document.querySelector('#tile-tables').click();
Any help in understanding the process here and what I am doing wrong would be great! Thanks in advance! Feel free to correct me at any place and I will fix my language.
When you use getElementById you have to pass an element's id to it. There is only one element with an id in your HTML, the outer userActActions-51 - so, if you were to select by ID first, you would do
document.getElementById('userActActions-51')
and then you would access the second nested child:
const userActions = document.getElementById('userActActions-51');
const span = userActions.children[0].children[0];
span.click();
But it would be more convenient to use querySelector for this, which will allow you to use a selector string to select the span descendant of the element with the id userActActions-51 at once:
document.querySelector('#userActActions-51 span').click();
If the element might not exist, then make sure that it exists before trying to click on it:
const span = document.querySelector('#userActActions-51 span');
if (span) span.click();
I am using two different ways to access a web element with Selenium webdriver (JavaScript).
The first way uses a number indicating third div element in the parent div. The code is like this:
driver.findElement(By.xpath("//div[#id='sld-layer-container']/div/div/ul/li[2]/div/div[2]/div/div[3]/select/option[2]")).click();
This code doesn't work. It returns error: ElementNotVisibleError: element not visible: Element is not currently visible and may not be manipulated
The second way uses class to identify the specific div in parent div. Code is like this:
driver.findElement(By.xpath("//div[#id='sld-layer-container']/div/div/ul/li[2]/div/div[2]/div/div[#class = 'col-md-5']/select/option[2]")).click();
As you can see, the only difference is the identifier of last div element in xPath string. They should indicate the same thing. Magically the second one works but not the first one.
Here is a screenshot of css elements. The div highlighted is what I am trying to locate.
Can anyone help me with this?
Update 1:
As #Mahipal and #iamkenos required, I expended the div and now it is showing select and option. I thought the issue was only caused by not being able to locate the div but it seems not. Please help further.
you can try as below:
Select select = new Select (driver.findElement(By.xpath("//div[#id='sld-layer-container']/div/div/ul/li[2]/div/div[2]/div/div[3]/select")));
select.selectByVisibleText("PROJECT_VALUE");
you can try with below xpath as well...
//div[#id='featureClassList']//div[#class='col-md-5']
I would like to retrieve parent web element of pseudo element (If it could be named parent), but as far as I know selenium's methods of searching for web elements are not suitable for searching pseudo elements.
However, JavaScript manipulates pseudo elements freely, so I would like to ask, if there is a method that could return css selector/xpath of parent web element for pseudo element (To be more precise "::after") in JavaScript.
In other words, I've got this:
<html>
<body>
<label id="parent">
<span> Some text </span>
::after
</label>
</body>
</html>
And I would like to get that:"#parent"
Thank you in advance.
If you need to select parent based on text of span, then you can use something like this :
driver.findElement(By.xpath("//label[.//span[text()='Some Text']]"));
The above code will help you find that label which is followed by a span with text = "Some Text".
If you are not sure of the tag and you are sure of getting the results using javascript. Try executing the JavaScript Code in selenium using the below syntax: (Python)
driver.execute_script("document.querySelector('#item'), ':after'")
Update the script as per your requirement in your case to find the parent also.
Let me know in comments below if this doesnt help you.
Find child element first and add context node to the child element, like this:
WebElement child = driver.findElement(By.xpath("xpath of child"));
WebElement parent = child.findElement(By.xpath("./.."));
so since I started studying JavaScript I've been reading this book called Learning JavaScript by Tim Wright.
In this book I found a chapter about how we can move and target elements in the DOM tree and one of them is making use of properties which target siblings, while doing the exercises in the book I simply could not make the following statement work:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<script>
//Should add "next" class attribute to the "Contact Us" li tag.
document.getElementById("about").parentNode.nextSibling.setAttribute("class", "next");
</script>
After having a quick look at this code I was wondering if any of you more experienced developers could help me and explain me why this doesn't work properly. I feel confused because I can't know whether I'm doing something wrong or the article about these properties is misspelled.
Anyway thanks for your time and help in advance!
Cheers!
cs.almeida
nextSibling selects the very next sibling of the element. The very next sibling node can also be a textNode that doesn't have setAttribute method, i.e. what your code tries to do is adding a class to the next sibling textNode. If you remove the line break and other hidden characters between the 2 li elements then you code will work as expected.
Another option is using the nextElementSibling property instead of the nextSibling, which will select the next sibling node that has nodeType of 1, i.e. the next HTMLElement sibling of the element.
document.getElementById("about")
.parentNode
.nextElementSibling
.classList // https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
.add("next");
Trying to select span within the first item in a usorted list but I can't quite seem to get the DOM right
<li class="chapterItem"> <a
href="http://www.neuromanga.com/mangaReader.php?chapterNo=12&#pageNo=1"
title="http://www.neuromanga.com/mangaReader.php?chapterNo=12&#pageNo=1
">Naruto 522 world</a> <span
id="date">Nov 21st 2010</span> <br>
<span style="display:none"
class="hiddenChapNo">12</span> </li>
Here is the jQuery code I been trying to use to select it
alert($('li').first().$('.hiddenChapNo').text());
You need to use .find() to get a descendant here, like this:
alert($('li').first().find('.hiddenChapNo').text());
Or a bit more compact with :first and a descendant selector (space):
alert($('li:first .hiddenChapNo').text());
Your code certainly looks like it should work, I assume that there's another <li> before this one that trips it up.
Also, ids are (should be) unique in a web page, so $('#hiddenChapNo') should be sufficient.
Assuming you need multiple hidden spans, the proper way to mark them would be <span class="hiddenChapNo"> (you can then also hide them with CSS instead of inline styles).
Try just using alert($('#hiddenChapNo').text());. An id should be unique on a page, use classes if you need otherwise.
Found a solution
alert($('.hiddenChapNo').first().text());