Say I have this HTML:
<body>
<div>
</div class="Something-generated-is7293n">Hello</div>
</div>
</body>
How would I go about finding this considering the following constrains:
This is for testing purposes so I don't want to assume a certain structure. This way if a <div> suddenly is added to the HTML, my xPath won't break my test.
I cannot even try to guess what the class will be. I can only know it will contain, say, Something and generated.
I tried //div[contains(#class, 'Something') and contains(#class, 'generated')] with no success at all, which makes me think I'm missing something to have xPath evaluate only part of a class.
Of note, my tests use ChimpJS with uses WebdriverIO.
This xpath-fiddle might do the trick for you: http://xpathfiddle.net/UN71EW
Related
A document has several <div class="ok"> tags. I am able to select all of them with
"//*[#class="ok"]" (i don't have to specify div, because only div tags have this class). I get a list of 6 nodes matching this.
Now, i need
either to test each node in order to see if it includes the tag <a href="soft://an.id/">. This inclusion is not direct. I mean, the <div> includes a <table> with many <tr> and <td> and <span>, and the <a..> (only one, or none) somewhere before </div>.
or to directly select only (div) nodes of class="ok" that include this <a> tag.
I have tried many things, that all fail. Including protecting the "/" in the href detection (is it required?).
I am quite familiar with regular expressions, but i must confess that i find XPath syntax even harder to understand.. And the W3C reference documents are so hard, without examples..
Any hints are welcome.
In order to select only <div class="ok"> element containing <a href="soft://an.id/"> child element you can use the following XPath locator:
"//div[#class='ok' and .//a[#href='soft://an.id/']]"
If I understand you correctly, you have a nested somewhere under the div with class "ok", right?
So in xpath, the a / is meant for a direct locator under/above the current tag. If you are looking for the somewhere under the found div, you need to use:
//div[#class="ok"]//a[#href="soft://an.id/"]
Then you need to check if it exists or not by using some kind of an assertion.
Why would you use "div class" instead of "div id"
Usually when I name a div I use "id" to give a name to an element and with set parameters. I really only use "class" to give it special characteristics. For my example .
However, I have a professor who will "class" to identify all his divs. For example prof example .
Can someone explain the benefit of something like "div class" instead of "div id".
<div class="some_class">
<p>This can be used any number of times on one HTML page</p>
</div>
<div id="some_id">
<p>This CAN be used multiple times with the same ID,
but it is invalid code, as a specific ID should
only be used ONCE per html page</p>
</div>
Here's an older yet still good explanation.
ID are unique for the page, so it's better for identification.
Class aren't unique and are supposed to be to group similar style things together.
Said otherwise, if you need to apply something to THAT SPECIFIC div, you should call it by the id, because it will take priority over other CSS styles that may affect it.
Classes will allow you to set some common ground in your style so you can use similar fonts or sizes in different kind of elements.
If you are using Javascript there is a big advantage of using classnames to identify elements instead of id's.
Giving an id to an element also creates a global javascript variable with the same name. See Do DOM tree elements with ids become global variables? for more about that behaviour.
Having such implicitly created variables is at best confusing, and at worst leading to hard to find errors.
This is almost going to sound like a joke, but I promise you this is real life. There is a site on the internet, one which you have all used, that does not believe in css classes. Everything is defined directly in the style tag on an element. It's horrifying.
My problem though is that it also makes the html extraordinarily difficult to parse. The structure that I've got to go on looks something like this:
<td>
<a name="<random_string>"></a>
<div style="generic-style, used by other elements">
<div style="similarly generic style">{some_stuff}</div>
</div>
<a name="<random_string>"></a>
...
</td>
Basically, I've got these a tags that are forming the boundaries of the reviews, whos only defining information is the random string that is their name. I don't actually care about the anchor tags, but I would like to grab the reviews between them using xpath.
I've looked into sibling queries, but they don't seem to be well suited for alternating boundaries. I also looked into the Kayessian method of xpath queries, which (aside from having an awesome name) only seems well suited to grab a particular div, rather than all divs between the anchor tags.
Any thoughts on how I could grab the divs here?
If //td/div[../a[#name]] works for you, then the following should also work :
//td[a/#name]/div
This way you don't need to go back and forth -or rather down and up-. For a more specific selector, you may want to try the following :
//td/div[preceding-sibling::*[1][self::a/#name]][following-sibling::*[1][self::a/#name]]
The XPath selects div element having all the following properties :
td/div : is child of <td> element
[preceding-sibling::*[1][self::a/#name]] : preceded directly by <a> element having attribute name
[following-sibling::*[1][self::a/#name]] : followed directly by <a> element having attribute name
I figured it out! It turns out that xpath will allow for relative attribute assertions. I am not sure if this behavior is desired, but it happens to work in this case! Here's the xpath:
//td/div[../a[#name]]
Nice and clean, the ../a[#name] basically just says:
Go up a level, and make sure on that level of the hierarchy there's an a element with a name attribute
I have a HTML file in the below format :-
<div class="container">
<div class="hello"><p>1</p></div>
<div class="goodbye">2</div>
<div class="hello"><p>3</p></div>
<div class="goodbye">4</div>
</div>
Please recommend me a program which could remove a particular div tag by its class name and save the output file as below :-
<div class="container">
<div class="goodbye">2</div>
<div class="goodbye">4</div>
</div>
The whole division along with its internal tags should be removed. I have used jQuery, but it does not affect the source code.
Thanks in advance.
You can use .remove():
Remove the set of matched elements from the DOM.
$('.container .hello').remove();
Side note: You can use .find() to speed up above selector:
$('.container').find('.hello').remove();
You can get the element having class hello within container and call .remove()
Live Demo
$('.container .hello').remove();
Similar to .empty(), the .remove() method takes elements out of the
DOM. Use .remove() when you want to remove the element itself, as well
as everything inside it. In addition to the elements themselves, all
bound events and jQuery data associated with the elements are removed.
To remove the elements without removing data and events, use .detach(), jQuery docs
So, nobody actually seemed to read what OP asked for.
Here's an answer for a JavaScript Regular Expression, very dirty and unflexible, but matching your needs.
<div class=.(\w*)?.><(.*)</div>
Still you may run into problems, because I don't know any editor actually using JavaScript RegEx.
Basically, everything about problems you might run into has been already said in this famous thread: RegEx match open tags except XHTML self-contained tags
I'm trying to automate the Google Translate web interface with Selenium (but it's not necessary to understand Selenium to understand this question, just know that it finds elements and clicks them). I'm stuck on selecting the language to translate from.
I can't get to the point where the drop-down menu opens, as seen in the screenshot below.
Now, I want to select 'Japanese'.
This xpath expression works: $b.find_element(:xpath,"//*[#id=':13']/div").click But I would rather have one where I can just input the name of the language.
This xpath expression also works: $b.find_element(:xpath,"//*[contains(text(),'Japanese')]").click But only as long as there is no other 'Japanese' text on the page.
So I'm trying to narrow down the scope of my xpath, but when I try to specify the path to take to find the 'Japanese' text, the expression no longer works, I can't find the element: $b.find_element(:xpath,"//*div[#id='gt-sl-gms']/*[contains(text(),'Japanese')]").click
It also no longer works for the original xpath either: $b.find_element(:xpath,"//*div[#id='gt-sl-gms']/*[#id=':13']/div").click
Which is weird, because to bring down the drop-down menu, I use this xpath $b.find_element(:xpath,"//*[#id='gt-sl-gms']/*[contains(text(),'From:')]").click.
So it's not that I have two wildcards in my expression and it's not that my expression is too specific. There's something else that I'm missing and I'm sure it's really simple.
Any suggestions are appreciated.
Edit Other things I have tried unsuccessfully:
$b.find_element(:xpath,"//*/div[#id='gt-sl-gms']/*[#id=':13']/div").click
$b.find_element(:xpath,"//*[#id='gt-sl-gms']/*[#id=':13']/div").click
$b.find_element(:xpath,"//*[#id='gt-sl-gms']//*[#id=':13']/div").click
If the div with "#id=':13'" is an descendant of the div with "#id='gt-sl-gms" your xpaht "//*[#id='gt-sl-gms']//*[#id=':13']/div" would work.
The above xpaht expect that the html looks somehow like:
<div id="gt-sl-gms">
<div>
<div id=":13">
<div></div>
</div>
</div>
</div>
If <div id="gt-sl-gms"> in not an ancestor (as I expect) you have to look for an "real" ancestor, or you may use following (for nodes later in the document) or following-sibling (for nodes later in the document at the same level as the previous.
*div is incorrect, it should be just div. Also, depending on he structure of the HTML, you may need // instead of /.
Try selecting descendants (//) instead of (/*) which is really grandchildren or deeper.