I am having an issue with an element which works with a mouse click and there are some items from which one has to be selected but its unselectable is set to on.
whenever I try to select the elements
I get back an error
the element is not visible so may not be interacted with
But the element is visible
we are using a kendo UI multiselect
please help
The Html Code:-
<div class="k-multiselect-wrap k-floatwrap" unselectable="on">
<ul id="ProfileEditSharedModel_SelectedIndustrySectorIds_taglist" class="k-reset" unselectable="on" role="listbox">
<li class="k-button" unselectable="on">
<span unselectable="on">Sector 1</span>
<span class="k-icon k-delete" unselectable="on">delete</span>
</li>
</ul>
<input class="k-input" style="width: 25px;" accesskey="" role="listbox" aria-expanded="false" tabindex="0" aria-owns="ProfileEditSharedModel_SelectedIndustrySectorIds_taglist ProfileEditSharedModel_SelectedIndustrySectorIds_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-icon k-loading k-loading-hidden"></span>
</div>
<select id="ProfileEditSharedModel_SelectedIndustrySectorIds" class="bigselect" name="ProfileEditSharedModel.SelectedIndustrySectorIds" multiple="multiple" data-val-required="*" data-val="true" data-placeholder="Select Sectors..." data-role="multiselect" style="display: none;" aria-disabled="false" aria-readonly="false">
<option value="1">Sector 1</option>
<option value="2">Sector 2</option>
<option value="3">Sector 3</option>
</select>
Thanks in Advance
Try taking the element in a list first because it may be possible if you are finding element by classname (say), there may be multiple elements with the same classname. Selenium won't search further as it gets the first element by that identifier which may not be visible in your case. So please check that action is performed on the expected element.
I found a soloution using the JavascriptExecutor
It worked for me using:
((IJavaScriptExecutor)driver).ExecuteScript(String.Format("$('#{0}').data('kendoMultiSelect').value({1});", "ProfileEditSharedModel_SelectedIndustrySectorIds", 3,));
or
((IJavaScriptExecutor)driver).ExecuteScript(String.Format("$('#ProfileEditSharedModel_SelectedIndustrySectorIds').data('kendoMultiSelect').value([values]);", "ProfileEditSharedModel_SelectedIndustrySectorIds", 3,));
I was using a kendoMultiSelect there
Related
my situation is the current one:
<fieldset name="sortSearch">
#Html.CreateSortingControl("views.restricted.widgets.alertdetailwidget.sorting", "searchCriteria.Sorting", "changeSortingDirection", "changeSortingField", GetValueList(SortingValueProvider.ValueProviderId))
</fieldset>
In practice I am calling some CS code that will create some a markup with a dropdown and some bindings. For example when a value is selected in this dropdown the function changeSortingField will be called. Everything works properly.
What goes wrong is that I want to encapsulate this markup in a Knockout foreach loop that depends on an observable. Sort of this:
<!-- ko foreach: {data: FieldSortings, as: 'sortings' }-->
<fieldset name="sortSearch">
#Html.CreateSortingControl("views.restricted.widgets.alertdetailwidget.sorting", "searchCriteria.Sorting", "changeSortingDirection", "changeSortingField", GetValueList(SortingValueProvider.ValueProviderId))
</fieldset>
<!-- /ko -->
Which means that when FieldSortings increses, the new markup should appear and indeed it does.
Problem is that with this logic none of my functions is anymore called, such as when I select a value from my dropdown the bindings don't work anymore. It feels like that the markup is computed only once (I think). Should I use some kind of particular composition to call the Razor function on the fly? Thanks in advance!
EDIT: the markup returned by razor is:
<div class="input-group custom-sort">
<section data-bind="validationElement: searchCriteria.Sorting.Field">
<label class="select">
<select data-i18n="[aria-label]accessibility.select.value" class="input-xs select-Sorting-Field" data-bind="value: searchCriteria.Sorting.Field,event: {change: changeSortingField}">
<option value="" css="searchcriteria-sorting-field-"><Select Order by></option>
<option value="DetectionDate" data-default="true" css="searchcriteria-sorting-field-DetectionDate">Detection date</option>
<option value="Impact" css="searchcriteria-sorting-field-Impact">Impact</option>
<option value="Score" css="searchcriteria-sorting-field-Score">Score</option>
</select>
<strong class="tooltip tooltip-top-right">
<i class="fa txt-color-teal"></i>
<span data-i18n="views.restricted.widgets.alertdetailwidget.sorting"></span>
</strong>
</label>
<div class="note note-error" style="display: none;" data-bind="validationMessage: searchCriteria.Sorting.Field"></div>
</section>
<label class="input-group-addon" for="sorting-control" data-bind="click: changeSortingDirection">
<span class="sr-only">Change the sorting direction</span>
<input type="checkbox" name="sorting-control" id="sorting-control" data-bind="checked: searchCriteria.Sorting.IsDescending">
<i></i>
</label>
And FieldSortings is an Observable array defined as:
self.FieldSortings = ko.observableArray([]);
Found the problem. Inside a Knockout foreach loop you need to refer to outsider variables and functions with the $parent . Due to this reason it couldn't make the bindings necessaries to work.
Weird issue I am facing here:
Test fails when Chrome browser is being tested:
This is what I get, when chrome is being tested.
When for example FireFox is tested, I do do get this:
I did some googling, and there is no frame on a page.. And in general, I am asserting to throw exeption, but it's somehow wrong.?
Would be very thankful for any help as I am so new with selenium, basically one of the first testing attempts :)
update:
-Adding html loaded while test is running:
<body>
<div id="react-app">
<div data-reactroot="" class="container-fluid">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-10">
<div>
<div>
<h1>Customer</h1>
<div>
<select id="customer-id">
<option value="BAH">BA Holidays</option>
<option value="CHEAPCARIB">CheapCaribbean</option>
<option value="DELTA">Delta Vacations</option>
<option value="1TEST">1 Vacations</option>
<option value="LATAM">LATAM</option>
<option value="SPIRIT">Spirit Airlines</option>
<option value="THOMASCKUK">Thomas Cook UK</option>
</select>
</div>
<div>
<h2>Profile</h2>
<select id="profile-id">
<option value="DL_FH">DL_FH</option>
<option value="DL_FHM">DL_FHM</option>
</select>
</div>
<div>
<button id="download-order-template" class="ui-button ui-widget ui-state-default ui-corner-all">
<span class="ui-button-text ui-c">
Download Template
</span>
</button>
</div>
<div>
<h2>Place a new standalone order</h2>
<span class="ui-button ui-fileupload-choose ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left fa fa-plus">
</span>
<span class="ui-button-text ui-clickable">
Select File To Upload
</span>
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</span>
</div>
<div>
<h2>Replace all Subscriptions</h2>
<span class="ui-button ui-fileupload-choose ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left fa fa-plus">
</span>
<span class="ui-button-text ui-clickable">
Select File To Upload
</span>
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</span>
</div>
<h2>Subscription Lines</h2>
<div>
<h3 id="no-subscriptions-message">
No subscriptions are available for selected profile
</h3>
</div>
</div>
</div>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</div>
<script src="/dist/vendor.js?v=FSqTLWksDyRJ8ISowkFa5SF8Km7z2u2VqPZf0m3lpXA"></script>
<script src="/dist/main.js?v=zuIW3HpayKUQgmfsu0Hi17_VJILvxurljy9Fv0yHLMA"></script>
</body>
Exceptions are not different because they follow the same guidelines from the Selenium Framework but each WebDriver can choose to add additional debug informations to help fix issues in their underlying engines (which is specific to each browser of course).
ChromeDriver tends to be more "chatty" about errors, just ignore these if you only care about the result of your test suite.
i coded an select filter for my website:
Filter
<div class="row">
<select class="event-type-select" id="selection" >
<optgroup label="categorygroup1">
<option value="category1">category1</option>
</optgroup>
<optgroup label="categorygroup2">
<option value="category2">category2n</option>
<option value="category3">category3</option>
</optgroup>
<optgroup label="categorygroup3">
<option value="category4">category4</option>
</optgroup>
</select>
</div>
<div class="row">
<button type="submit" class="btn btn-default"> filter </button>
</div>
</form>
before selecting anything in the "selection-window" on the website you read "category1". i guess thats default(?).
but if i selected a category (and that works: you can read in the "selection-window" e.g. category3) and then click on the "filter"-button the website refreshes but in the "selection-window" you again read "category1" and not the selected category e.g "category3". i guess the selection doesn't work right.
how can i solve this that when clicking the button you still read your selected category?
also i want to display the selected option on a different part of the website.
my current code for this:
<script type='text/javascript'>
var m = document.getElementById("selection").value;}
document.write(m);
</script>
that as well doesn't work.
i hope you can understand what i mean, my english is pretty bad. sorry for that.
First, the question essentially contains 2 questions packed into one, don't do that.
Second, you are simply missing the preselection of the <select> field.
the selection doesn't work
When submitting a form the values are sent to the server. The server processes the values and renders the page again. Therefore you have to adjust the rendering according to the selected value. Lets say you simply pass the selected value to the view as string the view code could look like this:
#model string
...
<select class="event-type-select" id="selection" >
<optgroup label="categorygroup1">
<option value="category1" #if (Model == "category1") {<text>selected</text>}>category1</option>
</optgroup>
<optgroup label="categorygroup2">
<option value="category2" #if (Model == "category2") {<text>selected</text>}>category2n</option>
...
</select>
also i want to display the selected option on a different part of the website.
Then store the selection somewhere (e.g. a DB), retrieve the selected value before the different part is rendered and simply output it in the different part.
The script has an error, you should use a function:
function test()
{
var m = document.getElementById("selection").value;
alert(m);
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="row">
<select id="selection" class="event-type-select">
<optgroup label="categorygroup1">
<option value="category1">category1</option>
</optgroup>
<optgroup label="categorygroup2">
<option value="category2" selected="selected">category2n</option> <!-- with selected="selected" you set the default -->
<option value="category3">category3</option>
</optgroup>
<optgroup label="categorygroup3">
<option value="category4">category4</option>
</optgroup>
</select>
</div>
<div class="row">
<button type="submit" class="btn btn-default" onclick="test()"> filter </button>
</div>
</body>
</html>
On https://jsfiddle.net/u40uz1c4/4/, how can I add those icons to the dropdown?
I have ASP.NET dropdowns each with a list of items that I want to skin with the semantic dropdown. I want however svg images as icons for each item.
Reference: http://semantic-ui.com/modules/dropdown.html#/usage
<select name="gender" class="ui dropdown" id="select">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<br />
<br />
<img src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Male-icon.png' style='width:20px;'>
<img src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Female-icon.png' style='width:20px;'>
You cant do that by ASP.NET controller. You have to ctrate simple html markup, and than use the script for convert it to drop down list
I ended up embarking on an exercise to programatically create HTML server-side based on inspecting existing asp:DropDownList controls, similar to the output shown at https://jsfiddle.net/hodtfkys/3/.
<div class='ui icon selection dropdown'>
<input name='DropDownListCategoryClone' type='hidden'> <i class='dropdown icon'></i>
<div class='default text'>
Male
</div>
<div class='menu'>
<div class='item' data-text='Male' data-value='male'>
<img class='ui image' src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Male-icon.png' style='width:20px;'> Male
</div>
<div class='item' data-text='Female' data-value='female'>
<img class='ui image' src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Female-icon.png' style='width:20px;'> Female
</div>
</div>
</div>
Html code:
<span id="syi-attribute-1277" class="dropdown l-stretchable-fixed native" tabindex="7146">
<input type="hidden" value="" name="attribute[1277]"></input>
<span class="label" style=""></span>
<span class="pointer"></span>
<select class="item-frame" size="1" style="height: 30px; width: 264px;">
<option class="item" value=""></option>
<option class="item" value="7146"></option>
<option class="item" value="7147"></option>
<option class="item" value="7148"></option>
</select>
What I'd like to do is the webbrowser control in my form (using WinForms) be able to select the third option of this drop down selection list (with the value of 7148). What I've tried so far:
doc.GetElementById("syi-attribute-1277").Children.GetElementsByName("option")[0].SetAttribute("value", "7148");
^ makes the most sense, though sadly it gives me this error: Additional information: Value of '0' is not valid for 'index'. 'index' should be between 0 and -1.
Code:
doc.GetElementById("syi-attribute-1277").SetAttribute("tabindex", "7148");
^ Nothing happens.
Any clue's? Thanks. :-)
GetElementsByName looks for a matching name (or id) attribute, not the element name.
Your also trying to set the value attribute on the option, you need to use the select if you want to set the value:
doc.GetElementById("syi-attribute-1277").GetElementsByTagName("select")[0].SetAttribute("value", "7148");