InvalidSelectorException 使用 CSS 选择器定位“data-”属性标注的元素
Posted
技术标签:
【中文标题】InvalidSelectorException 使用 CSS 选择器定位“data-”属性标注的元素【英文标题】：InvalidSelectorException using CSS selector to locate "data-" attribute notated elements 【发布时间】：2012-06-21 12:54:21 【问题描述】：动机
利用 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)。
【问题讨论】：
您是否尝试过替换或转义type 值中的引号？
是的，无济于事。现在继续调查，这似乎是一个时间问题，因为选择带有属性选择器的By.cssSelector 似乎比仅使用By.className 慢。它偶尔会失败。
@EliranMalka By.className 内部使用（至少在 Firefox 上）document.getElementsByClassName()（已缓存），因此应该几乎是即时的。 By.cssSelector 使用 document.querySelector() 和 document.querySelectorAll() 需要一段时间来解析和处理。如果是时间问题，我希望偶尔出现NoSuchElementException（可以修复），而不是奇怪的UnknownServerException。
【参考方案1】：
我也遇到了同样的异常。
所以我尝试通过Xpath而不是Css选择器定位元素，问题解决了
下面是有问题的代码
By.CssSelector("Css selector").GetAttribute("value");
有效的代码
By.XPath("Xpath of element").GetAttribute("value");
【讨论】：
【参考方案2】：您链接的参考是 Selenium IDE。
Selenium WebDriver 文档主要可以在官方网站here (basic usage) 和here (advanced usage) 上找到，也可以在here 上找到（又名“什么还没有进入文档”——尤其是FAQ、@987654325 @ 以及很多关于 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 变量不包含任何引号或反斜杠等。该构造肯定可以工作。如果没有，请发布新的异常堆栈跟踪，以便我们可以看到导致它的确切选择器。
【讨论】：
没什么好惊讶的 - IE8 支持所有 CSS2.1 选择器（以及带有一些奇怪错误的 IE7）。 @BoltClock 完全正确。这就是为什么我对这个问题如此困惑。显示的异常是一个明显的错误，但问题的Relevant code 部分中的 sn-p 应该可以正常工作。我真的很期待新的堆栈跟踪。
太棒了。非常感谢，您是绝对正确的 - 这应该有效，而且我似乎遇到了两个问题：1. 作为测试流程的一部分的时间问题，即元素没有及时附加访问权限，所以我使用重复的断言来调试它，并且 2. 双引号显示了我不知道的错误。
关于时机——最常见的做法是Implicit waits and where needed, Explicit waits, too.
@EliranMalka 我最近也写了这个：***.com/questions/11244697/…以上是关于InvalidSelectorException 使用 CSS 选择器定位“data-”属性标注的元素的主要内容，如果未能解决你的问题，请参考以下文章
selenium.common.exceptions.InvalidSelectorException：消息：给定的 xpath 表达式通过 Selenium 在 scrollIntoView 中使用
InvalidSelectorException 使用 CSS 选择器定位“data-”属性标注的元素
pycharm运行appium desktop录制的python脚本报错问题：selenium.common.exceptions.InvalidSelectorException: Message: