使用 capybara 检查 CSS 是否已更新答案

【问题标题】：Checking that CSS has been updated using capybara使用 capybara 检查 CSS 是否已更新
【发布时间】：2012-08-21 07:00:26
【问题描述】：

我目前正在编写一个基于用户输入更新其页面 CSS 的网络应用程序。我一切正常，但我无法让我的自动化测试确认 CSS 确实已更新。

基本上，我只是想验证文档<head> 中的<style> 标记的内容是否已更新为某个值。我正在使用 capybara（带有 selenium 驱动程序）进行测试，代码如下：

styles = page.all('style')
styles.length.should == 1
styles[0].text.should == style

这一切都按预期工作，直到最后一行失败，因为styles[0].text 似乎总是“”。我也试过.value，但总是nil。我很确定 CSS 实际上正在更新，因为我可以在运行测试的 firefox 窗口中看到更改。

那么，有没有办法使用 capybara 获取 <style> 标签的内容？

【问题讨论】：

我知道您试图获取文件 HEAD 中 <style> 部分的内容吗？
@JonM 是的，这正是我想要做的。

标签： css ruby selenium capybara

【解决方案1】：

似乎 Capybara（至少使用 Selenium，我没有尝试任何其他驱动程序）不会向您展示这一点，我想是因为样式内容包含在 HTML 注释中，因此它会被忽略，例如：

<STYLE type="text/css">
    <!--
    .newfont { color:red; font-style:italic }
    -->
</STYLE>

但是，您可以使用page.source 访问页面的源代码，因此您可以使用它来获取样式内容。源代码只是一个大字符串，因此挖掘它的一种方法是使用 Nokogiri 解析它（Capybara 需要它，所以你已经拥有它了）：

page = Nokogiri::HTML.parse(page.source)
page.css('style').first.text

# => "\n&lt;!--\n.newfont { color:red; font-style:italic }\n--&gt;\n"

如果您反对可自定义的样式，并且无论如何您都在使用 Selenium，那么另一种解决方案可能涉及使用 Javascript 来确定元素的计算样式，似乎有no shortage 的信息关于这样做。您可以使用 Capybara 的 page.evaluate_script 方法调用一段 Javascript，它会告诉您特定元素的实际外观，这可能比比较 CSS 文本（例如，如果它被应用程序缩小）更可靠。

【讨论】：

从page.source 获取信息非常有效，谢谢！将来可能会考虑使用 javascript 来验证计算的样式，但目前我确切地知道在 <style> 中会发生什么，所以这种方式似乎最简单。

【解决方案2】：

page.should have_css ".selector", :text => "Some Text"
page.should have_css ".selector", :value => "Some Value"
page.should have_css ".selector", :count => 1

或者

find('.selector').value
find('.selector:nth-child(1)').value

有几种方法可以了解您正在尝试的内容。我会仔细看看documentation。

另外，需要注意的一件事是，如果您在 javascript 事件之后尝试访问这些更改，则需要在 Selenium（或等效）中运行它。或者您也可以尝试使用 Jasmine.js。

【讨论】：

虽然它稍微简洁一些，但这个解决方案似乎也遇到了同样的问题。我正在 Selenium 中运行。
啊，抱歉，没有意识到你在追踪<style> 标签。我认为 Jon M 的解决方案可能是要走的路。或者您可以尝试使用普通方法获取<style>，然后针对内容执行should =~。我不认为您可以将每种样式作为节点/对象恢复。