Question

我目前正在编写一个基于用户输入更新其CSS页面的Web应用程序。我已经完成了所有工作，但是我无法通过自动化测试来确认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窗口中的更改。

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

Answer 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文本更强大（例如，如果它被应用程序缩小）

Answer 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。

使用capybara检查CSS是否已更新

2 个答案: