Dropdown not getting selected when it should be ... why?

Question

I am trying to solve a bug in our tests that in my opinion should be working. I am pretty sure it's a bug in selectize or capybara, but I can't figure out why.

I have gone into the source for capybara and everything seems like it is working like it should. I am not really sure how to move forward.

To test this bug I have stripped down the bug as much as possible into a little test application. See the setup below

bugs/show.html.erb

  <select id="select-repo" class="repositories selectized" placeholder="Pick a repository...">
  </select>

  <select id="dropdown1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>

  <select id="dropdown2">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>

bug_spec.rb

feature 'bug' do
  it "spec setup", js: true do
    visit bug_path

    find('div.selectize-input input', match: :first).set('exercism.io')
    select 'Four', from: 'dropdown1' # this is not getting selected
    select 'Four', from: 'dropdown2'

    sleep 2

    expect(page).to have_select('dropdown1', selected: 'Four') # testing that dropdown1 is being selected
  end
end

# note that the javascript to initialize the selectize drop down is in application.js if you want to look at it go to the github application.

The test above visits the page that has an ajax selectize drop down and two normal select elements. It attempts to put the text - 'exercism.io' - in the selectize drop down (usually I have another line to actually mimic pressing the enter key, but bug happens with out that line) and then it carries on to set the value of dropdown1 and dropdown2. I have made the test js: true and sleep 2 to get the ajax working and so you can see what is actually happening when the test runs.

The problem is it fails to set dropdown1's value. When you run the test and see what's happening you can see that it finds the value to set, but it doesn't actually set it. It just moves onto the next select.

Another weird thing is if I change the test as below, the test passes. So I am pretty sure it's got soemthing to do with the setting of the selectize drop down.

bug_spec.rb

feature 'bug' do
  it "spec setup", js: true do
    visit bug_path

    select 'Four', from: 'dropdown1' # this is not getting selected
    select 'Four', from: 'dropdown2'
    find('div.selectize-input input', match: :first).set('exercism.io')

    sleep 2

    expect(page).to have_select('dropdown1', selected: 'Four') # testing that dropdown1 is being selected
  end
end

I have replicated this bug in a demo application that can be found on github.

Sorry if this is long, I wasn't really sure how else to word this question.

Note that this example is stripped down. In my actual code I use code that guys have provided to use capybara and selectize together.

Answer 1

I got an answer on the capybara forums.

Looks like it was a browser focus issue as @tgf mentioned (in the link)

Thanks.