Question

我正在尝试检查通过javasrcipt更新的标记的css属性。他们将css直接放在标签中：

<div class="myclass" style="color: red; display: block; -webkit-transform -translate3d(x,x,x);

我可以通过style s WebElement方法访问getAttribute属性，但仅会返回'普通'CSS。即在上面的示例中，仅返回color:red;display:block。 Selenium的-webkit方法不会返回getAttribute（或类似浏览器特定的任何内容）。

有没有办法通过Selenium访问这些值？

Answer 1

Selenium元素有一个getCssStyle 方法。 getCssStyle（＆＃34; -webkit-transform＆＃34;）可以提取值吗？

修改（适用对拼写错误道歉。它实际上是getCssValue

Answer 2

Selenium没有返回转换规则的原因是因为它是一个格式错误的CSS。

我的意思是你的transform CSS属性缺少一个冒号。

https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax

CSS中的属性和值都区分大小写。该对由冒号分隔，'：'（U + 003A COLON）

所以这是糟糕的网络开发。在那种情况下，你对Selenium的期望是什么？把它的手伸向空中并从恶劣的情况中获得最大的好处是无能为力的 - 我的意思是它正在返回它可以（其他属性）。

您可以通过查看Selenium的源代码进一步验证这一点。记住Selenium是开源的，所以代码是你的最终文档，以找出它正在做什么或做什么。

具体做法是：

https://github.com/SeleniumHQ/selenium/blob/master/javascript/atoms/dom.js#L225

基本上，第一部分可以简化为：

var styleArray = "color: red; display: block; -webkit-transform -translate3d(x,x,x);".split(new RegExp('[;]+(?=(?:(?:[^"]*"){2})*[^"]*$)(?=(?:(?:[^\']*\'){2})*[^\']*$)(?=(?:[^()]*\\([^()]*\\))*[^()]*$)'))

在Chrome的JS控制台中运行它并查看结果。它正确显示：

["color: red", " display: block", " -webkit-transform -translate3d(x,x,x)", ""]

这是剥离它的下一步：

var i = pair.indexOf(':');

您的转换规则没有它，因此不会返回。这是正确的。

然后你可以通过进一步来证明这一点，通过CSS验证服务来证明这一点，比如CSS Lint：

http://csslint.net/

现在，那些style属性本身并不是CSS样式表，所以将它们放在一起以形成样式表：

a {
color: red;
display: block; 
-webkit-transform -translate3d(x,x,x);
}

我们得到了什么？

Expected COLON at line 4, col 19.
-webkit-transform -translate3d(x,x,x);

我不会开始用JS来破解它，而是修复你的应用程序。

我怀疑，这不会导致CSS被破坏，因为我怀疑浏览器能够很好地理解其意图。

Answer 3

我不知道为什么Selenium会吞下特定于供应商的风格，但你可以自己解析这个风格：

String rawDiv = div.getAttribute("outerHTML");
String style = rawDiv.replaceFirst("(.*?)style=\"", "").replaceFirst("\".*", "");

在样式属性中访问特定于供应商的CSS属性？ Selenium似乎默认忽略它

3 个答案: