我目前正在编写一个基于用户输入更新其页面 CSS 的网络应用程序。我一切正常，但我无法让我的自动化测试确认 CSS 确实已更新。
基本上，我只想验证 <style> 的内容文档中的标记 <head>已更新为某个值。我正在使用 capybara (带有 selenium 驱动程序)进行测试，代码如下:
styles = page.all('style')
styles.length.should == 1
styles[0].text.should == style
一切都按预期进行，直到最后一行失败，因为它似乎是 styles[0].text总是 ””。我也试过 .value但它总是nil .我很确定 CSS 实际上正在更新，因为我可以在运行测试的 firefox 窗口中看到更改。
那么，有没有办法获取 <style> 的内容？使用 capybara 标记？
最佳答案
似乎 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<!--\n.newfont { color:red; font-style:italic }\n-->\n"
如果您针对可自定义的样式进行断言，并且无论如何您都在使用 Selenium，则另一种解决方案可能涉及使用 Javascript 来确定元素的计算样式，似乎有 no shortage有关执行此操作的信息。您可以使用 Capybara 的 page.evaluate_script 方法来调用一段 Javascript，它会告诉您特定元素的实际外观，并且可能比比较 CSS 文本更可靠(例如，如果它得到由应用缩小)。
关于css - 使用 capybara 检查 CSS 是否已更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12130984/