使用 Cucumber / Selenium 测试 CSS 计数器答案

【问题标题】：Testing CSS counters using Cucumber / Selenium使用 Cucumber / Selenium 测试 CSS 计数器
【发布时间】：2013-12-07 06:42:58
【问题描述】：

我试图为其创建步骤定义的要求之一是每个元素都应该被编号。是否有用于检查项目是否具有正确的 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/

【问题讨论】：

生成的内容仅适用于 :before 和 :after 伪元素 - 你确定你的 CSS 是正确的吗？
@BoltClock'saUnicorn 不，不，我没有：D 纠正 - 谢谢！
好吧，您不能使用标准 API（DOM、CSSOM、...）。您的目标是哪些浏览器？
@CarloCannas 是的，意识到这一点。我想我希望 Webdriver 能为这些伪元素提供某种接口。在这种情况下，目标是 Firefox。
@SimonScarfe：我从未使用过 Selenium，但我查看了它的源代码和文档，但找不到任何对这个问题有用的东西。即使在 Firefox 中也没有访问 CSS 生成内容的 JavaScript API，我只设法找到了一个能够获取生成内容的可访问性测试用例，但它需要 chrome 权限，因此您需要修补 Selenium 驱动程序。这是：mxr.mozilla.org/mozilla-central/source/accessible/tests/…

标签： css selenium cucumber css-content

【解决方案1】：

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

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

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

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

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

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

【讨论】：