I am using selenium2 and webdriver to automate a Kendo UI and I am unable to control the dropdown to select a model value form the dropdown list. How can I select a value from a Kendo UI DropDownList using webdriver commands?
The issues that it is not coded as a Select element:
<div class="FormLabel">Select Model(s):</div>
<div class="FormInput FixMultiSelect">
<div class="k-widget k-multiselect k-header" unselectable="on" style="">
<div class="k-multiselect-wrap k-floatwrap" unselectable="on">
<ul id="ModelList_taglist" class="k-reset" unselectable="on" role="listbox"></ul>
<input class="k-input" style="width: 25px;" accesskey="" role="listbox" aria-expanded="false" tabindex="0" aria-owns="ModelList_taglist ModelList_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-icon k-loading k-loading-hidden"></span>
</div>
<select id="ModelList" data-placeholder="Click Here" multiple="multiple" data-role="multiselect" style="display: none;" aria-disabled="false" aria-readonly="false">
<option value="3">ABCGateway_Model</option>
<option value="25">Jack_Gateway_Model</option>
<option value="4">CC Model_1</option>
<option value="26">Sam_Model_1</option>
</select>
<span style="font-family: 'MyriadPro-Regular',Tahoma,Geneva,sans-serif; font-size: 13px; font-stretch: normal; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 16px; position: absolute; visibility: hidden;"></span>
</div>
</div>
</div>
Just wrap your WebElement into Select Object as shown below
Select dropdown = new Select(driver.findElement(By.id("identifier")));
Once this is done you can select the required value in 3 ways. Consider an HTML file like this
<html>
<body>
<select id = "designation">
<option value = "MD">MD</option>
<option value = "prog"> Programmer </option>
<option value = "CEO"> CEO </option>
</option>
</select>
<body>
</html>
Now to identify dropdown do
Select dropdown = new Select(driver.findElement(By.id("designation")));
To select its option say 'Programmer' you can do
dropdown.selectByVisibleText("Programmer ");
or
dropdown.selectByIndex(1);
or
dropdown.selectByValue("prog");
Happy Coding :)
Related
Below is the code :
I want to select the radio button which is present within the span class. Could you please help in identifying a successful xpath ?
<div id="quicklinkbox" class="col-md-2" data-position="left" data-intro="You can directly download payslip PDFs for the last 3 or 6 months. (India payslip only)" data-step="4">
<div style="background-color: transparent; margin-top: 28px;">
<div id="panel-title" ng-click="changeExpand(expand);" style="position: relative; left: 24px; cursor: pointer; font-weight: 500;">Quick Download</div>
<div id="panel-title" class="panel-body" style="text-align: left; font-weight: lighter; padding: 5px 0px 0px 50px; font-weight: 400">
<span style="margin-left: -16px;">Payslips for</span>
<form class="ng-pristine ng-valid">
<div class="form-group">
<div class="radio">
<span same-heightcol="" style="font-size: 16px;">
<input class="ng-pristine ng-valid" type="radio" ng-model="payslipselectedopt" style="cursor: pointer;" value="3" name="payslipradio"/>
<span style="font-size: 16px; position: relative; top: -5px;">Last 3 months</span>
</span>
</div>
<div class="radio">
<span style="font-size: 16px;">
<input class="ng-pristine ng-valid" type="radio" ng-model="payslipselectedopt" value="6" name="payslipradio" style="cursor: pointer;"/>
<span style="font-size: 16px; position: relative; top: -5px;"> Last 6 months</span>
</span>
</div>
<img style="margin-bottom: -12px; margin-left: -16px; cursor: pointer;" ng-click="downloadbulkpayslip()" src="appResources/images/Download-button.png"/>
</div>
</form>
</div>
</div>
</div>
</div>
You can use:
//span/input[#name='payslipradio' and #value='6']
Explanation:
//span -> Will search in all HTML al span tag
/input -> Will searth inside the span tag previous selected a input tag
[#name='payslipradio' and #value='6'] -> Will search in the previous selected tags one that the name attr is equals to 'pslpradio' and value attr equals to '6'
//*span[input#class='ng-pristine ng-valid' and #type='radio']))
I have a problem selecting option from the dropdown.
The HTML is this:
<div unselectable="on" class="k-widget k-multiselect k-header" style="" title="">
<div unselectable="on" class="k-multiselect-wrap k-floatwrap">
<ul class="k-reset" unselectable="on" role="listbox"></ul>
<input style="width: 25px" class="k-input k-readonly" accesskey="" autocomplete="off" role="listbox" aria-expanded="false" tabindex="0" aria-owns="" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-activedescendant="28dfc7ec-69a2-4a95-ba29-1f94e899c7e3">
<span class="k-icon k-loading k-loading-hidden"></span>
</div>
<div data-bind="source: getTreeValues, value: selectedCrmAttributes.DYN_" data-text-field="name_i18n" data-value-field="attributeId" data-value-primitive="false" data-auto-bind="true" data-role="interestselect" multiple="multiple" style="display: none;" aria-disabled="false" aria-readonly="false">
<option value="DYN_#76ed2b3f-4d64-4d07-8ba7-ab6f133e0c70">one.csv</option>
<option value="DYN_#6f914af1-ba58-4c40-99fe-e874bdf9c47b">two.csv</option>
<option value="DYN_#4cd908d0-6c61-4a15-84e7-f113aa7a8ed4">three.csv</option>
<option value="DYN_#c137cfad-81af-4164-90b1-a518a7595baa">four.csv</option>
</div>
<span style="font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px; font-stretch: normal; font-style: normal; font-weight: 300; letter-spacing: normal; text-transform: none; line-height: 17.0333px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span>
</div>
I have tried to select the option by this way
And(/^selecting (.*) from (.*)$/) do |item, selection|
find('.dgr-dimensions-row', :text=>selection).find('.k-widget.k-multiselect.k-header').click
#expect(page).to have_content(item) -> returns true
select(item)
end
Where the item is the option i want to select and selection is filter from where I want to select the item.
Example: If I have a filter File and the options are one, two, three, four.
Then the selection is File and the item is one for example.
I'm using
cucumber 2.1.0
ruby 2.1.6
nokogiri 1.6.6.2
capybara 2.4.4
selenium-webdriver 2.47.1
Thanks in advance!
EDITED
I would like to select the option by text, that the ruby step can be reusable. I have many similar fields like this one and it would be useful if I can reuse the same step.
Picture:
EDITED 2
<ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" aria-live="polite" data-role="staticlist" role="listbox" style="overflow: auto; height: auto;">
<li tabindex="-1" role="option" unselectable="on" class="k-item k-state-focused" data-offset-index="0" id="96c13cd6-8365-4e73-a134-6395988822f7">one.csv</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item" data-offset-index="1">two.csv</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item" data-offset-index="2">three.csv</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item" data-offset-index="3">four.csv</li>
</ul>
Capybaras #select only works with visible html option elements. The issue here is that you appear to be using a kendo multiselect widget which hides the real option elements ( btw your html is invalid since option elements are only legally allowed to be inside a select, optgroup, or datalist element) and then generates a visible UI using li elements inside a ul.k-list. From looking at a demo of the kendo multiselect - http://demos.telerik.com/kendo-ui/multiselect/index - it appears the actual ul.k-list element is attached to the page outside of the widget div and therefore a find can't be scoped to the widget, and the ul.list is given an id of "#{id of select hidden in multiselect widget}_list". Since your html doesn't appear to have an id on the hidden element in the widget there is no way to scope with that either. Because of all of that, rather than doing select(item) you should be able to use
find('.k-list li.k-item', text: item).click
to click on the element in the dropdown that becomes visible after you click in the header. It would be better if this find could be scoped to a particular .klist on the page, but hopefully there is only ever one actually visible while you're running the tests.
Below is some HTML code, in which I need to find the element with the content win8 (last element, <div class="desc">win8</div>).
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: block; z-index: 5002; outline: 0px none; position: absolute; height: auto; width: 800px; top: 7px; left: 537px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-1">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<div class="multi-wizard instance-wizard ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 518px;">
<div class="progress">
<form novalidate="novalidate">
<div class="steps">
<div class="step setup loaded" wizard-step-id="setup" style="display: none;">
<div class="step select-iso loaded" wizard-step-id="select-iso" style="display: block;">
<div class="wizard-step-conditional select-template" style="display: block;">
<div class="main-desc">
<div class="template-select content tab-view ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<input type="hidden" value="XenServer" name="hypervisor" wizard-field="hypervisor">
<div id="instance-wizard-featured-templates" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div class="select-container">
<div class="select **even**">
<input type="radio" name="templateid" wizard-field="template" value="b0c24832-6fdf-11e4-a45f-b6eb114441ae">
<div class="select-desc">
</div>
<div class="select **odd**">
<input type="radio" name="templateid" wizard-field="template" value="7720cdb2-b81a-4839-94cd-b56b660e3324">
<div class="select-desc">
<div class="name">win8</div>
<div class="desc">win8</div>
</div>
</div>
I tried the following XPath:
.//*[#id='instance-wizard-featured-templates']/div/div[2]/input
The issue is the screen has 2 elements, even and odd. Each time it loads it swaps the values. So the XPath selects the wrong element.
Is there a way to exactly select win8?
Assuming you always want to get the element with the class named 'desc', the correct XPath is looks like this:
//div[#class="desc" and text()="win8"]
This selects all <div> elements having the class 'desc' and 'win8' as text.
Iam new to selenium and i want to enter value in dropdown list and tried with various methods and searched in web and i have seen
many posts in the STACKOVER flow nothing worked for me
this is the HTML code
i tried with
1) x=Select(driver.find_element_by_id("expiry-date-month"))
x.select_by_value("4")
2) element = driver.find_element_by_id('expiry-date-month')
for option in element.find_elements_by_tag_name('option'):
if option.text=='4':
option.click()
i want to Select the Month check box values when iam trying getting error message as "Element is not currently visible and so may not be interacted with" please show me a solution for this
HTML code
<form id="form-credit-card" method="get" enctype="application/x-www-form-urlencoded" novalidate="novalidate">
<div class="row-fluid"/>
<div class="row-fluid">
<div class="row-fluid card-wrap">
<div class="row-fluid name-wrap">
<div class="row-fluid dob-wrap hide" style="opacity: 0;">
<div class="row-fluid maestro-wrap hide" style="opacity: 0;">
<div class="row-fluid">
<div class="span3 iframe expiry-wrap">
<label for="expiry-date">Expiration date</label>
<select id="expiry-date-month" class="expirydatemonth selectBox" size="1" name="expirydatemonth" style="display: none;">
<option value="">Month</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<a class="selectBox expirydatemonth selectBox-dropdown selectBox-active" style="width: 30px; display: inline-block; -moz-user-select: none;" title="" tabindex="0">
<span class="selectBox-label" style="width: 0px;">Month</span>
<span class="selectBox-arrow"/>
</a>
<span class="slash">/</span>
<select id="expiry-date-year" class="expirydateyear selectBox" size="1" name="expirydateyear" style="display: none;">
<a class="selectBox expirydateyear selectBox-dropdown" style="width: 30px; display: inline-block; -moz-user-select: none;" title="" tabindex="0">
</div>
As a workaround you need to enable display for that dropdown using JavaScript, as display is set to 'none'.
Below code should work for you:
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("document.getElementById('expiry-date-month').style.display='block';");
//Then Select required value
x=Select(driver.find_element_by_id("expiry-date-month"))
x.select_by_value("4")
Im using Fancybox to edit entities without reloading the whole page. But after loading the form content via ajax I can't edit the input fields. If I click in one of the input I lose the focus instantly.
The code for showing fancybox is very simple:
<a class="lightbox fancybox.ajax" href="/app_dev.php/devices/517781e3e707a00217000033/edit">Bearbeiten</a>
and the javascript (submitting the form not implemented yet)
$(document).ready(function() {
$(".lightbox").fancybox({
minWidth : 300,
minHeight : 150,
openEffect : 'none',
closeEffect : 'none'
});
});
The content returned over ajax:
<form class="lightbox" action="/app_dev.php/devices/517781e3e707a00217000033/edit" method="POST">
<fieldset id="device">
<p>
<label for="device_name" class="required"> device.name </label>
<input type="text" id="device_name" name="device[name]" required="required" value="VW BUS">
</p>
<p>
<label for="device_type" class="required"> device.type </label>
<select id="device_type" name="device[type]" required="required">
<option value="0">FME 2100</option>
<option value="1">FME 2200</option>
<option value="2">FME 3200</option>
</select>
</p>
<p>
<label for="device_number" class="required"> device.number </label>
<input type="text" id="device_number" name="device[number]" required="required" value="+43xxxxxxxxx">
</p>
<p>
<label for="device_imei" class="required"> device.imei </label>
<input type="text" id="device_imei" name="device[imei]" required="required" value="xxxxxxxxxxxx">
</p>
<input type="hidden" id="device__token" name="device[_token]" value="xxxxxxxxxxxxxxx">
</fieldset>
<input type="submit" value="form.save">
</form>
As said, I'm losing instantly the focus on the input fields. The select is working...
I'm using fancybox 2.1.4 with jquery 1.9.1
You can go with this fiddle and change as per syntax : http://jsfiddle.net/UYHxc/2/
$.fancybox.open('#divFancyBoxTest',{
// prevents closing when clicking INSIDE fancybox
openEffect : 'none',
closeEffect : 'none',
closeBtn : false,
helpers : {
overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox
}
});
$('#addbtn').click(function(){
$(".input_add").toggle(); //add input box
});
<div id="divFancyBoxTest">
<div style=" font-size: 14px; font-weight: bold; text-align: center; margin-bottom: 17px;">Click the link in the email we have sent to</div>
<div style="text-align:center; margin-bottom: 17px;">logout</div>
<div style=" font-size: 14px; font-weight: bold; text-align: center;margin-bottom: 17px;">to complete your registration.</div>
<div style=" font-size: 14px; text-align: center;margin-bottom: 17px;"><span style="color: #00A8EC; font-weight: bold;padding-left: 5px;padding-right: 5px;">
<a style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;" id="resendemail">Resend confirmation email </a>
<span style="color:#000;">|</span>
<a style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;" id="addbtn">Change email address</a>
<div class="input_add" style="margin-top: 30px;display: none;">
<input type="text" name="email" style="padding-top: 4px !important;" >
<button style="background-color: #00A8EC;height: 30px;box-shadow: none;border: 1px solid #00A8EC;color: #fff;">Submit</button>
</div>
</span>
</div>
</div>
<input type="text" id="something" value="test" />
</div>