In this page I want to access the Game Locations table :
<h3><span class="mw-headline" id="Game_locations">Game locations</span></h3>
<table class="roundy" style="margin:auto; border: 3px solid #A040A0; background: #78C850; padding:2px; width: 100%; max-width: 740px;">
I use this in order to reach the h3 tag and after get the following sibling element which is the table:
WebElement gameLocationsHeader= driver.findElement(By.xpath("//*[text() = 'Game locations']"));
However , I don't know how to reach the following sibling element (table) , I've tried using :
gameLocationsHeader.findElement(By.xpath("./following-sibling:*"));
But its not working , any hint ?
Node matched by your XPath is span. This element is NOT a sibling of table. So you need to locate h3 which is parent of span and sibling of table
Try below code-lines to get required result:
gameLocationsHeader= driver.findElement(By.xpath("//h3[span='Game locations']"));
gameLocationsHeader.findElement(By.xpath("./following-sibling::table"));
Related
I am writing automation UI tests for my web page using selenium.
I have an element on the web page which I am testing:
<< input type="checkbox" id="screening_questions[0].multiple_choice[0]-dealbreakerField" value="on" style="position: absolute; cursor: inherit; pointer-events: all; opacity: 0; width: 100%; height: 100%; z-index: 2; left: 0px; box-sizing: border-box; padding: 0px; margin: 0px;>
Since the element has id attribute, so I tried to locate it by using its id value but it didn't work.
If I search for that element in chrome console as:
$('#screening_questions[0].multiple_choice[0]-dealbreakerField')
I get the exception: Uncaught DOMException:
Failed to execute '$' on 'CommandLineAPI': '#screening_questions[0].multiple_choice[0]-dealbreakerField' is not a valid selector.
I thought it will be pretty straight forward to locate it given its id value. Could you please suggest what could be wrong here?
This error message...
Failed to execute '$' on 'CommandLineAPI': '#screening_questions[0].multiple_choice[0]-dealbreakerField' is not a valid selector.
...implies that the Locator Strategy you have adapted is not a valid selector.
As per the HTML you have shared the desired element is a <input> tag with type attribute as checkbox and to use the id attribute you have to escape the . characters and you can use either of the following options :
cssSelector :
"input[id=\"screening_questions[0].multiple_choice[0]-dealbreakerField\"][type='checkbox']"
xpath :
"//input[#id=\"screening_questions[0].multiple_choice[0]-dealbreakerField\"][#type='checkbox']"
I'm trying to automate a functionality using selenium in my Application Chrome browser. It's an SVG graph based page and shows details upon mouse over it. And this is identifiable with a CSS selector which is returning more than one matching elements(i.e. 6-7 dl , these dls has few child tags then internally containing the values I need to verify -as attached), now my need to select them one by one at a time and verify text of them(which displayed on mouse over).
I got to know on google how to read nth-child from dl but not getting a way to select particular dl at first place.
For example-
my selector is: .d3-tip.n>dl
if I use -.d3-tip.n>dl>dt:nth-child(odd): its giving me all the attributes of dt.. ie 6 values but I nedd values only from fst dl.
Similarly.d3-tip.n>dl>dd:nth-child(even) returning the 6 values of respected dds..
In Actual my app has only one dl (on UI) but don't know why it displaying 6 in DOM...
Plz refer attachment and HTML for a clear understanding of DOM
<div class="d3-tip n" style="position: absolute; top: 44.5px; opacity: 0; pointer-events: none; box-sizing: border-box; left: 515px;">
<dl style="width:335px">
<dt>Space Name:</dt>
<dd>Space</dd>
<dt>Property Type:</dt>
<dd>Office</dd>
<dt>Quoted Area:</dt>
<dd>444 sf</dd>
<dt>Space Usage:</dt>
<dd>Business Park,Commercial School</dd>
<dt>Space Status:</dt>
<dd>For Lease</dd>
<dt>Possession Status:</dt>
<dd>Vacant</dd>
</dl>
<span class="d3-tip__pin"/>
</div>
<div class="d3-tip n" style="position: absolute; top: 44.5px; opacity: 0; pointer-events: none; box-sizing: border-box; left: 515px;">
<dl style="width:335px">
<dt>Space Name:</dt>
<dd>Space</dd>
<dt>Property Type:</dt>
<dd>Office</dd>
<dt>Quoted Area:</dt>
<dd>444 sf</dd>
<dt>Space Usage:</dt>
<dd>Business Park,Commercial School</dd>
<dt>Space Status:</dt>
<dd>For Lease</dd>
<dt>Possession Status:</dt>
<dd>Vacant</dd>
</dl>
<span class="d3-tip__pin"/>
</div>
<--! and so on up to 6 blocks of dl
nth-child is to find the nth-child of any immediate parent element. In your HTML DOM, dd is single child element of each div.d3-tip element. The repetitive child is actually your div.d3tip for it immediate parent element
So your selector has to be written as below to get the first set of dd,
div.d3-tip:nth-child(1)>dl>dd
Getting the second selector also works. This is most important while writing css selector. The second nth has to work. :).
Ok, so I am not sure which of the elements you want...
So... here is a snip that should give you help.
A) with hovering.
B) with looping through the elements.
C) Bonus learn about contains() functionality of XPath...
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.action_chains import ActionChains
url = "http://your_url"
path_to_chromedriver = "C:\path_to_chromedriver"
chrome_options = Options()
#chrome_options.add_argument("--headless")
chrome_options.add_argument("--start-maximized")
browser = webdriver.Chrome(executable_path=path_to_chromedriver,
chrome_options=chrome_options)
browser.get(url)
# list_of_dt_elements_to_hover = browser.find_elements_by_xpath("//div[contains(#class,'d3-tip')]//dl/dt")
list_of_dt_elements_to_hover = browser.find_elements_by_xpath("//div[class='d3-tip n']//dl/dt")
list_of_dd_elements_to_hover = browser.find_elements_by_xpath("//div[contains(#class,'d3-tip')]//dl/dd")
hover = ActionChains(browser).move_to_element(list_of_dt_elements_to_hover[0])
hover.perform()
for dd_ele in list_of_dt_elements_to_hover:
hover = ActionChains(browser).move_to_element(dd_ele)
hover.perform()
print(dd_ele.text)
for dd_ele in list_of_dd_elements_to_hover:
hover = ActionChains(browser).move_to_element(dd_ele)
hover.perform()
print(dd_ele.text)
I hope you find this helpful!
I am writing automation UI tests for my web page using selenium.
I have an element on the web page which I am testing:
<< input type="checkbox" id="screening_questions[0].multiple_choice[0]-dealbreakerField" value="on" style="position: absolute; cursor: inherit; pointer-events: all; opacity: 0; width: 100%; height: 100%; z-index: 2; left: 0px; box-sizing: border-box; padding: 0px; margin: 0px;>
Since the element has id attribute, so I tried to locate it by using its id value but it didn't work.
If I search for that element in chrome console as:
$('#screening_questions[0].multiple_choice[0]-dealbreakerField')
I get the exception: Uncaught DOMException:
Failed to execute '$' on 'CommandLineAPI': '#screening_questions[0].multiple_choice[0]-dealbreakerField' is not a valid selector.
I thought it will be pretty straight forward to locate it given its id value. Could you please suggest what could be wrong here?
This error message...
Failed to execute '$' on 'CommandLineAPI': '#screening_questions[0].multiple_choice[0]-dealbreakerField' is not a valid selector.
...implies that the Locator Strategy you have adapted is not a valid selector.
As per the HTML you have shared the desired element is a <input> tag with type attribute as checkbox and to use the id attribute you have to escape the . characters and you can use either of the following options :
cssSelector :
"input[id=\"screening_questions[0].multiple_choice[0]-dealbreakerField\"][type='checkbox']"
xpath :
"//input[#id=\"screening_questions[0].multiple_choice[0]-dealbreakerField\"][#type='checkbox']"
I have a Web application which implements Canvas tags . Inside one canvas section there are multiple buttons and other elements. I want to click on the button inside that canvas tag using Selenium WebDriver, But unable to find locators(id,xpath etc) using inspect element, selenium IDE or Firepath etc. Even I am unable to see any other tags inside canvas tag.
Is there any way to get the locators of the elements inside canvas tag or any way to interact with these elements using Selenium WebDriver?
canvas tag:
<canvas style="padding: 0px;
margin: 0px; border: 0px none;
background: none repeat scroll 0% 0% transparent;
position: absolute;
top: 0px; left: 0px;
width: 360px;
height: 360px;"
width="360" height="360"/>
Did you try using parent tag in your xpath? Since inside one canvas section there are multiple buttons, you can try /parent::*[canvas attributehere]/parent::*[another-canvas attribute here] .. and so on until you get the specific element
One solution would be using x and y co-ordinates.
driver.switchTo().window(frame);
WebElement canvas= driver.findElement(By.id("canvas"));
Actions action2 = new Actions(driver);
action2.moveToElement(canvas, canvas.getLocation().getX()+ELEMENTS_DISTANCE_FROM_CANVAS_X, canvas.getLocation().getY()+ELEMENTS_DISTANCE_FROM_CANVAS_Y).click().build().perform();
Maybe this Java tutorial could be helpful for someone this is the essential code from it:
var canvas_dimensions = canvas.getSize();
int canvas_center_x = canvas_dimensions.getWidth() / 2;
int canvas_center_y = canvas_dimensions.getHeight() / 2;
int button_x = (canvas_center_x / 3) * 2;
int button_y = (canvas_center_y / 3) * 2;
// Click button on the canvas
new Actions(driver)
.moveToElement(canvas, button_x, button_y)
.click()
.perform();
Is it possible to use pure CSS selectors to give a nodes children (in my case ULs) different properties, in particular height, based on the amount of siblings the child have?
For example, if a node has 1 child, the height of the UL is automatic, however if the node has 2 children, then those children's height is say '200px'?
Are you looking for:
If the list item is the only child, its height will be auto. If there are multiple list items, the list items will all have a height of 200px.
ul li {
height: 200px;
}
ul li:only-child {
height: auto;
}
Just to note, only-child is supported on all browsers except for IE8 and older.
http://reference.sitepoint.com/css/pseudoclass-onlychild
I'm not fully sure about browser compability, but
ul li:first-child:last-child {
height: auto;
}
Works aswell and in the end, makes a whole lot of sence :)
Assuming that the reason of the question is that your UL's are generated dynamically you can use the same code to define an unique ID's to those UL's so the CSS can be applied properly
CSS is not a logical language. You can't use "if this do that" logic. So you should use jQuery for this practice.
EDIT
Here is your required code
var liCount = $("ul li").size(); // How many list items UL' have
var constant = 10; // Constant px Value for calculate new pixel.
$("ul li").css("height",constant*liCount); //Css manipulation
$(".result").html(constant*liCount+"px is the li's height"); // what is the result
<ul>
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
<li>Fourth List Item</li>
</ul>
You can test this
in jsfiddle (i defined height in jquery for seeing changes)
http://jsfiddle.net/guJBt/1/