css - 选择 标签内的内容

Question

使用 Cucumber 和 SitePrism 编写测试，我在页面上有以下 HTML...

<select name="product_status_id" id="product-status" class="pull-right">
   <option value="">Select a Status</option>
   <option value="1">Active Product</option>
   <option value="2">Inactive Product</option>
</select>

目前，我为这个下拉菜单设置的元素选择器是...

 element :status_active, '#product-status'

我首先将测试中的第一个值设置为“Active Product”...

And(/^I select the status of Active$/) do
   @page.product.status_active.select("Active Product")
end

然后验证保存的值是“Active Product”的状态

And(/^the product values entered should match those which were saved$/) do
   @page.product.status_active.value.should == "1"
end 

但是，如果要调换这些值，"Active Product" 为 value="2" 和 "Inactive Product" 作为 value="1"，测试将不再验证该字段是否设置为 "Active Product" 值。

是否有我可以编写的实例来检查选项标签之间的内容？

<option>want to select content here</option> 

当我写下面的...

@page.product.status_active.text.should == “Active Product”

返回以下...

"Select a Status Active Product Inactive Product”

所以 .text 方法在这里似乎不是一个合适的解决方案。

选择option标签之间的内容可以写什么？

Answer 1

当一个选项被选中时，它应该有一个这样的 selected 属性:<option value="1" selected>Active Product</option>您可以将其用作选择器。

因此您可以像这样找到所选的选项:@page.product.status_active.find('option[selected]')

因此，要验证所选选项的文本，您可以这样做:@page.product.status_active.find('option[selected]').text.should == “Active Product”

---

在相关说明中，实际上我发现自己经常这样做，所以我将以下内容添加到我的测试套件中: class Capybara::Node::Element
def selected_option
self.find('option[selected]')
end
end

这会向 capybara 元素添加一个 selected_option。有了它，你就可以做到这一点 @page.product.status_active.selected_option.text.should == “Active Product”