Can anyone help me with the css selector for the below element. Here there are multiple elements available with same class name. Please use inner text to form a css selector for this
<div class="title kpi-tile3-title o9-tooltip" data-o9title="Safety Stock">Safety Stock</div>
It is not possible.
Selenium CSS Selectors do not support locating elements based on their text content.
See this or this or other similar questions about that.
EDIT
Try this:
driver.find_element_by_css_selector("div:contains('Safety Stock')")
or this:
driver.find_element_by_css_selector("div[data-o9title='Safety Stock']")
Related
How to write a CSS Selector selecting elements NOT having a certain attribute?
I have 2 <div> nodes as follows:
First:
<div class="weEq5" style="will-change; width;">
<button class="_35EW6">
Second:
<div class="weEq5">
<button class="_35EW6">
I need to select the <div> (with the similar class) and each of them which have a similar descending <button> but without the style attribute.
XPath seems working fine as:
//div[#class and not (#style)]/button
I am looking for an equivalent CssSelector.
Trials:
div[class :not(style)]>button (doesn't works).
I have been through the following discussion but they seem to be discarding the class attribute as :not([class]) as in:
Can I write a CSS selector selecting elements NOT having a certain class?
Is it possible to define in CSS NOT to apply style if element have certain class? [duplicate]
I was looking in similar lines ending with :not(attribute).
I think more accurate CSS Selector is:
div[class]:not([style])>button
because the button element is a child of div element.
Hope it helps you!
That's the code you're looking for:
div:not([style]) button{
background-color: red;
}
Now let's break it down.
We have have four selectors in this example:
div and button - these select html elements. We can replace it for example with a class selector like .weEq5.
:not() - indicates that we want everything that does not qualify as the selector inside the brackets.
[style] - an attribute selector which is very powerful. We can place inside the not any other css selector like html tag names (button or div), class names or ids.
The combination of div:not([style]) means that we want all divs that do not have a style attribute. After which we have a space and a button means that we want all the buttons that are inside the above selector.
Adding a > before the button div:not([style]) > button will only select button elements which are direct children of the selected div. It will exclude from selection buttons that are deeper inside the div.
Normally, you would write :not([style]) to match an element that does not have a style attribute, as described here which emphasizes the use of both () and [] brackets, in that order.
But if this isn't working in Selenium WebDriver, and worse still if :not(style) works exactly like how I would expect :not([style]) to, then that's a bug with its CSS selector parser, since :not(style) actually means "not a style element" which makes div:not(style) redundant as an element can only either be a div or a style but not both at the same time. Unless you absolutely require a selector, I strongly recommend using the XPath locator strategy instead of relying on quirks like this with Selenium WebDriver's CSS selector engine that force you to write selectors that are both incorrect and don't work anywhere else that accepts a selector.
I do not understand how the situation developed in the first place, where the structure of the page necessitates the CSS rules to be aware of whether "style=..." exists in the document itself. Or even why style=... is being used.
The style attribute is old-school now, pre-CSS I believe. It also takes precedence over anything in the CSS. That attribute does not accept CSS class names. It accepts only native html style properties like "width","height","font" - old-school stuff - ultimately those are what your CSS resolves to, no matter how fancy or obfuscated it is through frameworks: font, width, left, top, float.. and so on.
By use of the class attribute (instead of style) in the document you get infinite control from which to write smart selectors in your CSS.
You can put 3 classes in the class attribute of your div for example, if you want, and have your selectors apply styling to it if 2 of the classes are present but not if all 3 are there. Tonnes of flexibility, no need to override or use "style=..." in the document at all.
I am trying to locate below link by using a[text='This is a link'] and a[innertext='This is a link'] but both of them are not working.
I know this can be achieved by using XPath or other ways, but I am curious why CSS Selector that I have used is not working. refer this link.
<a title="seleniumframework" href="http://www.seleniumframework.com" target="_blank">This is a link</a>
You are trying to locate a link by using the following CssSelectors:
a[text='This is a link']
a[innertext='This is a link']
As per Issue#987 and Issue#1547:
The :contains pseudo-class isn't in the CSS Spec and is not supported by either Firefox or Chrome (even outside WebDriver).
You can find a detailed discussion in selenium.common.exceptions.InvalidSelectorException with “span:contains('string')”
Solution
As per the HTML you can use either of the following solutions:
CssSelector using the attribute title:
"a[title='seleniumframework']"
CssSelector using the attribute href:
"a[href='http://www.seleniumframework.com']"
CssSelector using the attributes title and href:
"a[title='seleniumframework'][href='http://www.seleniumframework.com']"
The right CSS Selector for your case is:
a[title="seleniumframework"]
or
a[href="http://www.seleniumframework.com"]
You can also use this one: a[target="_blank"], but the ones above are more unique.
Hope it helps you!
Since you are trying to use attribute selector, you can only select from available attributes that the hyperlink element currently has.
text is not available attribute in html so selecting it this way through css will not work.Rather you should try to use other attribute like a[title=seleniumframework] for example.
<span class="benefit_subtitle"> - What applications are utilizing my network?</span>
This is same path is giving more than 6 matchings.. I need to select the one element from the path using only css selector
css : span.benefit_subtitle
I want to covert this xpath into css
By.xpath('(//span[#class="benefit_subtitle"])[3]')
This should work.
driver.findElement(By.cssSelector(span[class=benefit_subtitle]:nth-of-type(3)))
Sauce labs has a good page on these.
How to change this below Xpath to css? Please help.
//button[text()='Continue' and #class='buttonLargeAlt' and #type='submit']
Unfortunately, you can't.
The problem is that CSS selectors can't find by text. Therefore, you can't translate text()='Continue' XPath to a working CSS selector. This is one of the two main reasons for XPaths to be actually used till today for HTML elements selecting.
There was a :contains() pseudo class for this in CSS3, but it's long gone. Sizzle, the JS engine for CSS selecting in Selenium, has kept it, though. So if your browser doesn't support native CSS selecting (or you disable it), you can use it like this:
button.buttonLargeAlt:contains('Continue')[type='submit']
I normally use this cssify, This is pretty cool
I have a web page with a form and has a field that uses the jquery autocomplete function.
This is how the HTML renders after a user name returns 1 or more results.
However I cannot figure out how to make Selenium "click" a result.
Can I do a jQuery type of selector.
e.g.
$(".ul.ui-autocomplete li:first a")
Use XPath selector in Selenium:
xpath=//li[contains(#class, 'ui-autocomplete')]/li[1]/a
not checked, might require some corrections.
in response to "Can I do a jQuery type of selector," jQuery uses CSS selectors. Selenium can also use CSS selectors; just prefix the selector with "css=". so:
css=.ul.ui-autocomplete li:first a
Next way to use xpath like this
xpath=/html/body/ul[2]/li[1]/a
Suppose you have a dynamic XPATH then you can point to an element like this
driver.findElement(By.className(""));