Capybara fill_in isn't working

Question

I'm working in Rails 4.2.1 and doing testing using Capybara 2.4. I have an issue with some input fields not getting filled in using the capybara fill_in method.

I'm not getting an ElementNotFound error, I'm getting this:

expected: "2018-01-10" got: ""

(compared using ==)

Here's the test code: Note: fill_in works for the email, password and program name fields but not for the primary_training_start, primary_comp_start and primary_comp_end.

  it 'create program' do
    visit '/'
    fill_in 'Email', with: '[email protected]'
    fill_in 'Enter Your Password', with: 'test123'
    click_on 'Log In'
    fill_in 'Program Name', with: 'My Training'
    find('.exclusive').click
    click_on 'Next Step'
    all('.creator-wayfinder li')[1].click
    expect(page).to have_content('SET THE SCHEDULE')
    fill_in 'primary_training_start', with: '2018-01-10'
    fill_in 'primary_comp_start', with: '2018-02-10'
    fill_in 'primary_comp_end', with: '2018-03-10'
    expect(find_field('primary_training_start').value).to eq('2018-01-10')
    expect(find_field('primary_comp_start').value).to eq('2018-02-10')
    expect(find_field('primary_comp_end').value).to eq('2018-03-10')
    click_on 'Show Program Schedule'
  end

And here's the HTML for the primary_training_start field:

           <div>
            <mark>Start Training</mark>
            <span class="datepicker" date-format="M/d/yyyy" date-set="{{program.training_calendar_details.primary_training_start}}">
              <input required
              ng-model="program.training_calendar_details.primary_training_start"
              name="primary_training_start"
              type="text" tabbable tabindex="0" />
            </span>
            <errors for="primary_training_start" model="program.training_calendar_details.primary_training_start"></errors>
          </div>

I tried this: Capybara won't fill in form fields (although it finds them) but didn't have any luck.

Are these fields being controlled by some sort of JS widget? If so just sending keys directly to the element (which is what fill_in does) may be getting changed by the JS handlers. — Thomas Walpole

Daniel Lwo Daniel Lwo · Accepted Answer · 2016-02-10T22:10:25

Try having an id for input

<input required
 ng-model="program.training_calendar_details.primary_training_start"
 name="program[training_calendar_details][primary_training_start]"
 id="primary_training_start"
 type="text" tabbable tabindex="0" />

fill_in use first parameter as id

Capybara fill_in isn't working

1 Answers