Selecting options in form drop down using watir - watir

I have a form that I am trying to select some drop down options using watir. I am having trouble finding the correct way to select these options (in this case "bob") using watir. Any suggestions?
<form action="blahsome.php" method="post">
<select onchange="clearFields();" size="1" name="credential">
<option>tom</option>
<option>bob</option>
<option>susan</option>
</select>

Did you try Select#select:
browser.select_list(:name => 'credential').select('bob')
The value passed to select can be a string or regular expression that matches the options text or label.

Related

Materialize - Change select option text with js / jquery

I'm using Materialize and try to change the options's text via js/jquery for multilingual use.
<select>
<option value="" disabled selected data-translation="languageselect"></option>
<option values="en-GB">English (en-GB)</option>
<option values="de">Deutsch (de)</option>
</select>
I translate all objects containing the data-translation attribute via JS (using innerHTML).
So the translation script is something like (and it works)
translationObject.innerHTML = translation
But now I'm using Materialize and have a problem with the options texts. The translated text is not displayed - first I call my translation function and then the initialization of the select element.
$('select').formSelect();
Anyone an idea?

selecting options in spectron test

I am developing an desktop application using Electron and NodeJS, what it specifically is isn't really important. I am using spectron to test my electron application. I have implemented a functionality for selecting between different saved databases through a dropdown list with options. When a database is selected in the dropdown, a json file with login credentials is updated to match the selected db. I want to write a test that checks that the json file is changed when another option is selected. My main problem is to simulate the selection of another option from a dropdown menu.
// Psuedo code for what how I want to solve this
it("DB connection file is updated correctly", function() {
read in json file with currently selected db credentials as a "before reference".
simulate the selection of another db in the dropdown list so that json file from before is changed.
read in changed json file
assert.notDeepEqual(beforeFile, updatedFile);
});
The thing I have been stuck on is the part where I have to select another option in the dropdown to change current DB. I have read on the spectron docs and also on webdriverIO docs but I still cant get it to work.
There will always be 3 default databases listed as options in the dropdown menu. I'll list the html code for the dropdown under:
<div id="list-container">
<form>
<label id="dropdown-label" for="connection-dropdown"><b>Database</b>:</label>
<fieldset id="dropdown-fset">
<select name="database" id="connection-dropdown">
</select>
</fieldset>
</form>
</div>
Been stuck for over a week now and I cant find any way to solve it online either. A lot of questions how to do stuff with spectron but there was no answers that helped me this time. I have probably forgot to mention something so please ask if more info is needed.
Thanks!
You are able to collect elements, you can collect "select" elements under #list-container after that you can use these elements.
The thing I have been stuck on is the part where I have to select
another option in the dropdown to change current DB
I don't see any actual option elements in your HTML but if you are going to have something like this:
<select name="database" id="connection-dropdown">
<option value="someValue0">uno</option>
<option value="someValue1">dos</option>
<option value="someValue2">tres</option>
<option value="someValue3">cuatro</option>
<option value="someValue4">cinco</option>
<option value="someValue5">seis</option>
</select>
Then you can apply the one of several option commands. One of these is selectByVisibleText(). That link has a nice example. Place this setup in a beforeAll().

Firewatir: Problems changing selection in select list

I'm new to FireWatir and having some issues changing a selection in a select list. Here's what the HTML looks like:
<div id="softwarelist">
<select name="TDSOFTWARE" style='width:191;'>
<option value="QFX">Quicken 2004 or newer-Windows
<option value="QIF">Quicken 2003 or older-Windows
<option value="OFX">Microsoft Money 98 or newer
<option value="QIF">Microsoft Money 97 or older
<option value="CSV">Microsoft Excel
</select>
</div>
I need to change the selection to CSV.
Here's the line in my script where I am stuck:
browser.div(:id, "softwarelist")
I've sort of randomly tried various methods, but (obviously) none have worked. Using the method 'show_all_objects', like so:
puts browser.div(:id, "softwarelist").show_all_objects
I get a list of all the various formats... that leads me to believe I am in the right ballpark at least, but really I have no idea as I am new to working with FireWatir.
Can anyone point me in the right direction?
Something like this should work (not tested):
browser.select_list(:name, "TDSOFTWARE").set("Microsoft Excel")
For more information take a look at Selection Boxes page at Watir Wiki.
Your problem is that you are trying to treat the div, which contains the selection list, as if it was the selection list. So you are trying to manipulate the wrong object. you are 'close' because that's the outer container around the list, so show_all_objects will report on the list, which is inside that div.
the code in Zeljko's answer ought to work for you.

