使用Cucumber/Selenium测试CSS计数器

Question

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

我们正在使用Selenium,Cucumber和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

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

• 如何使用 JavaScript 访问 CSS 生成的内容

• 如何读取应用的 CSS 计数器值？

没有证据表明，自最初提出这些问题以来，那里或其他地方的情况已经发生了变化，而且现在可以做到这一点。

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

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

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

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