Capybara/CSS: 如何通过标签和值查找输入字段？

Question

我需要在 Capybara/RSpec 中填写一个输入字段。

<div class="form-group control_center_operators_name">    
  <label class="control-label"  
         for="control_center_operators_attributes_1477562669357_name">
    Name
  </label>       
  <input class="form-control"
       type="text" value=""          
       name="control_center[operators_attributes][1477562669357][name]" 
       id="control_center_operators_attributes_1477562669357_name" />
</div>

我的问题是，有更多这样的字段，用户可以在其中编辑现有运算符。例如

<div class="form-group control_center_operators_name">    
  <label class="control-label"  
         for="control_center_operators_attributes_0_name">
    Name
  </label>
  <input class="form-control" 
         type="text" value="ABC"          
         name="control_center[operators_attributes][0][name]" 
         id="control_center_operators_attributes_0_name" />
</div>

我对该领域的了解：

它被标记为 "Name"
其值为“”（空）

更多限制：

此集合中共有 4 个字段（名称、phone、电子邮件、主页），这意味着我不能只取带有 value='' 的字段，因为有 4 个输入匹配此查询的字段。
如您所见，我无法使用 id 和 name 属性。

如何用 Capybara/CSS 填写空名称、phone、电子邮件和主页字段？

Answer 1

您可以使用 xPath 查找您需要的元素：

find(:xpath, "//label[contains(text(), 'Name')]/../input[@value='']")

如果你想使用css也许你可以使用find_all方法，它会找到所有空白字段，你可以一一填写。

你也可以试试：find_field('Name', with: '')。文档 (Capybara Docs) 说它查看标签，但我怀疑它是否有效，因为标签是单独的元素。可能是它取决于 html 结构，至少这对我不起作用。

Answer 2

水豚查找字段的方法是#find_field。您也可以使用 :with 选项

按值过滤

find_field('Name', with: '').set('new value to set')

请注意，这将与元素的当前值属性匹配，如果该字段的值在页面加载后已更改，则该值可能与 value 属性不同。另一种选择是将范围限定到一个包装器元素，该元素将使该字段成为唯一，然后在该元素内进行查找。例如，如果每组字段都在 div 中，运算符为 class，并且您想在最后一个运算符集中填写名称，您可以执行

all('.operator', minimum: 1).last.fill_in('Name', with: 'new value to set')

更新：从 Capybara 3 开始，all 默认有等待行为，因此不需要 minimum 选项

all('.operator').last.fill_in('Name', with: 'new value to set')

Capybara/CSS: 如何通过标签和值查找输入字段？

Capybara/CSS: How to find an input field by label AND value?

css

capybara