Firewatir: Firewatir scripts to select a item from the drop down

I am new to Watir automation testing and would like to get some help for the drop down.On our website we have a state drop down where you enter the first letter of the state (in my example C for California) and it narrows it down to the all states starting with C. Once you have the list you need to click on the correct state. But I am having difficulties selecting the correct state.
(Below is the html from our website:
<div class="x-form-field-wrap x-trigger-wrap-focus" id="ext-gen202" style="width: 166px;">
<input type="hidden" id="entityStateCode" name="entityStateCode" value="">
<input type="text" id="ext-comp-1005" autocomplete="off" size="24" class=" x-form-text x-form-field x-form-focus">
I used the following to automate the scenario but none of these are giving me what i am looking for:
#browser.text_field(:id,"ext-comp-1005").value=("CA")
#browser.text_field(:id,"ext-comp-1005").set("CA")
#browser.text_field(:id=> "ext-comp-1055",:index => 5).set "CA"
I really appreciate that if you can point me to the right direction.
Thanks
I ran into a similar situation before. In my situation there was a TABLE inside the DIV which had a separate row for each item in the dynamic drop down. So, if that's the case for you then you would need to use something like this to access the items:
#browser.text_field(:id,"ext-comp-1055").set "C"
table = #browser.div(:id, "ext-gen336").table(:index, 1)
puts "First entry value: #{table[1][1].text}"
table[2][1].click # second entry
Try printing out the HTML for the DIV at runtime to see the specifics of what you need to interact with if that doesn't work.
You did not tell what the problem is, this is not enough:
none of these are giving me what i am
looking for
This should enter CA into text field:
browser.text_field(:id => "ext-comp-1005").set("CA")
If it is entering text into wrong text field, change :id => "ext-comp-1005".
If it is entering text into the correct text field, but list of states does not appear, you probably have to fire some javascript event. Take a look at How to find out which JavaScript events fired? question.

Google chrome dropdown list options ordering seems to be incorrect

I am using the following code for rendering a select box in one of my form and when i inspects i can see the following code in Firefox
<select name="make">
<option value="13501">Jeep</option>
<option value="26838">Joyner</option>
<option value="13658">Kia</option>
<option value="13898">Lada</option>
</select>
But in chrome when i inspect the form element i can see
<select name="make">
<option value="13501">Jeep</option>
<option value="13658">Kia</option>
<option value="13898">Lada</option>
<option value="26838">Joyner</option>
</select>
Any one please suggest a solution for this?
It's not a real good practice but...
If you add a space to the value chrome will not consider value a number and won't sort them by value.
Example:
<select>
<option value=" 3">Third</option>
<option value=" 1">First</option>
<option value=" 2">Second</option>
</select>
The good side is that you have not to add and then remove alphabetic characters from ID like someone suggested (don't remember if in this or other post with similar question), you could easily trim it but most of the times the space is just ignored and if you post or get those to another file they will simply see the integer value not the space.
This happens to me too. With the following client side JS:
var data=incoming_json_assoc_array_of_counties_sorted_alphabetically_by_county //eg 47=>"west midlands"
for (key in data) {
options.push('<option value="' + key + '">' + data[key]+ '</option>');
}
$('#county_id').val(options.join(''));
It seems like chrome will not support integers as property names or will sort by the key rather than the value. Irrespective of the value that the data comes in
This is a pain in the backside as most of my arrays are num=>data assoc arrays.
Please visit http://code.google.com/p/chromium/issues/detail?id=12169 for an explanation, still looking for a workaround/fix.
This doesn't do it in FF or even safari which is webkit based.
Tried on PC and MAC chrome and get the same problem.
The other option I suppose is to render the HTML on the serverside and just use your JS to plonk the data into the .. tags as opposed to generating it client side.
[update]
see Google Chrome: JavaScript associative arrays, evaluated out of sequence for good solid answer
[edit 2013]
Apperently this still hasn't been fixed It's valid behaviour according to ECMAScript standards but it's not how one would 'expect' it to behave. Have you though of using chosen.js which could help you get around the problem.

Resources