How can i use findelement , to locate the 3rd div element from the element that has the id=1.custom-system-user.generatepassword and then the img element inside the third div sibling ?
please note that there is no guarantee that the table element is the first sibling, so what i need is access the third div relative to the table element Only (I can't rely on the div being the n-th sibling) ?
P.s - is there such a thing "nested" css selectors/locators ( table+div+div+div>img )?
Note
My simplified example (id attribute has been added only for debug purposes):
<html>
<body>
<table id="0.custom-System-User.generatePassword">Table</table>
<div>Foo</div>
<div>Bar</div>
<div>
<div>
<div>
<img id="my-image" />
</div>
</div>
</div>
</body>
</html>
Python script:
from selenium import webdriver
browser = webdriver.Chrome()
browser.get(URL)
el = browser.find_element_by_xpath('//table[contains(#id, generatePassword)]/following-sibling::div[3]//img')
el.get_attribute('id')
Output:
In [5]: el.get_attribute('id')
Out[5]: u'my-image'
xpath selector might be like '//table[contains(#id, generatePassword)]/following-sibling::div[3]/div/div/img'.
Assuming that there will be three div elements, you can use xpath easily
driver.findElement(By.xpath("//div[#class='x-form-item'][3]/div/div/img"))
try the following xpath:
"//div[contains(#id, '1.custom-System-User.x-auto')]//img"
If not working, can you please expand all sections of the provided HTML, since I can't know what's exactly there.
can you try this
driver.findElement(By.xpath("//table[#id='0.custom-System-User.generatePassword']/div[3]/div/div/img"))
Related
Normally, CSS works by matching element names in the HTML:p.heading1 {} affects all elements of type p with class heading1.
Is there a way to display an object/text that only exists as an attribute?
For example, this is my HTML:
<body var="text I want to insert">
<div class="titlepage">
<p class="titlepagetext">this should also be displayed</p>
The title page has a number of <p> children. In addition to them, I want to display the content of body/var on the title page.
You can probably consider CSS variables. The custom property will get inherited by all the elements inside the body and you can use pseudo element to display it where you want:
.titlepage:before {
content:var(--var);
}
<body style="--var:'text I want to insert'">
<div class="titlepage">
<p class="titlepagetext">this should also be displayed</p>
</div>
</body>
AH Formatter has an -ah-attr-from() extension function that will let you get the contents of an ancestor's attribute (see https://www.antennahouse.com/product/ahf66/ahf-ext.html#attr-from).
You could use -ah-attr-from() in a rule for .titlepagetext::before.
When you using css, you can't target parent. There is no way to get parent selector. And content: "" can apply only for pseudo-classes.
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
I have below code and want to locate the element for css or xpath.
<div class="arrowIconDiv" data-dojo-attach-point="arrowIconDiv">
<div class="i-arrow-double" data-dojo-attach-point="NavAreaExpander"> /div>
<div class="i-arrow-double-hover" data-dojo-attach-point="NavAreaExpanderHover"></div>
Tried multiple things but was not able to locate and click on the element.
(by.css(".arrowIconDiv"))
(by.css('[data-dojo-attach-point="arrowIconDiv"]'))
(by.xpath('.//div[#class="i-arrow-double-hover"][.="NavAreaExpanderHover"]'))
Thanks in advance
NavAreaExpanderHover is value of data-dojo-attach-point attribute, not the content of the div element. So instead of using . in the XPath, use the attribute name :
.//div[#class="i-arrow-double-hover" and #data-dojo-attach-point="NavAreaExpanderHover"]
I have a HTML like this in my QWebView
<div class='a' id='root'>
<div id='x'>...</div>
<p> ...
<p>
...
<div id='x2'>...</div>
<div>
<a href='go/xxxx'>go</a>
</div>
</div>
How do I select the a? I tried this selectores:
div[id='root'].a
div[id='root'] + a
but it didn't worked. Code:
QWebFrame* frame = webView->page()->mainFrame();
QWebElement button = frame->documentElement().findFirst("div[id='root'].a");
assert(!button.isNull()); // gets executed
Your selector is selecting the div with id='root' and class='a'. If you want to select the a tag inside of that div, you need to make your selector:
div[id='root'].a a
The additional 'a' at the end of the selector tells jquery to select the a inside of the div.
You can switch to using XPath 2.0 in Qt to have more expressive freedom, but then you need to process your HTML as XML.
To resolve, add a descendant selector1 for a. I.e., change this div[id='root'].a into this:
div[id=root].a a
As an alternative, if there's a bug in Qt, try:
div[id=root][class=a] a
Or (which is potentially a bit wider):
div[id~=root][class~=a] a
These last two are just alternatives in case for some reason the original fix to your code (adding the a descendant selector) didn't work.
The code snippets above doesn't use quoted strings, this is optional.
1 adding a was seen in stevenc4's answer), after my original (wrong) solution. Kudos to him :)
With the below HTML, how i can select the DIV depper (which has no children)?
I think that i can use nth-last-child but dont work because all divs has the last (and also the first)! :D
PD: Not is possible the use of the ID or CLASS property in the DIV deeper (because they are HTML existent files in web)
Html:
<div class="base">
<div>
<div>
<div>
<div>
<!-- recursive divs (quantity not defined...) -->
</div>
</div>
</div>
</div>
</div>
CSS selectors cannot look to the parent elements, sadly, so you can't see which elements don't have divs as children.
If you are using jQuery, you can do this to find the element:
$('.base :not(:has(*))').addClass('deepest');
Demo: http://jsfiddle.net/EhZax/
You'll have to use Javascript. Here's an example using jQuery:
$('.base *').filter(function(){
return ! $(this).find('> *').length;
});
See it here in action: http://jsfiddle.net/E6sec/
Update: If you want to, you could create your own :sterile selector. Here's an example:
jQuery.expr[':'].sterile = function(el) {
return ! el.children.length;
};
You could then just use it as you would any other pseudo selector:
$('.base :sterile');
Here's the fiddle: http://jsfiddle.net/FBw5q/
P.S. I used the native el.children since it's way faster than any of jQuery's methods. However, IE < 9 will include comments as children. If that concerns you, you can use jQuery's children() method.
You need Javascript for that. It's not possible with CSS only