当 css id 和 name 都是动态生成时，Capybara 从嵌套下拉列表中选择

Posted 2023-05-09

【中文标题】当 css id 和 name 都是动态生成时，Capybara 从嵌套下拉列表中选择

【英文标题】：Capybara select from nested dropdown when both css id and name are dynamically generated

【发布时间】：2015-08-09 09:55:27

【问题描述】：

我正在尝试使用 capybara 从下拉列表中选择一个项目。

下拉列表是使用茧宝石生成的嵌套项。 css id 和 name 都是动态生成的。

页面源的复制/粘贴如下所示：

<div class="form-group select required protocol_step_items_orientation_id col-sm-3" title="Select an orientation for the plane of imaging." data-toggle="tooltip" data-placement="auto" data-delay=""show":700,"hide":100" data-animation="true">
<div class="col-sm-9">
<select id="protocol_step_items_attributes_1432720278702_orientation_id" class="select required form-control" name="protocol[step_items_attributes][1432720278702][orientation_id]">
<option value="">Orientation</option>
<option value="74">Axial</option>
<option value="75">Sagittal</option>
<option value="76">Coronal</option>
<option value="77">Sagital Oblique</option>
<option value="78">Coronal Oblique</option>
<option value="79">Axial Oblique</option>
</select>
</div>
</div>

我可以给水豚取景器选择什么语法：

<select id="protocol_step_items_attributes_1432720278702_orientation_id" class="select required form-control" name="protocol[step_items_attributes][1432720278702][orientation_id]">

编辑： 此代码生成选择框：

<div class="links" >
        <div class="row">               
      <%= link_to_add_association 'Add Imaging Step', f, :step_items, :wrap_object => Proc.new|item| item=StepItem.new, :class=>"btn btn-primary btn-xs add_imaging_step", title: "Click here to add an imaging step.", data: toggle: "tooltip", placement: "right", animation: true, delay: show: 700, hide: 100%>

  <%= link_to_add_association 'Add an Imaging Step List', f, :step_lists, :wrap_object => Proc.new|item| item=StepList.new, :class=>"btn btn-primary btn-xs",title: "Click here to add an imaging step list.", data: toggle: "tooltip", placement: "right", animation: true, delay: show: 700, hide: 100%>

  <%= link_to_add_association 'Add an Imaging Tip', f, :tips, :class=>"btn btn-primary btn-xs", title: "Click here to add an imaging tip.", data: toggle: "tooltip", placement: "right", animation: true, delay: show: 700, hide: 100%>

  <%= link_to_add_association 'Add an Image', f, :images, :class=>"btn btn-primary btn-xs", title: "Click here to add an image.", data: toggle: "tooltip", placement: "right", animation: true, delay: show: 700, hide: 100%>

  <%= link_to_add_association 'Add a Document', f, :documents, :class=>"btn btn-primary btn-xs", title: "Click here to add a document.", data: toggle: "tooltip", placement: "right", animation: true, delay: show: 700, hide: 100%>
    </div><!--row-->

编辑2： 我想答案可能就在这里：

Testing fields added dynamically by cocoon using rspec and capybara

或这里：

Selecting element from dropdown without id Capybara

...但我似乎无法找出正确的语法来给水豚取景器。

【问题讨论】：

基于您生成的名称？

谢谢卡梅什。使用相关代码更新问题。

【参考方案1】：

您可以为下拉菜单分配一个 ID。然后你可以通过 id 选择元素。

以下链接告诉您如何通过 id 选择元素。 http://www.rubydoc.info/github/jnicklas/capybara/Capybara/Node/Finders#find_by_id-instance_method

【讨论】：

我明白了。你能用 cocoon 添加一些示例 ruby​​ 代码来分配一个 id 吗？

@PerryHorwich "btn btn-primary btn-xs", :id => "test" , title: "单击此处添加文档。”，数据：切换：“工具提示”，放置：“右”，动画：true，延迟：显示：700，隐藏：100%>

kamesh，我认为这无法解释 cocoon 如何支持为给定父级创建多个子级。不过谢谢。答案在这里***.com/questions/23184690/… 或这里：***.com/questions/23360046/… ... 但它似乎是太多抽象层，我无法弄清楚。 ??

【参考方案2】：

这行得通：

  orientations=page.all('html body main form#new_protocol.simple_form.form-horizontal div.form-inline div#step_items.ui-sortable div div#step_lists div div#tips div div#images div div#documents div div.links div.nested-fields div.form-inputs.row div.form-group.select.required.protocol_step_items_orientation_id.col-sm-3 div.col-sm-9 select')
  orientations.first.select('Axial')

...但感觉很脆弱。有没有更好的办法？