1

我目前正在编写一个基于用户输入更新其页面 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 获取标签的内容？

4

2 回答 2

2

似乎 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 来确定元素的计算样式，似乎不乏有关这样做的信息。您可以使用 Capybara 的page.evaluate_script方法调用一段 Javascript，它会告诉您特定元素的实际外观，这可能比比较 CSS 文本（例如，如果它被应用程序缩小）更可靠。

于 2012-08-26T15:44:51.170 回答
1 
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

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

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

于 2012-08-26T14:58:32.950 回答