Motivation
利用Selenium的CSS选择器机制以及CSS属性选择器和HTML5 data-
自定义属性来解决元素的特定钩子。
问题
使用上述方法查找分配有 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 属性选择器的任何限制。 该文件特别指出:
目前 css 选择器定位器支持所有 css1、css2 和 css3 选择器,除了 CSS3 中的命名空间,一些伪类(
:nth-of-type
,:nth-last-of-type
,:first-of-type
,:last-of-type
,:only-of-type
,:visited
、:hover
、:active
、:focus
、:indeterminate
)和伪 元素(::first-line
,::first-letter
,::selection
,::before
,::after
)。
您链接的参考是Selenium IDE。
Selenium WebDriver文档主要可以在官方网站上找到 这里 (基本用法) 和 这里 (高级用法),也可以在这里找到(又名"什么还没有进入文档" - 特别是常见问题解答,高级用户交互和关于Selenium内部的大量信息)。当然,信息的主要来源是JavaDocs。
无论如何。Selenium支持的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
变量不包含任何引号或反斜杠或其他什么。该结构绝对应该有效。如果没有,请发布新的异常堆栈跟踪,以便我们可以看到导致它的确切选择器。
我也得到了同样的异常。
所以我尝试通过 Xpath 而不是 Css 选择器定位元素,问题解决了
下面是有问题的代码
By.CssSelector("Css selector").GetAttribute("value");
有效的代码
By.XPath("Xpath of element").GetAttribute("value");