I'm using Rails 4, Cucumber, Capybara. For this particular scenario, I am using the @javascript tag, which uses the Selenium driver.
In my test, I am testing a select dropdown that uses jQuery + ajax. Here are the steps: a user goes onto the form page, then clicks on the dropdown to expand it, and clicks the "Create a new color..." option. When that is selected, a text field appears and the person can type in a color name. When they press enter, that color is created and the select drop down is reloaded to include that new color in the options.
step definitions:
When(/^I create a new color named "(.*?)"$/) do |color_name|
find("option[id='new_color_option']").click
fill_in("color[name]", with: color_name)
find(:id, 'new_color_text_field').native.send_keys(:enter)
end
Then(/^"(.*?)" should be on the color list$/) do |color_name|
expect(page).to have_select("color", options: [color_name])
end
And it fails with this:
Then "Blue" should be on the color list # features/step_definitions/cms/products_steps.rb:175
expected to find select box "color" but there were no matches. Also found "Blue Create a new color...", which matched the selector but not all filters. (Capybara::ExpectationNotMet)
./features/step_definitions/cms/products_steps.rb:177:in `/^"(.*?)" should be on the color list$/'
features/cms/products.feature:53:in `Then "Blue" should be on the color list'
The problem is that it's failing to find my select dropdown. I am staring at the driver open the browser and even added a sleep 20
inbetween so that I could inspect the HTML.
Before adding a color:
<select class="colors" name="color">
<option id="new_color_option" value="">
Create a new color...
</option>
</select>
After adding a color:
<select class="colors" name="color">
<option value="1" selected="selected">
Blue
</option>
<option id="new_color_option" value="">
Create a new color...
</option>
</select>
Why is it that it can't find my select dropdown?