17

动机

利用 Selenium 的 CSS 选择器机制以及 CSS 属性选择器和 HTML5data-自定义属性来解决元素的特定钩子。

问题

使用上述方法定位分配有 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 参考资料)中查找有关 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)。

4

2 回答 2

12

您链接的参考适用于 Selenium IDE。

Selenium WebDriver 文档主要可以在官方网站here (basic usage)here (advanced usage)上找到,也可以在here (aka "What didn't make it into the docs yet" - 特别是FAQ , Advanced User Interactions和很多有关 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变量不包含任何引号或反斜杠或诸如此类的东西。该构造肯定可以工作。如果没有,请发布新的异常堆栈跟踪,以便我们可以看到导致它的确切选择器。

于 2012-07-01T17:29:33.793 回答
0

我也遇到了同样的例外。

所以我尝试通过Xpath而不是Css选择器定位元素,问题解决了

以下是有问题的代码

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

有效的代码

By.XPath("Xpath of element").GetAttribute("value");
于 2021-03-03T14:57:29.617 回答