Capybara can't find elements on dropdown lists - ruby-on-rails

I'm trying to troubleshoot a feature spec I'm writing to learn Rails & testing. It's an edit_spec for a Rails 4 app. I'm using RSpec and Capybara.
The Problem:
Capybara can not find elements from two drop down lists on a form. Here's the relevant parts of my form's source code:
<div class="field">
<label for="appointment_member_id">Member</label><br>
<select id="appointment_member_id" name="appointment[member_id]">
<option value="1">Callis Callis</option>
<option value="2">Rachale Rachale</option>
<option value="3">Hal Hal</option>
<option value="4">Kallis Kallis</option>
<option value="5">Earle Earle</option>
<option value="6">Rudy Rudy</option></select>
</div>
<div class="field">
<label for="appointment_trainer_id">Trainer</label><br>
<select id="appointment_trainer_id"
name="appointment[trainer_id]"> <option value="1">Jacob Jacob</option>
<option value="2">Michele Michele</option>
<option value="3">Alex Alex</option>
<option value="4">Yanni Yanni</option>
<option value="5">Upton Upton</option>
<option value="6">Willham Willham</option></select>
</div>
In my edit_spec, I tried using "option value" and "select id" to get Capybara to select names from the drop-down lists:
select('4', :from => 'appointment_member_id')
select('2', :from => 'appointment_trainer_id')
The result is a Capybara::ElementNotFound error. Here's the full text of the error message:
updates an appointment successfully with corrected information (FAILED - 1)
Failures:
1) Editing appointments updates an appointment successfully with corrected information
Failure/Error: select('4', :from => 'appointment_member_id')
Capybara::ElementNotFound:
Unable to find option "4"
I researched the issue and documentation for Capybara, and also a Stackoverflow post with similar problem. The poster solved the issue, but couldn't recall how he did it. I'm baffled as to why Capybara can't find the member and trainer from the drop down list? The option values and names appear to be visible on the form. What am I missing? I appreciate any help!

Capybara simulates user behaviour. So instead of ids and values try to use what the user see:
select 'Kallis Kallis', from: 'Member'
select 'Michele Michele', from: 'Trainer'

You could try the code below, or possibly assign the div and id and replace "div.field" with whatever id you choose
within "div.field" do
find("option[value='4']", text: 'Yanni Yanni').select_option
click_button 'your_submit_button'
end

Related

Select2 getting multiple selections after form POST

I have this select2 multi-selection dropdown that works fine on the client side but only posts the last selection users make:
<select class="searchable-dropdown form-control form-control-md" name="payment_methods" id="payment-methods-send" multiple="multiple">
<%= options_for_select( (::Transaction::SEND_METHODS).collect{ |m| [t(m[:name]), m[:name].parameterize ]}, selected: params[:payment_method] ) %>
</select>
It generates the following markup:
<select class="searchable-dropdown form-control form-control-md" name="payment_methods" id="payment-methods-receive" multiple="multiple">
<option value="coupons">Coupons</option>
<option value="paypal">Paypal</option>
<option value="skrill">Skrill</option>
<option value="revolut">Revolut</option>
<option value="zelle">Zelle</option>
<option value="transferwise">Transferwise</option>
<option value="swift-bank-transfer">SWIFT bank transfer</option>
<option value="european-bank-transfer">European bank transfer</option>
<option value="us-bank-transfer">US bank transfer</option>
<option value="uk-bank-transfer">UK bank transfer</option>
<option value="check">Check</option>
</select>
I've used this to initialize the control:
$( ".searchable-dropdown" ).select2({ theme: "bootstrap" });
After making several selections and sending the form, I am getting this within params:
"payment_methods":"paypal"
Paypal was indeed selected (last) but so were a bunch of other selections.
Was it not supposed to send them comma-separated or something? Am I doing something wrong?
Nevermind, looks like I wasn't asking Google the right question...
Multiple select box is not working in rails
You need to make sure that you are sending an array of answers by
changing the name to payment_methods[]

How to test if a page has a date picker?

