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().
Related
I've been working with pug/jade a little bit and now I'm trying to build the same project using handlebars.
I have this iteration that renders a few options:
<select id="myselect" name="myselect">
{{#each categories}}
<option value="{{id}}">{{title}}</option>
{{/each}}
</select>
A bit further down the code I need to render some items dynamically based on the selected item from myselect.
Any idea how I can grab it dynamically? Basically the same way like onchange() works in plain javascript.
When you use any kind of tempting engine (handlebars, jade, ejs, etc). You cannot bind data after the response sent to the client. You have to write some client side javascript code to achieve that.
As an alternative you can use handlebarjs on client side. Follow this link
But this may need to be used carefully, since you are using the same template engine on your server side.
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?
I've searched around these past 2 days and have not found a solution that works. I'm currently on Python 3.6.4 on OSX and v3.11.0 Selenium with chromedriver.
So what i'm hoping to achieve is to find the coordinates of a dropdown option tag with innerHTML matching a given string.
The HTML is as follows:
<div class="select-wrapper">
<select id="product-select" name="id" class="">
<option value="1532273459205">Small</option>
<option value="1532273491973">Medium</option>
<option value="1532273524741">Large</option>
<option value="1532273557509">X-Large</option>
</select>
</div>
My Code (I also added a .click() for the dropdown before this code to ensure that the dropdown is actually visible):
size = input("What size do you want?")
for option in driver.find_elements_by_tag_name('option'):
if (option.get_attribute('innerHTML')) == size:
print(option.location)
However, this returns a dictionary of {'x':0, 'y':0}.
Since it did not return an error, i'm guessing that it's because the element isn't visible. Hence, i researched more and tried adding this to my code above.
WebDriverWait(driver,10).until(EC.presence_of_element_located((By.XPATH, '//option')))
However, this still doesn't work can still gives 0,0 as the coordinates. I'm still quite a newbie so maybe there's something i'm not catching here. Thanks so much in advance and if you guys need more info please tell me! Thanks!
If all you're trying to do is select an option, there's no need to gather the element coordinates. Selenium provides Select() for just this purpose:
from selenium.webdriver.support.select import Select
sizes = Select(driver.find_element_by_id("product-select"))
sizes.select_by_visible_text("Large")
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.
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.