17

Motivation

To utilize Selenium's CSS selector mechanism alongside with CSS attribute selectors and the HTML5 data- custom attribute to address specific hooks for elements.

Issue

While using the above to locate an element assigned with a CSS classname and the data- attribute, the following exception is thrown:

Caused by: org.openqa.selenium.remote.ErrorHandler$UnknownServerException: The given selector .gs-a-btn["data-value"] is either invalid or does not result in a WebElement. The following error occurred:
[Exception... "An invalid or illegal string was specified"  code: "12" nsresult: "0x8053000c (NS_ERROR_DOM_SYNTAX_ERR)"  location: "file:///C:/DOCUME~1/eliranm/LOCALS~1/Temp/anonymous6109849275533680625webdriver-profile/extensions/[email protected]/components/driver_component.js Line: 5956"]
Build info: version: '2.23.1', revision: '17143', time: '2012-06-08 18:59:28'
System info: os.name: 'Windows XP', os.arch: 'x86', os.version: '5.1', java.version: '1.6.0_31'
Driver info: driver.version: unknown
    at <anonymous class>.<anonymous method>(file:///C:/DOCUME~1/eliranm/LOCALS~1/Temp/anonymous6109849275533680625webdriver-profile/extensions/[email protected]/components/driver_component.js:6537)

Relevant Code

public void previous(String type) {
    By cssSelector = By.cssSelector(".gs-a-btn[data-value='" + type + "']");
    driver.findElement(cssSelector).click();
}

What have I tried

  • replacing single quotes with escaped double quotes inside the attribute selector query.
  • specifying attribute selector instead of attribute-value selector, i.e. ".gs-a-btn[\"data-value\"]" rather ".gs-a-btn[data-value='" + type + "']".

  • to look up information in references, such as the Selenium Reference, for any restrictions on CSS attribute selectors. the document specifically states that:

    Currently the css selector locator supports all css1, css2 and css3 selectors except namespace in css3, some pseudo classes(:nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type, :visited, :hover, :active, :focus, :indeterminate) and pseudo elements(::first-line, ::first-letter, ::selection, ::before, ::after).

Improve this question
3
  • Have you tried replacing or escaping quotes in the type value? Commented Jun 19, 2012 at 13:34
  • yup, with no avail. now continuing in the investigation, it seems like a timing issue, as choosing By.cssSelector with attribute selectors seem slower than merely using By.className. it is failing sporadically. Commented Jun 19, 2012 at 13:37
  • @EliranMalka By.className internally uses (at least on Firefox) document.getElementsByClassName() (which is cached) and should, therefore, be almost instant. By.cssSelector uses document.querySelector() and document.querySelectorAll() which takes a while to parse and process. If it's a timing issue, I'd expect an occasional NoSuchElementException (which can be fixed), not a strange UnknownServerException. Commented Jul 1, 2012 at 17:35

2 Answers 2

Reset to default
13

The reference you linked is for Selenium IDE.

Selenium WebDriver documentation can be found mainly on the official site here (basic usage) and here (advanced usage), but also here (a.k.a "What didn't make it into the docs yet" - especially the FAQ, Advanced User Interactions and lots of info about Selenium internals). The main source of information are, of course, the JavaDocs.

Anyway. The CSS Selectors supported by Selenium are those supported by the browser beneath it (with the exception of Selenium RC which has a Sizzle CSS engine), so your example should definitely work. Using this simple testpage:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <input type="text" id="myInput" class="field" data-test="testytest" />
    </body>
</html>

I was able to sucessfully run this in both IE 8 (!!) and Firefox 13:

WebDriver driver = new FirefoxDriver();
driver.get("path to the file");
By cssSelector = By.cssSelector(".field[data-test='testytest']");
        // or By.cssSelector(".field[data-test=testytest]")
        // or By.cssSelector(".field[data-test]")
driver.findElement(cssSelector).sendKeys("Hello");
driver.quit();

So I digged more. If you try to run any of this in FF13 Firebug console:

document.querySelector(".field[data-test]")
document.querySelector(".field[data-test=testytest]")
document.querySelector(".field[data-test='testytest']")

it returns the right element. However, any of this:

document.querySelector(".field['data-test']")
document.querySelector(".field[\"data-test\"]")

fails with "An invalid or illegal string was specified" error (both in Firefox and IE) which is correct (and, therefore, the error message you got was right, the selector is invalid).

Please, try once more, get rid of any quotes, make sure your type variable doesn't contain any quotes or backslashes or whatnot. The construct should definitely work. If it doesn't, post the new exception stack trace so we can see the exact selector that caused it.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Nothing to be surprised about - IE8 supports all CSS2.1 selectors (as well as IE7 with some strange bugs).
@BoltClock Exactly. That's why I'm so baffled about the problem. The exception shown was a clear mistake, but the snippet in the Relevant code section of the question should work ok. I'm really looking forward to the new stack trace.
great. thanks a bunch, you are absolutely correct - this should have worked, and it seems i've had two problems: 1. timing issues as part of the test flow, i.e. element was not attached in the time of access so i used repetitive assertions to debug that, and 2. the double quotes manifested errors i was unaware of.
About the timing - the most usual thing to do are Implicit waits and where needed, Explicit waits, too.
@EliranMalka I also recently wrote this: stackoverflow.com/questions/11244697/…
|
1

I was also getting the same exception.

So I tried it by locating element through Xpath instead of Css selector and the problem was solved

Below was the Code having the problem

By.CssSelector("Css selector").GetAttribute("value");

Code which worked

By.XPath("Xpath of element").GetAttribute("value");
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.