RSpec 期望检查 CSS 属性答案

【问题标题】：RSpec expectations check CSS attributeRSpec 期望检查 CSS 属性
【发布时间】：2014-12-17 15:07:52
【问题描述】：

你能帮我为检查 CSS 属性创建一个正确的 RSpec 期望吗？

例如我有：

<td class="MenuItem">

而 MenuItem 有一个属性“background-color: #c0c0c0”。

我需要检查 background-color 是否等于 #c0c0c0。

我的例子：

expect(page.td_element(:class => "MenuItem").attribute(class).MenuItem).to be == "#c0c0c0"

【问题讨论】：

你会用Capybara吗？使用Capybara::Element 会很容易
不幸的是我不能:(

标签： ruby watir watir-webdriver page-object-gem rspec-expectations

【解决方案1】：

在 Watir-Webdriver 中，Element#style 方法可用于获取元素的计算样式。计算出的样式是基于样式表及其样式属性的元素外观。

假设 HTML 是这样的：

<html>
  <head>
    <style>
      .MenuItem { background-color: #c0c0c0; }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td class="MenuItem">menu</td>
      </tr>
    </table>
  </body>
</html>

我们可以调用style 方法并指定我们感兴趣的特定属性，在本例中为“背景颜色”：

p browser.td(:class => "MenuItem").style('background-color')
#=> "rgba(192, 192, 192, 1)"

上面显示了 Firefox、Chrome 和 IE 返回的内容。其他浏览器可能会以不同的方式格式化属性。如您所见，我们得到的是 RGBA 而不是原始的十六进制代码。虽然您可以编写一个算法将 RGBA 转换为十六进制代码，但测试 RGBA 代码更容易（因为这是返回的内容）。

就编写 RSpec 期望而言，我们只是比较一个字符串，因此可以这样做：

expect(browser.td(:class => "MenuItem").style('background-color')).to eq('rgba(192, 192, 192, 1)')

但是，鉴于您使用的是页面对象 gem，您需要使用 cell_element 而不是 td：

expect(page.cell_element(:class => "MenuItem").style('background-color')).to eq('rgba(192, 192, 192, 1)')

【讨论】：

非常感谢。很好的答案。而且我还看到，如果要检查例如 font-weight 值，我有 700 值而不是 bold。