How do I find parents of pseudo element using selenium webdriver? - javascript

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("./.."));

Related

Changing value of span (Javascript) with Tampermonkey

I have a question regarding the modification of a value inside a class. I would like to change the value with Tampermonkey extension however I cant get it to work.
The initial code looks like this:
<div class="bzeTileValue bzeTileValueNegative">
<span class="bzeTileUnit">YYY</span>
<span>XXXX</span></div>
I would like to change the value of XXXX. Preferably before the site loads.
I tried already the document.getElementbyId("xxxxx").innerHTML=....; But couldn't get it to work unfortunately. Any help would be hugely appreciated.
Thanks a lot friends
The span containing XXXX is inside a div which has classes on it but no ID. This means that getElementById won't work. You can use Document.querySelector to get the div and then access the child nodes of that div. The span you are trying to access doesn't have any classes on it, but you can target it as the second child inside the div. Then you can change the value using innerHTML or innerText.
Altogether it looks like this:
document.querySelector('.bzeTileValue').children[1].innerHTML = 'New Value';

How to identify elements in the DOM to use in click button event?

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();

Selenium Webdriver can not locate element by xPath

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']

Clicking on span element existing in li in selenium

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

Why is Inspecting the DOM element showing something diff than using jQuery ID selector in console?

I'm working on displaying a graphic on a website. For some reason, when I inspect the element I see this:
<div id="canvas-daily" style="position:relative;" ng-if="currentMode == 'day'" class="ng-scope"><div class="circle-background"></div></div>
But when I do document.getElementById("canvas-daily") in my console I get a svg graphic inside the parent (canvas-daily) ID div. Why would this be happening and how can I fix/hack into this to append the content that is obviously there?
Edit - this answer has been rendered obsolete by edits the OP made to their question. It has not been deleted yet because of the conversation happening in comments.
To find the DOM element shown in the HTML in your question, you would just use this:
document.getElementById("canvas-daily")
Do NOT include the # in the string you pass to document.getElementById(). That is only used with more generic functions that accept CSS selectors like document.querySelectorAll(). document.getElementById() just takes a plain string that matches the ID you are looking for.

Categories

Resources