动机
利用 Selenium 的 CSS 选择器机制以及 CSS 属性选择器和 HTML5 data- 自定义属性来解决元素的特定 Hook 。
问题
当使用上面的方法来定位分配有 CSS 类名和 data- 属性的元素时，会引发以下异常:
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)
相关代码
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 属性选择器的任何限制。该文件特别指出:
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。
Selenium WebDriver文档主要可以在官方网站here (basic usage)上找到和 here (advanced usage) ，还有here (又名“尚未进入文档的内容” - 尤其是 FAQ 、 Advanced User Interactions 以及有关 Selenium 内部结构的大量信息)。 主要信息来源当然是 JavaDocs .
<小时/>无论如何。 Selenium 支持的 CSS 选择器是其下的浏览器支持的 CSS 选择器(Selenium RC 除外，它具有 Sizzle CSS 引擎)，因此您的示例肯定可以工作。使用这个简单的测试页面:
<!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 中成功运行此程序:
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 控制台中运行其中任何一个:
document.querySelector(".field[data-test]")
document.querySelector(".field[data-test=testytest]")
document.querySelector(".field[data-test='testytest']")
它返回正确的元素。但是，其中任何一个:
document.querySelector(".field['data-test']")
document.querySelector(".field[\"data-test\"]")
失败并出现“指定了无效或非法字符串”错误(在 Firefox 和 IE 中均如此)，该错误是正确的(因此，您收到的错误消息是正确的，选择器无效)。
请再试一次，删除任何引号，确保您的type变量不包含任何引号或反斜杠或其他内容。该构造肯定应该有效。如果没有，请发布新的异常堆栈跟踪，以便我们可以看到导致它的确切选择器。
关于selenium - InvalidSelectorException 使用 CSS 选择器定位 "data-"属性标记的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11101736/