使用Cucumber / Selenium测试CSS计数器

Question

我正在尝试创建步骤定义的一个要求是每个元素都应该编号。是否有用于检查项目是否具有正确的CSS生成内容的API？

我们正在使用Selenium，Cucumber＆amp; Capybara测试我们的应用程序。

我们想要自动测试的CSS：

ul {
    counter-reset: steps;
}

li:before {
    content: counter(steps) ".";
    counter-increment: steps;
}

或者，我们可以将实际内容放在DOM中，但我不喜欢只是为了满足webdriver而编写代码，这对于编号问题来说是一个很好的解决方案，或者坚持手动测试这种行为。

修改 为了澄清，我认为这将需要一个外部API来查询，例如Selenium Webdriver，因为getComputedStyle不返回实际呈现的内容：http://jsfiddle.net/yTUnt/

Answer 1

很明显，没有公共的标准接口可以查询计数器的值：

• How to access CSS generated content with JavaScript

• How can I read the applied CSS-counter value?

自从这些问题最初被提出以来，没有任何证据表明情况发生了变化，并且现在可以做到这一点。

也许我们可以使用浏览器向其自己的测试套件公开的私有API，以检查我们的应用程序是否按预期执行，但私有API可能会在浏览器开发人员需要时更改或消失，并且这些API通常是特定于浏览器。

没有迹象表明WebDriver本身会挂钩到任何私有API以提供此类功能。

有一个选项不依赖私有API，也不需要自己污染DOM或执行编号。此选项首先手动确定需要在我们的元素上设置哪些CSS参数以获得我们想要的结果，然后在测试套件中验证这些参数确实在运行时存在。我有一个例子here，基于问题中提供的小提琴。在该示例中，一个列表接收自定义编号，因为它具有custom类。第二个列表无法获得我们想要的编号，因为由于（模拟）拼写错误，它具有costum类。通过使用getComputedStyle，我们可以在应用所有适用的样式后验证应用于感兴趣元素的内容。因此，由于CSS中的拼写错误，style属性中的拼写错误或彼此干扰的CSS规则，我们可以检测元素是否没有获得正确的CSS参数。

在示例中，检查在浏览器端执行。 Ruby中的Selenium等价物是使用css_value方法来获取我们感兴趣的参数的值。