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']
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 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("./.."));
I am trying to create a program to select elements on the page, but it seems that the only thing that makes them unique are there titles. Is there any way of selecting certain things on a web page by their titles? I found this script but it will not select or click on the elements.
What am I doing wrong? Any help will do. Thanks
How can I get it to work on A and not div, sorry, that was the problem
My script that I am using --
$(document).ready(function () {
$("a[title=\"Learn More About Becoming A VIP\"]").click();
});
It says Div is not defined when I try to run script. Why So?
There is a way to select elements by their title attribute in javascript:
document.querySelectorAll('div[title="john"]');
======
You can also select elements that have a title beginning with john:
document.querySelectorAll('div[title^="john"]');
Or elements that have the (space-bounded) word john somewhere in their title:
document.querySelectorAll('div[title~="john"]');
Your selector should work if title value is john. You might wan't to select element that contains certain string as follow:
$('div[title*="john"]')
I'm attempting to create a system that, when one element is selected, shows an element of the same ID whilst hiding the previous without hiding all instances of that ID (i.e. it is only hidden if a certain class is present).
The first part (making an element 'active' and setting the ID variable) works fine, but I can't seem to get the secondary element to stop being set using the '.hidden' class.
The code I'm using for this part is
function showSelect() {
select = $(".active").attr('id');
$(".items").addClass("hidden");
$("#"+select).removeClass("hidden");
}
I've tried using $(select).remove... on the fourth line, as well as what is currently present, but to no avail.
The rest of the code can be found on http://jsfiddle.net/ActualRealJamz/2JZA6/
I'm not sure what I'm doing wrong here, and JSHint reports no syntax error of any kind - so in that there must be an error to my method.
If this happens to be of any use, Chrome reports an 'Unexpected identifier' on the line $(".items").addClass("hidden");.
Any help in this matter is most appreciated.
As Barmar pointed out in the comments, that fundamentally cannot work because you cannot have the same id on more than one element. If you do, the document is invalid and the browser is free to ignore the id values. (In practice, they typically act as though only the first element in the document with a given id value has that id, ignoring subsequent ones.)
You seem to be using the class items on the relevant elements, so it's straight-forward to do what you're looking to do. Assuming showSelect is attached to the relevant elements as a click handler, within showSelect, this will be the specific element that was clicked. So:
// Hooking it up
$(".items").click(showSelect);
// The function
function showSelect() {
$(".items").not(this).addClass("hidden");
$(this).removeClass("hidden");
}
No ids required at all.
I am using prototype 1.6.1 to insert and remove a div as a first child of another div.
So I have parent div 'A'
and I do
$('A').insert(divB,'top');
then later
$('B').remove();
This works fine, but if I create the same div a second time and then try to remove it again I get an error that $('B').parentNode is null. But if I look at $('A').innerHTML it does show the child div 'B' inserted. I am seeing this only on firefox (on IE8 works fine).
Any hints of why this behavior?
If Pointy's guess (multiple elements with the same ID in the document) wasn't correct, please post the example testcase (e.g. to http://www.jsfiddle.net/ or similar).