Trying to do
b.select_list(:name => "bedroomsMin").select '3+ Beds'
on
<div class="beds col-sm-2 hidden-xs">
<div class="form-group">
<select class="form-control wide" name="bedroomsMin">
<option value="null">All Beds</option>
<option value="0">0+ Beds</option>
<option value="1">1+ Beds</option>
<option value="2">2+ Beds</option>
<option value="3">3+ Beds</option>
<option value="4">4+ Beds</option>
<option value="5">5+ Beds</option>
</select>
</div>
</div>
but get the following error:
element not visible: Element is not currently visible and may not be manipulated (Selenium::WebDriver::Error::ElementNotVisibleError).
This list selector is contained in a dropdown element that is clicked like this:
b.link(:class => 'btn-open-filers').when_present.click
How can I select if it's not visible? Is there a way to force visibility?
Sounds like a timing issue. When the link is clicked, the dialog containing the select list may not appear before Watir tries to interact with it.
Try waiting for the select list:
b.select_list(:name => "bedroomsMin").when_present.select '3+ Beds'
Looks like the <div class="beds col-sm-2 hidden-xs"> having hidden may have something to do with it.
Also it appears you're are only checking for when the element is present, which is to say if it loads in the html but is not visible it'll still return true.
Here's a quick read on that:
What's the difference between `visible?` and `present?`?
Since you have it clicking the dropdown after it checks for it's presence, there might be a timing issue. In which case it may check that the dropdown is present in the DOM but is not actually opening the dropdown.
May want to try something like:
dropdown = b.link(:class => 'btn-open-filers')
dropdown.click if dropdown.visible?
b.select_list(:name => "bedroomsMin").select '3+ Beds'
Watir is designed to interact with the elements that a user can interact with. So if it isn't visible to a user, you shouldn't be able to interact with it. So, it's feature, not a bug. :)
That being said, it isn't clear from your post what action is causing the error. This code will wait for the select list to become visible before you try to select an option inside it:
b.link(class: 'btn-open-filers').when_present.click
b.div(class: 'form-group').wait_until_present
b.select_list(name: 'bedroomsMin").select '3+ Beds'
Justin's answer is functionally the same as this, and when_present is probably more elegant.
Related
I have the following HTML snippet:
<input type="text" id="manufacturer" list="manufacturers" placeholder="Search by manufacturer name or supplier code" class="form-control form-control-2-3" value="" name="manufacturer">
<datalist id="manufacturers">
<select>
<div>
<option value="Jaguar">AA</option>
<div></div>
</div>
<div>
<option value="Audi">AB</option>
<div></div>
</div>
<div>
<option value="Mercedes">AC</option>
<div></div>
</div>
</select>
</datalist>
It's a dropdown menu and I want to select one of the options. No matter what I try with any find command or select function. I always get the same error:
Selenium::WebDriver::Error::ElementNotVisibleError: element not visible: Element is not currently visible and may not be manipulated
Does anyone have any suggestions on how to scope to those options and select one?
Thanks.
What you're trying to do isn't currently possible because it's not actually a dropdown select element. The <datalist> option elements are never actually visible on the page because the standard states "In the rendering, the datalist element represents nothing and it, along with its children, should be hidden." - https://html.spec.whatwg.org/dev/form-elements.html#the-datalist-element . Instead any <option> elements in the datalist are just used as autofill suggestions for the input element (but don't actually restrict the value a user can input in any way). Because of this and since the datalist user can just type anything they want into the input element you can set the input value like any other text input.
fill_in("manufacturer", with: 'Jaguar')
so i have this block of code that goes like such;
<div class="form-group">
<div class="row">
<div class="col-md-12">
<select class="form-control" ng-model="report.outlet">
#foreach ($grSite as $pSite)
#if($jsnUser['selectedSite'] == $pSite['iid'])
<option selected value="{!! $pSite['iid'] !!}">{!! $pSite['profile']['firstName'] !!}</option>
#endif
#endforeach
</select>
</div>
</div></div>
so now here's the problem, when i load the page, all conditions are met, however my option is not automatically selected, it is selected on load, for like 0.5 seconds, and suddenly the select input just goes blank. why is this? also, i've already tried using an #else statement, but it does not work as well. any help would be much appreciated! if it's not clear yet, i'm using a laravel blade template, binding with angular, but this part is purely laravel.
It won't be selected because you are using ng-model. In your angular controller you have to give report.outlet a default value which is part of the options. Then according to that value, the option will be selected by default.
The reason it's selected for 0.5 is because angular isn't ready yet. as soon as Angular is ready, it goes blank.
I have an HTML document (there is a DIV with an ID of "countries" that wraps this code below), and in that I need to -
Validate the options in the select. I tried this but this is not valid.
expect(page).to have_xpath(('//*[#id="countries"]//select')[1],
:options => ['US CAN GER POL'])
Validate that the second select is disabled
Validate that CAN is disabled in the first select
Validate that POL is selected in the first select
Change the selected option to GER in the first select
<li>
<fieldset>
<select>
<option value="US">USA</option>
<option value="CAN" disabled>Canada</option>
<option value="GER">Germany</option>
<option value="POL" selected>Poland</option>
</select>
<fieldset>
<li>
<li>
<fieldset>
<select disabled>
<option value="US">USA</option>
<option value="CAN">Canada</option>
<option value="GER">Germany</option>
<option value="POL">Poland</option>
</select>
<fieldset>
<li>
I appreciate any help that you can provide. Thanks!
Word of warning, I personally still use the should syntax for rspec, and I also use css selectors versus xpath. I simply find them easier to read.
(1) Because you have two dropdowns without any specific IDs or class names identifying one from the other, I would use all to restrict the context of your expectations
all('#countries select')[0].should have_text('USA Canada Germany Poland')
(2) Same concept as above, restrict the scope. Second fieldset should contain a disabled dropdown.
all('#countries fieldset')[1].should have_css('select[disabled]')
(3) all('#countries select')[0].should have_css('option[disabled]', :text => 'Canada')
(4) Same answer as #3 but with different attribute and text
(5) all('#countries select')[0].find('option', :text => 'Germany').click
I have two dropdowns, the second dropdown does not show until a choice is made from the first one. Using watir, i can select the first dropdown, and when i watch it, the second one becomes active, but it cannot select it. i just tried the regular select_list using name and id. Here is the code for the second drop down.
<td>
<input type="hidden" value="1" name="list" id="list">
<script type="text/JavaScript" language="JavaScript"></script>
<select>
<option value="">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
I've also notice the value for the hidden field change as i select different options.
Thanks for any help
The way that I usually access drop down lists is by using this string:
#browser.select_list(:name, "list").set("3")
Does this help?
I usually select hidden dropdowns this way
ie.hidden(:name=>"list").value='2'
Try this:
browserObj = Watir::Browser.new
browserObj.goto('you html in browser')
//browserObj.hidden(:id,"list").value
browserObj.select_list(:name, "list").select_value('2')
I have a webpage containing input tags like the one below eg.
<input value='Cut' name='container_cut_button' type='submit/>
<input value='Copy' name='container_copy_button' type='submit/>
I want to put these into a dropdown, I was hoping it would be something simple like
<select onchange='submit()'>
<option name='container_cut_button'>Cut</option>
<option name='container_copy_button'>Copy</option>
</select>
but no such luck,
Anyone have any ideas about how this could be done?
Thanks in advance
Use the "value" attribute of the options rather than their name.
<select name="action">
<option value="cut_item">Cut</option>
<option value="save_item">Save</option>
</select>
On the server, you'll check the value of the variable "action." It will be either "cut_item" or "save_item".
I called a javascript function in the select tag ie. onchange="exec(value)", the function gets the select id and inserts the proper name attribute based on it value.
function exec(val){
if(val=='cut'){
document.getElementById("action").setAttribute("name", "cut")
}
}
This worked out ok