选择正文：使用 RSpec/XPath/CSS 之前答案

【问题标题】：Select body:before with RSpec/XPath/CSS选择正文：使用 RSpec/XPath/CSS 之前
【发布时间】：2012-02-08 19:19:38
【问题描述】：

我正在尝试编写一个黄瓜测试，以确保 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？

【问题讨论】：

我认为这与它是伪元素有关，而不是真正的 HTML 元素。
是的，我得出了同样的结论——尽管我明白为什么 have_xpath 会因为我希望 have_css 能够工作而感到不安！

标签： css xpath rspec cucumber css-selectors

【解决方案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 在页面中插入错误，则为 true。

如果你想使用上面的一些警告：

根据您的驱动程序，您可能需要在您的场景中添加一个@javascript 标签（否则您可能会收到 NotSupportedByDriverError 异常）
样式表的数组索引对您来说可能不同（取决于您的样式表的导入顺序）
如果您使用 Internet Explorer 作为测试浏览器，则需要更改 JS - 请参见此处：https://stackoverflow.com/a/311437/91205
我发现了 Safari 和 Firefox 之间的区别 - Safari 的 selectorText 为“body::before”，而 Firefox 的 selectorText 为“body:before”（注意：vs ::），其他浏览器可能也有类似问题。

如果有人知道更好的方法来做到这一点，我会非常感兴趣 - 但现在，上述内容将阻止任何 Compass 错误潜入！

【讨论】：