Does anyone know why this CSS selector works in Firefox but not in IE7 or IE8?
css=div[style~='visible;'] div[class~='x-combo-list-item']:contains('Test Job')
I'm using this in a Selenium test to find an element on the page.
Edit: The :contains selector is not the problem. I'm using it elsewhere in my tests and it works in IE6, 7, and 8.
I know that Selenium attempts to support all of CSS3 for all browsers in it's selector engine. It may be that it does not support multiple levels of the attribute selectors in IE.
You might be stuck with an XPath "locator" this one
Alternatively, you could try:
div[style~='visible'] .x-combo-list-item:contains('Test Job')
Probably because the :contains pseduo-class is a CSS3 addition and whatever version of IE you're using (you didn't specify) probably doesn't support :contains.
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors
Related
It seems that in AngularJS 1.2.13 (and as far back as 1.0.8), the ng-repeat directive creates DOM comments around the repeated elements. This is breaking in IE8 because the first-child is not the element but the comment. Is there a way to suppress the comments in Angular or do they serve a higher purpose? I know I can put a first-child class based on $first in the directive, but I don't want to if I don't have to.
Thanks.
P.S.
I have all proper shims and polyfills and best practices in place otherwise.
Update
IE8 is acting like it is IE7 for some reason, which is triggering this issue. I am still digging into why that is happening.
The problem came about when using IE9.js as a shim, it was somehow making IE8 behave like IE7 rather than IE9, I reduced the ES5 shims down to the bare minimum and now things are working as expected.
SeleniumHQ says that each driver supports whatever CSS Selectors its browser supports. According to this site, IE 9 should support the :nth-of-type() selector. However, I appear to be getting a NullPointerException from the depths of the RemoteWebDriver class when I execute findElements on this selector. My By.cssSelector looks like this:
table#ucsp_dgMultiSelect tr:nth-of-type(2) input#cbPres
This works fine on Chrome. Maybe IE 9 has a problem with putting that selector in the middle there, I don't know, but that would break a lot of my code. The :nth-of-type() selector has become my go-to for identifying WebElement locators within a table. Has anyone else had success using the :nth-of-type() selector as a locator with WebDriver and IE 9?
I'm using IEDriverServer.exe.2.25.2.0 and my IE version is 9.0.8112.16421 64-bit
WebDriver does, in fact, support the CSS selectors that the browser does, and if IE9 supports the :nth-of-type() selector, then so should the IE driver. However, that's not the entirety of the story. If the DOCTYPE in your page is not a modern standard (e.g. <!DOCTYPE html>, IE also tries to guess at how it's supposed to render the document, and if it guesses that it should be rendering it as a previous IE version, it'll use the CSS selector engine of that previous version.
Since you're using IE9, there's a very easy way to see if WebDriver should be able to find the element with the selector you're trying to use. Open the "F12 Developer Tools" by hitting the function key F12 while you're on the page you're interested in. Go to the Script tab in the Developer tools, and type
document.querySelector('table#ucsp_dgMultiSelect tr:nth-of-type(2) input#cbPres')
If the console displays the element information, then WebDriver should be able to find it. If not, then IE can't find it, and WebDriver never will either.
This debugging technique will work anytime you're trying to find an element using CSS selectors in IE9, and is invaluable in helping find out if the problem is IE or if it's the driver. Additionally, the F12 Developer Tools also will tell you what mode IE is trying to render the page in, which can also be instructive.
When trying to target an image based on it's width attribute value it works in all versions of IE except version 7.
Example here: http://jsfiddle.net/mGcE5/
Anyone got the same experience or explanation?
IE7 have buggy support for this selectors: [attr], +, :first-child (but stable for .class1.class2, > and ~)
So if you want stable support for this selector in IE7 -> the only way to use same jQuery selector
Can any CSS3 experts tell me the best strategy for handling the before and after pseudo elements with IE6 and IE7?
If you use jQuery it is a simple one-liner. Just use prepend() and inject a span with a class .before (for the simplicity of changing the CSS). I've made a fiddle for you.
I write a small script for old IE to add special elements in DOM. (Via IE conditional comments.) The rest of common browsers get this by pure CSS. The downside is I have to write the code twice. The upside, I have IE only code in one place.
Does anyone know which browsers/version support them?
Is it safe to use them, or should I resort to PHP / javascript to generate first/last classes?
:first-child and :last-child, along with complimentary compatibility chart.
:first-child is supported IE9 properly, and IE7 and IE8 sort of (see chart).
:last-child is supported by IE9+ only.
Both of them are supported well by the good browsers.
"Can I use..." should be your go to resource for these types of questions. Here's are the compatibility tables:
first-child - http://caniuse.com/#feat=css-sel2
last-child - http://caniuse.com/#feat=css-sel3
Here's a nice table illustrating different browser support.