I encounter the following code in jsFiddle:
$("#start").click(function()
$("#bg >
img").addclass('animate');
));
What is meaning of > in the second code line?
Is a css selector.
> is the child combinator and selects immediate children.
In your example the imgs that are direct descendants (immediate children) of element with id="bg" will be selected.
Related
I have the below dom structure:
<h3 class="popover-title">
<div class="popup-title">
<div class="title-txt">Associated Elements  (5)</div>
</div>
</h3>
I am trying to write an xpath which will identify the title "Associated Elements" under h3 tag.
When my xpath is
//div[contains(#class, popover)]//h3[contains(.,'Associated Elements')]
the element is identified.
However when my xpath is
//div[contains(#class, popover)]//h3[contains(text(),'Associated Elements')]
the element is not identified.
As per my understanding the dot(.) is a replacement for text(), but then why does it not identify the element when I use the text() function.
However, for another dom structure:
<h3 class="popover-title">
<a class="btn-popover" href="#">x</a>
"Associated Elements"
</h3>
The xpath :
//div[contains(#class, popover)]//h3[contains(text(),'Associated Elements')]
&
//div[contains(#class, popover)]//h3[contains(.,'Associated Elements')]
works fine.
Can someone please explain the behaviour of dot(.) under both these scenarios?
Is there a better way to write an xpath that holds good for both the exmaples? Please suggest.
As selenium is tagged so this answer would be based on xpath-1.0 and the associated XML Path Language (XPath) Version 1.0 specifications.
contains(string, string)
The function boolean contains(string, string) returns true if the first argument string contains the second argument string, and otherwise returns false. As an example:
//h3[contains(.,'Associated Elements')]
Text Nodes
Character data is grouped into text nodes. As much character data as possible is grouped into each text node. The string-value of a text node is the character data. A text node always has at least one character of data. In the below example, text() selects all text node children of the context node:
//h3[text()='Associated Elements']
In your usecase, within the HTML the text Associated Elements  (5) have which is alternatively referred to as a fixed space or hard space, NBSP (non-breaking space) used in programming to create a space in a line that cannot be broken by word wrap. Within HTML, allows you to create multiple spaces that are visible on a web page and not only in the source code.
Analyzing your code trials
Your first code trial with:
//h3[contains(.,'Associated Elements')]
locates the element as it successfully identifies with partial text Associated Elements
Your second code trial with:
//h3[contains(text(),'Associated Elements')]
fails as the element contains some more characters e.g. in addition to the text Associated Elements.
Reference
You can find a couple of relevant discussions in:
How to locate the button element using Selenium through Python
What does contains(., 'some text') refers to within xpath used in Selenium
While fetching all links,Ignore logout link from the loop and continue navigation in selenium java
The text() in contains(text(),'Associated Elements') is a selector that matches all of the text nodes that are children of the context node - it returns a node-set. That node-set is converted to string and passed to the contains() function.
text() isn't a function but a node test. It is used to select all text-node children of the context node. So, if the context node is an element named x, then text() selects all text-node children of x.
When you use contains(., 'Associated Elements') only an individual text node is passed to the function and it is able to uniquely match the text.
Note: copied and edited from this and this post.
I am trying to get the xpath equivalent of this css_selector of this website.
To get 6 elements I add: div:nth-child(1). For xpath it would be //div[1] yet this makes no difference. I am wanting all the 6 numbers under the left result tab
Css:
div:nth-child(1) > proposition-return > div > animate-odds-change > div > div
Returns 6 elements
xpath (quite similar):
//div[#class='propositions-wrapper'][1]//div[contains(#class, 'proposition-return')]//animate-odds-change//div//div
Returns 18
I desire 6.
<div ng-repeat="odd in odds" class="animate-odd ng-binding ng-scope" ng-class="{
'no-animation': oddsShouldChangeWithoutAnimation
}" style="">2.05</div>
Those are totally different selectors:
CSS: div:nth-child(1) > proposition-return > div > animate-odds-change > div > div
Find every div that is the first child of its parent, then get its direct proposition-return child (I assume you wanted to use it like .proposition-return, then its direct div and so on..
XPATH: //div[#class='propositions-wrapper'][1]//div[contains(#class, 'proposition-return')]//animate-odds-change//div//div
Find all div elements with proposition-wrapper as class, then only get the first. After, find all div with proposition-return class that are descendant of the previous element and so on..
[1] is very different to nth-child(1) to begin with, and also // is not the same as >, but / is.
For getting the specific elements that you want, I would use this xpath:
//div[contains(#class, "template-item")]//div[#data-test-match-propositions]/div[1]//div[contains(#class, "animate-odd")]
that site is not available worldwide, but looking at the img you provided helps. as eLRuLL points out, your xpath is not equivalent to the css.
try getting rid of some of the double slashes
//div[#class='propositions-wrapper']//div[contains(#class, 'proposition-return')]/animate-odds-change/div/div[contains(#class, 'animate-odd')]
I am having three divs each with class myDiv(just for example). And each of div has unordered list with list items inside it.
So i can write down xpath as
By.xpath("//div[#class='myDiv']/ul/li")
I want the first myDiv only.
But this will give results of all three divs. How to get only first div contents. Please help to modify this xpath.
As discussed with the OP, following are potential xpaths to go with.
//li[contains(#id,'100_deal')]
(//div[#class='gbwshoveler-content'])[position()=1]
//div [#id="deals-onethirtyfive-hero10903707629515"]//ul/li
(//div[#class='gbwshoveler-content'])[1]
you can get first div using
By.xpath("//div[#class='myDiv'][1]/ul/li")
I have an issue clicking on the below HTML:
<div id="P7d2205a39cb24114b60b80b3c14cc45b_1_26iT0C0x0" style="word-wrap:break-word;white-space:pre-wrap;font-weight:500;" class="Ab73b430b430a49ebb0a0e8a49c8d71af3"><a tabindex="1" style="cursor:pointer;" onclick="var rp=$get('ctl00_ContentPlaceHolder1_ReportViewer1_ctl10_ReportControl');if(rp&&rp.control)rp.control.InvokeReportAction('Toggle','26iT0C0x0');return false;" onkeypress="if(event.keyCode == 13 || event.which == 13){var rp=$get('ctl00_ContentPlaceHolder1_ReportViewer1_ctl10_ReportControl');if(rp&&rp.control)rp.control.InvokeReportAction('Toggle','26iT0C0x0');}return false;"><img border="0" src="/Reserved.ReportViewerWebControl.axd?OpType=Resource&Version=10.0.30319.1&Name=Microsoft.ReportingServices.Rendering.HtmlRenderer.RendererResources.TogglePlus.gif" alt="+"></a> 2013</div>
I have used the below script to click anchor inside a div tag. For the above html code it is not fixed only end part of id example "26iT0C0x0" is fixed. The script that I have used is:
WebElement e1=wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//div[ends-with(#id,'26iT0C0x0')]/a")));
e1.click();
You can use the 'contains' method within an xpath lookup:
driver.findElement(By.xpath("//div[contains(#id,'26iT0C0x0')]")
I would recommend you to consider CSS selector alternative as CSS working faster, than xpath.
So 'contains' in attribute in CSS stands for '*=', for example
if we want to find attribute by 'CSS' ending in this: <htmlTag A="blablaCSS" > we need do the following:
String CSSselector="htmlTag[A*=CSS]";
and you get this element searched.
So considering your example CSS selector be like:
String cssSearched="div[id*=26iT0C0x0] a";
also try to click not on link - a
but on parent div as well:
String cssSearched="div[id*=26iT0C0x0]";
driver.findElement(By.cssSelector(cssSearched));
hope this works for you.
As Mark Rwolands already mentioned: the xpath-Function 'ends-with()' isn't supported in Selenium 2.
Also, if you maybe consider to use chromeDriver in the future, I would recommend clicking the image, not the anchor, see:
https://sites.google.com/a/chromium.org/chromedriver/help/clicking-issues
edit:
Also your IDs are looking generated. I wouldn't count on them for a stable test-environment.
If your prepend a FORM element with a P element, elements below the DIV in the example will not be selected!
<P><FORM id=f ...
<INPUT ...>
<DIV><INPUT (this element is not selectable)
</DIV>
</FORM>
No $('#f INPUT').events will happen in IE for the second input above
Try the testcase at: http://jsfiddle.net/jorese/Bzc7M/
In IE you will receive an alert=3, remove the P element in front of the FORM element and you get the expected alert=5. In Chrome|FF you get alert=5 as expected.
Can somebody explain this?
Your HTML code is not valid, it contains a few errors, the reason why some browsers render it is that they tolerate invalid code to some extent by trying to guess what the developer originally wanted to write.
The div element can be used to group almost any elements together. Indeed, it can contain almost any other element, unlike p, which can only contain inline elements.
Use div instead:
http://jsfiddle.net/mshMX/
Sitepoint reference: http://reference.sitepoint.com/html/p
W3 reference http://www.w3.org/TR/html4/sgml/dtd.html
A former StackOverflow question about the same problem: Why <p> tag can't contain <div> tag inside it?