I have a simple bootstrap modal with displays a form with dropdown menu and submit button when a user clicks on a link. I try to select options from the dropdown menu with Capybara in an Rspec feature test, but it does not find the dropdown menu.
The feature spec:
scenario "User searches records" do
visit my_records_path
click_link 'Search Records'
within('#practiceSearchModal') do
select('Pennsylvania', from: '#state_search')
click_on('Submit')
end
end
The modal on the page:
<div class="modal fade in" id="practiceSearchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"><div class="modal-backdrop fade in" style="height: 654px;"></div>
<div class="modal-dialog" style="width: 750px;">
<div class="modal-content">
<select name="state" id="state_search" class="form-control">
<option value="">Select</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="New York">New York</option>
</select>
</div>
</div>
</div>
This is error I get with Capybara, it cannot find the select menu with id state_search:
Capybara::ElementNotFound:
Unable to find visible select box "#state_search" that is not disabled within #<Capybara::Node::Element tag="div" path="/html/body/div[1]/div[2]/div[4]/div[1]/div[2]/div/div[1]/form/div">
# /home/myuser/.rvm/gems/ruby-2.1.7#core/gems/capybara-2.18.0/lib/capybara/node/finders.rb:314:in `block in synced_resolve'
But I see the element on the page:
Why can't Capybara find the element which I see it on the screen after it clicks the link?
The from option takes the id, not a CSS selector -
select('Pennsylvania', from: ‘state_search')
Sometimes some js plugins may add visible: hidden onto your select box. You can add the option visible: :all to your select to help.
Try this:
find("#state_search", visible: false).find("option[value='Pennsylvania']").click
Or within scope as:
within '#state_search', visible: false do
find("option[value='Pennsylvania']").click
end
Related
I am displaying multiple dynamic modals to update some data.
<div class="modal fade experience-details exp_update" id="editExperienceModal_{{$exp->id}}" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
My modal's id goes like this editExperienceModal_1,editExperienceModal_2,etc..
Here is the select2 input
<select class="form-control sub-select2" name="clinic_name" id="select2_clinic_update_{{$exp->id}}" style="width:100%"></select>
If it's not been a dynamic content i can invoke select2 and dropdownParent like this
$("#select2_clinic_update").select2({
placeholder: 'Select clinic name',
dropdownParent: $('#editExperienceModal_'),
......
......
How do i invoke select2 for dynamically created inputs?
Finally, i found the solution
<select class="form-control sub-select2 select2_clinic_update" name="clinic_name" id="select2_clinic_update_{{$exp->id}}" style="width:100%">
<option value="{{$exp->clinic_id}}" selected="selected">{{$exp->clinic->be_name}}</option>
</select>
i provided a class to the select2 and intialize select2 with class name.
$(".select2_clinic_update").select2({
placeholder: 'Select clinic name',
// dropdownParent: $('#editExperienceModal_1'),
minimumInputLength: 2,
I removed tabindex="-1" from parent modal, so didn't need dropdownParent in select2.
I added some new choices to my Select Menu and now JQM changed the "pop-up" behavior to a new window with a black background along with the menu choices?
I'm OK with the new window, but now my custom JavaScript code is no longer triggered because of the new JQM pop-up window?
Here's my Select Menu code:
<div data-role="fieldcontain">
<label for="ttType">Work-Order Type:<span class="required">*</span></label>
<select name="ttType" id="ttType" data-native-menu="true" data-mini="true" data-theme="d">
<cfoutput query="rsType" group="ttOption">
<optgroup label="#ttOption#">
<cfoutput>
<option value="#ttDesc#">#ttDesc#</option>
</cfoutput>
</optgroup>
</cfoutput>
</select>
</div>
Here's the field that no longer works:
<div data-role="fieldcontain">
<label for="ttEscalate">Escalation:<span class="required">*</span></label>
<input name="ttEscalate" type="text" id="ttEscalate" value="" readonly="readonly"
wdg:subtype="N1DependentField" data-mini="true" wdg:type="widget"
wdg:recordset="rsType" wdg:valuefield="ttDefEsc" wdg:pkey="ttDesc"
wdg:triggerobject="ttType"/>
</div>
<div data-role="fieldcontain">
Basically, when the "Select Type" value changes, I automatically fill in the Escalation text field with a "related value"
How do I stop JQM from defaulting to that black window? I'd prefer to just have the select drop-down stay on the same page.
PS: If I change the data-native-menu back to false, everything works fine, but I lose all the nice JQM formatting!
How to open popup box after selecting the option from drop down list in phonegap. I have gone through documents but only through anchor tag we can acheive that. Please help how can I do this.
Thanks in advance
If you are using select tag for dropdown then bind function onchange() with select tag.
AS
In HTML
<select id = "status_selector" onchange="fnStatusChanged()"></select>
In Java Script
<script>
function fnStatusChanged(){
// Write Something
}
<script>
Given a standard jQM select widget, e.g:
<div class="ui-field-contain">
<label for="select-native-1">Basic:</label>
<select name="select-native-1" id="select-native-1">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
and standard popup markp, e.g.:
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Selected Val?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">You selected the item with a value of</h3>
<p id="selectedVal"></p>
OK
</div>
</div>
You can handle the change event of the select and then call the popup widget's open method to launch the popup:
$("#select-native-1").on("change", function () {
var val = $(this).val();
$("#selectedVal").html(val);
$("#popupDialog").popup("open");
});
Here is a working DEMO
I am using capybara, rspec, and poltergeist in a Rails 4 application and am trying to click on the following link button via capybara.
<div class="form-group">
<input id="invoice_invoice_items_attributes_0__destroy" name="invoice[invoice_items_attributes][0][_destroy]" type="hidden" value="false">
<a class="btn btn-warning remove_fields existing" href="#">Remove Invoice Item</a>
</div>
If I have the following in rspec/capybara, it finds the hidden element:
find(:xpath, '//input[#id="invoice_invoice_items_attributes_0__destroy"]', visible: false)
If I try this, it doesn't find the link element:
find(:xpath, '//input[#id="invoice_invoice_items_attributes_0__destroy"]/a', visible: false)
The end goal is to do this:
find(:xpath, '//input[#id="invoice_invoice_items_attributes_0__destroy"]/a', visible: false)
How do I get there?
Your a tag isn't inside of the input field, so unless form-group div is hidden, you should be able to just do:
click_link 'Remove Invoice Item'
If form-group is hidden, then try:
find(".remove_fields", visible: false).click
I have a yes/no slider on a web page that i need to interact with. I need to click on one of the elements so that the value changes from true to false or false to true. Using the id i can get the value of the element with
find_field('passcode_policies__allow_simple').find('option[selected]').value
But i have tried over and over to simulate a click on this object to change the value and have been unsuccessful.
<div class="control-group">
<select class="toggle" id="passcode_policies__allow_simple" name="passcode_policies[][allow_simple]" style="display: none; " tabindex="-1">
<option value="true" selected="selected">Yes</option>
<option value="false">No</option>
</select>
<div class="ui-switch off" tabindex="0">
<div class="ui-switch-mask">
<div class="ui-switch-master" style="left: -38px; ">
<div class="ui-switch-upper">
<span class="ui-switch-handle" style="left: 33px; "></span>
</div>
<div class="ui-switch-lower">
<div class="ui-switch-labels">
Yes
No
</div>
</div>
</div>
</div>
<div class="ui-switch-middle" style="width: 60px; ">
</div>
</div>
<label class="inline">Allow simple value</label>
<span class="help-block">Permit the use of repeating, ascending, and descending character sequences</span>
</div>
If you're using Selenium, headless webkit or phantomjs (poltergeist gem) you should be able to call the simple
click_link 'Yes'
but if you're just using straight up capybara you will have to interact with the select element with something like
select('Yes', :from => 'passcode_policies__allow_simple')
and you can check the visibility and whatnot with this capybara: page.should have_no_content doesn't work correctly for display:none element
Working solution:
within(:css, '#passcode_policies__allow_simple + .ui-switch') do
click_link 'No'
end