css - 选择正文 :before with RSpec/XPath/CSS

Question

我正在尝试编写一个 cucumber 测试以确保 Compass CSS 没有错误。

使用以下 CSS 将错误消息插入到页面中，例如:

body:before {
  white-space: pre;
  font-family: monospace;
  content: "Syntax error: Undefined mixin 'horizontal-list'"; 
}

所以我想写一个步骤来确保 body:before 的内容是空的，我一直在尝试以下变化:

page.should_not have_css("body:before")

但这给出了错误:

xmlXPathCompOpEval: function before not found 

有谁知道如何获得:before？

Answer 1

经过大量搜索后，我认为没有办法以优雅的方式获取 :before 中的内容。但是，我有一些对我的目的来说效果很好的东西，所以我想分享它:

Then /^I should not see any compass errors$/ do
  page.evaluate_script("document.styleSheets[1].cssRules[0].selectorText == \"body:before\";").should be_false;
end

以上测试第一个 cssRule 是否有 body:before 的 selectorText - 如果 Compass 在页面中插入了错误，则为真。

如果你想使用上面的一些注意事项:

1. 根据您的驱动程序，您可能需要在场景中放置一个@javascript 标记(否则您可能会收到 NotSupportedByDriverError 异常)
2. 样式表的数组索引可能因您而异(取决于导入样式表的顺序)
3. 如果您使用 Internet Explorer 作为测试浏览器，您将需要更改 JS - 参见此处:https://stackoverflow.com/a/311437/91205
4. 我发现 Safari 和 Firefox 之间存在差异 - Safari 的 selectorText 为“body::before”，而 Firefox 的 selectorText 为“body:before”(注意:与::)其他浏览器可能有类似的问题。

如果有人知道更好的方法来做到这一点，我会非常感兴趣 - 但就目前而言，以上内容将阻止任何偷偷摸摸的指南针错误!