1

I am trying to select an item from a dropdown using capybara.

The dropdown is a nested item generated using the cocoon gem. Both the css id and name are dynamically generated.

A copy/paste of the page source looks like this: 

<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>

What syntax can I give to a capybara finder to select from: 

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

EDIT: This code generates the select box: 

<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-->

EDIT2: I think the answer may be here:

Testing fields added dynamically by cocoon using rspec and capybara

or here:

Selecting element from dropdown without id Capybara

... but I can not seem to figure out the correct syntax to give the capybara finder.

Community
  • 1
  • 1
Perry Horwich
  • 2,798
  • 3
  • 23
  • 51

2 Answers2

0

You can assign an id for the dropdown. and then you can select the element by the id.

The following link tells you how to select an element by id. http://www.rubydoc.info/github/jnicklas/capybara/Capybara/Node/Finders#find_by_id-instance_method

Kamesh
  • 1,435
  • 1
  • 14
  • 27
  • I see. Can you add some example ruby code using cocoon that will assign an id? – Perry Horwich May 27 '15 at 11:16
  • @PerryHorwich <%= link_to_add_association 'Add a Document', f, :documents, :class=>"btn btn-primary btn-xs", :id => "test" , title: "Click here to add a document.", data: {toggle: "tooltip", placement: "right", animation: true, delay: {show: 700, hide: 100}}%> – Kamesh May 27 '15 at 11:21
  • kamesh, I think this will not account for how cocoon supports the creation of multiple children for a given parent. Thanks though. The answer is here http://stackoverflow.com/questions/23184690/testing-fields-added-dynamically-by-cocoon-using-rspec-and-capybara or here: http://stackoverflow.com/questions/23360046/selecting-element-from-dropdown-without-id-capybara ... but it seems to be too many layers of abstraction for me to figure it out. ?? – Perry Horwich May 27 '15 at 11:24
0

This works: 

  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')

... but it feels pretty brittle. Is there a better way?

Perry Horwich
  • 2,798
  • 3
  • 23
  • 51