InvalidSelectorException使用CSS选择器来定位“data-”属性注释元素 [英] InvalidSelectorException using CSS selector to locate "data-" attribute notated elements
问题描述
要利用Selenium的CSS选择器机制以及CSS属性选择器和HTML5 data - 自定义属性
To utilize Selenium's CSS selector mechanism alongside with CSS attribute selectors and the HTML5 data- custom attribute to address specific hooks for elements.
使用上面的方法定位一个指定了CSS的元素classname和 data - 属性引发以下异常：
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/fxdriver@googlecode.com/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/fxdriver@googlecode.com/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();
}
我尝试了什么
。gs-a-btn [\data-value\]而不是gs-a-btn [data-value ='+ type +']。可在引用中查找信息，例如 Selenium Reference ，对CSS属性选择器的任何限制。该文档特别声明：
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:
目前，css选择器定位器支持除css3中的命名空间之外的所有css1，css2和css3
选择器，一些伪类（：nth-of-type，
：nth-last-of-type：first-of-type，：last-of-type，：only- -type，
：visited，：hover，：active，：focus，：indeterminate）和pseudo
元素（:: first-line，:: first-letter，:: selection，:: before，
:: after
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).
推荐答案
您链接的引用是针对Selenium IDE。
The reference you linked is for Selenium IDE.
Selenium WebDriver文档主要在官方网站这里（基本用法）和这里（高级用法），还可以是这里（又名尚未写入文档的内容） - 尤其是< a href =http://code.google.com/p/selenium/wiki/ FrequAskedQuestions =noreferrer>常见问题，高级用户交互和许多关于Selenium内部的信息。 的主要来源当然是 JavaDocs 。
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.
Selenium支持的CSS选择器是由它下面的浏览器支持的（除了Selenium RC，它有一个Sizzle CSS引擎），所以你的例子肯定会工作。使用这个简单的测试页：
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>
我可以在IE 8（!!）和Firefox 13中成功运行：
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();
所以我挖了更多。如果您尝试在FF13 Firebug控制台中运行以下任意内容：
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\"]")
与无效或非法字符串指定错误（在Firefox和IE中）是正确的（因此，您得到的错误消息是正确的，选择器无效）。
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.
这篇关于InvalidSelectorException使用CSS选择器来定位“data-”属性注释元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