I'm spec-ing my form that will have some date pickers.
expect(page).to have_select('Start date') and expect(page).to have_select('deal[start_date]') both return no matches. The latter makes sense given that the html for date pickers is a little funky (name="deal[start_date(2i)])
expect(page).to have_date_select('deal[start_date]') says that Capybara doesn't recognize has_date_select.
Is there a way to do this?
Capybaras has_select? predicate and have_select matcher look for HTML <select> elements. Depending on what you mean by a date picker you'll have to use a matcher that would match the correct type of element, or have_selector if there isn't a specific matcher. If what you are actually checking for is an <input type="date"> element with an associated label containing the text 'Start date' then you can use the have_field matcher:
expect(page).to have_field 'Start date', type: 'date'
If you're using the Rails date_select view helper it produces HTML like
<div class="field">
<label for="post_start_date">Start date</label>
<select id="post_start_date_1i" name="post[start_date(1i)]">
<option value="2014">2014</option>
<option value="2015">2015</option>
...
</select>
<select id="post_start_date_2i" name="post[start_date(2i)]">
<option value="1" selected="selected">January</option>
<option value="2">February</option>
...
</select>
<select id="post_start_date_3i" name="post[start_date(3i)]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
...
</select>
</div>
You can see from looking at that HTML that the <label> element isn't actually associated with any of the form fields (the for attribute doesn't match an id) which means you won't be able to match the <select> elements using the label text. Instead you'd need to use either the id or name and match them individually
expect(page).to have_select('post_start_date_1i')
expect(page).to have_select('post[start_date(2i)]')
...
or you could use the id filter with a regex and a count to check that there are 3 elements matching like
expect(page).to have_select(id: /^post_start_date_[123]i$/, count: 3)
Note, that's not technically as 'correct' as doing them individually since you could actually have 3 elements with id of post_start_date_1i and it would still pass, but in that case your HTML would also be invalid.
If that's not the type of HTML element you're checking for then you'll need to provide the HTML to get an exact answer.

Drop-down menu is empty when testing in Cucumber (Rails)

I'm using Cucumber to do some testing for my Rails app, and all has gone well until I reached the point where I have to choose an option from a drop-down menu. (A selector made with the simple_form gem.) I have the selenium-webdriver gem installed.
This menu works in real-life testing (Chrome, Firefox, Safari), but when I run the Cucumber tests, the menu is empty. I have #javascript enabled for the scenario and I see it running through Firefox. It can find the menu, and when it "clicks" on it, the list is empty, so the test fails (because it needs to select an indicated option -- which isn't there). Any ideas?
EDIT: Here is the code in cucumber (step definition)
#...
find('#user_device_device_id').click
select('<some menu option>', :from => 'user_device_device_id' )
#...
And this is the HAML code for the dropdown in new.html:
= simple_form_for [:manage, #user_device], :html => {:class => 'form-vertical' } do |f|
= f.select(:device_id, Device.all.collect{ |d| [d.get_name, d.id, {'data-connectiontype' => d.connection_type}] }, :required => true)
Source code of the selector in HTML (from Firefox -- not during Cucumber test):
<select id="user_device_device_id" name="user_device[device_id]">
<option value="1" data-connectiontype="abc">Device 1</option>
<option value="2" data-connectiontype="defg">Device 2</option>
</select>
Nevermind, found the problem. The database used in testing is always empty at start, so none of my devices actually existed in testing. The fix was just to call Device.create! with the necessary parameters in one of the steps before I go to the form page. Worked perfectly.

How to render images in rails3 select

I want to render dropdown list in form with images as options. How to achieve this in rails3?
I like the msdropdown. You can add the path for the image in the title tag:
<select>
<option value="1" title="#path for the image">first</option>
<option value="2" title="#path for the image">second</option>
...
</select>
In Rails, you can add the title doing something like:
<%= f.select(:yourcolumn, Model.all.map{|p| [p.name, p.id, :title => p.image_url(:thumb)]}
I have faced a similar problem some time ago: generate HTML <select> with title inside each <option> to apply the msDropDown plugin
Check out this plugin http://www.marghoobsuleman.com/jquery-image-dropdown there is no option to do it directly in Rails.

Step definition for drop down list

I want to write step in Cucumber Scenario for selecting option "Grandfather's middle Name"
from drop down list of security_questions.
<td align="left">
<select id="security_question" class="sign-up-security Signup_red_text" name="user_detail[secret_question]">
<option value="Please Select"> Please Select</option>
<option value="grandfather middle name"> Grandfather's middle Name</option>
<option value="first date last name"> First Date's Last Name</option>
<option value="favorite place"> Favorite Place</option>
</select>
<br>
<div id="questionError" class="sign-up-ht"></div>
</td>
Please help me to write a step for this.
I have step definition for the same as
When /^I select "(.*)" from "(.*)"$/ do |value, field|
select(value, :from => field)
end
and i am writing this as
I select "grandfather middle name" from "user_detail[secret_question]"
But it is giving me error while running features as
Could not find field labeled "user_detail[secret_question]" (Webrat::NotFoundError)
Suggest any way.
Webrat is expecting a <label> tag. You should make that too. You should also be able to reference the <select> element by using the id-attribute.
As a side note: Using HTML names inside your cucumber features is not done. See Dan North's post on that.

Resources