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"]
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.
Trying to check if the element set focus to using class header matching by text and getting error unable to locate the element. I know the header title which is 'My Details' in this example, and using this title, how to locate the element?
<div class="attribute-group-header card__header">
<h3 class="attribute-group-title card__header-title">My Details</h3>
</div>
Element should be focused //div[contains(.,'My Details')
To locate the h3 in your example code, use this xpath //h3[contains(text(),'My Details')]
To locate the div which has card__header in class, use this xpath //div[contains(#class,'card__header')]
It worked fine with this keyword and the X-path reference. Thank you all for guiding me to find the solution
Element should be enabled //h3[contains(text(),'${MyLinkText}')]
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"))
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 :)
I tried searching for option to apply css to parent div but failed to achieve it. I finally implemented the same with jquery. Do we have any option for the below jquery line to implement with css
$('.description').parent().prev().closest('div').css('padding-top', '10px');
Currently no, there is not. This is similar to a previous thread -
Is there a CSS parent selector?
However, you could just apply a class or id to your parent and select it in CSS using that newly set class/id.
Assuming your html looks a bit like this:
<div>
<div class="description">
............
</div>
</div>
Then the jQuery to target the parent of 'description' would be:
$('.description').parent().css('paddingTop', '10px');
Fiddle here: http://jsfiddle.net/EFmf8/
(changes colours instead of padding to better illustrate)
Pity there's no CSS selector for this . . .