I am unable to select an option from an html element using capybara
<select multiple="multiple" name="profile_invitation[permissions][]" id="profile_invitation_permissions">
<option value="manage_permissions">Manage Permissions</option>
</select>
I've tried
#within 'select#profile_invitation_permissions' do
#find("option[#value='manage_permissions']").click
#end
which returns
Unable to find css "option[#value='manage_permissions']" within #<Capybara::Node::Element tag="select" path="/html/body/div/div/main/div/div[2]/div[3]/div/div[2]/form/select"> (Capybara::ElementNotFound)
and I've tried
select "Manage Permissions", :from => "select#profile_invitation_permissions"
which returns
Unable to find select box "select#profile_invitation_permissions" that is not disabled and Unable to find input box with datalist completion "select#profile_invitation_permissions" that is not disabled (Capybara::ElementNotFound)
You have two "Manage Permissions"/value='manage_permissions' option tags, and why do you have #value= instead of just value= in your attribute selector?
You're making it more complicated than it is. From the docs - https://rubydoc.info/github/teamcapybara/capybara/Capybara/Node/Actions#select-instance_method - we can see that select takes the text of the option to be selected, and optionally a from setting to specify either the id, name, or label of the select box. Therefore if there is only one "Manage Permissions" option on the page you can just do
select 'Manage Permissions'
If there is more than one matching option on the page then you would narrow it down using the from option
select 'Manage Permissions', from: 'profile_invitation_permissions'
Related
I am having trouble filling in and clicking this search box
<input type="text" name="js-emu-operation-search" id="js-emu-operation-search" placeholder="Enter service name" autocomplete="off">
I have tried using
internet.fill_in('js-emu-operation-search', :with => "Alternator Replacement")
but it does not work. After that is filled in though I am also wondering how to click on the first autocomplete option.
Working with autocompletes can be pretty difficult, depending on how it's implemented. Some tricks I've used in the past:
Click the input before sending text to it
find('#js-emu-operation-search').click()
Try using the underlying element methods instead of the fill_in wrapper, e.g.
find('#js-emu-operation-search').set("Alternator Replacement")
Select from the dropdown options with find("#results-pane", text: "My Result").click, or if you get really desperate, make sure there's only a single result and select it with the down arrow, find('#js-emu-operation-search').native.send_keys(:arrow_down)
Disclaimer: My capybara is getting rusty, may have to tinker. If you're working on a team, I've also had good luck dragging another developer into it, preferably the guy who implemented the autocomplete.
Hi i used select2 (https://select2.github.io/) in my site and it's not working there. on click classes etc changed like example one but it didn't shows the select box options and there is no error in console.
I am using multi select option of it.
Here is code:
<select name="xo_pages_show_name[]" class="spages" multiple="true">
<option value="4">Optin Demo</option>
<option value="2">Sample Page</option>
</select>
Here is jquery code in custom file and included in footer.
$(".spages").select2({
placeholder: "Select Pages"
});
Here is the frontend screenshot: http://i.prntscr.com/0d079920de3b4e3081a153b45cb9753a.png
Any help ?
No it was just problem with z-index.
Main container z-index was more than inner one. so it was not showing
I am trying to get a hook on a select and set the selected option. I am struggling to do this because my drop down is generated in a loop so the id changes.
Normally I would do something like this
select product_template.name, :from => "product_product_template_id
What if the ID can change
e.g. product_product_presentations_attributes_0_presentation_id
Is there a way to leverage the select function and specify a css selector?
Thanks.
select also accepts label (as in the actual <label> text for that select) and name attributes for the :from option, so if those are not generated / changed all the time, you can use them for a less brittle test.
If that doesn't cut it, you can add a unique CSS class to your select and then select a specific option with something like:
find("select.new_css_class").find("option[value='THE OPTION VALUE YOU WANT']").select_option
I am populating a select dropdown from MongoDB database and then clicking on submit to perform some action on the selected value. I want to show default text for my select dropdown but also want that the default option should not allow to click submit unless some other value is chosen.
I tried this:
<g:select name="websiteSelection"
from="${websitesList.website}" id="mySelect" noSelection="${['null':'Select Website']}"
class="styled-select" value="select" />
But this allows me to press submit when nothing is selected apart from default text. Is there any way I can achieve this requirement?
When using the ui-select2 (https://github.com/angular-ui/ui-select2), the preselected option is not shown properly.
I created a plunkr: http://plnkr.co/edit/Ek86jUciPo7rgBnbKdFc
When the page is loaded, the model of the select is set to the second option. And somehow, it is properly set in the select box, see: https://dl.dropboxusercontent.com/u/1004639/stackoverflow/screenshot-select2.png. But the value is not shown above the text box. Or in the select box when the select box is closed.
PS: I tried it without ng-options. Same problem.
I can get it working using ng-repeat and ng-selected. Unfortunately, though, when you use ng-repeat, you can only bind to a string. It's not ideal, but the choice does start out pre-selected.
Here's a working http://plnkr.co/edit/jodn35fvUQpdD2d5BpoC
<select ui-select2="" ng-model="selectedId" >
<option value="">Choose...</option>
<option ng-repeat="option in options" value="{{option.id}}" ng-selected="{{option.id == selectedId}}">{{option.name}}</option>
</select>
And I updated the JS to add this line:
$scope.selectedId = $scope.selected.id;
https://github.com/angular-ui/ui-select2#working-with-dynamic-options
ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead.