I tried to enter the value(search Engine) and select the option in combo box. Unable to enter and select option in combo box.
Tried with to click first using
js=(JavascriptExecutor)driver;
js.executeScript("$(\"#divProfileSetting li:nth-child(2) span\").click()");
Here is the HTML source,
<div class="controls" id="divSearchEngine">
<div class="k-widget k-multiselect k-header span12" unselectable="on" style="">
<div class="k-multiselect-wrap k-floatwrap" unselectable="on">
<ul role="listbox" unselectable="on" class="k-reset" id="searchEngine_taglist"></ul>
<input class="k-input k-readonly" style="width: 157px;" accesskey="" role="listbox" aria-expanded="false" tabindex="0" aria-owns="searchEngine_taglist searchEngine_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-icon k-loading k-loading-hidden"></span>
</div>
<select class="span12" id="searchEngine" multiple="multiple" name="searchEngine" data-role="multiselect" aria-disabled="false" aria-readonly="false" style="display: none;">
<option value="1:AF">Google Afghanistan</option>
<option value="1:AX">Google Åland</option>
<option value="1:AL">Google Albania</option>
</select>
<span style="font-family: CenturyRegular; font-size: 12px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 15.72px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;">Select Search Engine...</span>
</div>
</div>
js=(JavascriptExecutor)driver;
js.executeScript("$('#searchEngine-list ul li:eq(1)').click()");
js=null;
This code worked
Related
I am unable to send keys to a searchable dropdown. I can expand the dropdown using:
(//*/label[contains(text(),'Country of company registration')]/following-sibling::div//span[3]/span).click();
But when I try to send some keys to the search field I get:
org.openqa.selenium.ElementNotInteractableException: Element <div class="Select-input"> is not reachable by keyboard
Xpath I'm using for search field "Select-input" is:
//*/label[contains(text(),'Country of company registration')]/following-sibling::div//span/div[2]
I've also tried to send text to "Select-value" but I get a similar error. Xpath for "Select-value" is:
//*/label[contains(text(),'Country of company registration')]/following-sibling::div//span/div[1]
Full object:
<div class="form-group">
<label class=" form-control-label" for="countryCode">Country of company registration</label>
<div class="Select Select--single is-clearable is-searchable has-value">
<div class="Select-control">
<span id="react-select-12--value" class="Select-multi-value-wrapper">
<div class="Select-value">
<span id="react-select-12--value-item" class="Select-value-label" role="option" aria-selected="true">United Kingdom</span>
</div>
<div class="Select-input" style="display: inline-block;">
<style>input#undefined::-ms-clear {display: none;}</style>
<input role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-12--value" value="" style="width: 19px; box-sizing: content-box;"/>
<div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 16px; font-family: "Larsseit",sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"/>
</div>
</span>
<span class="Select-clear-zone" title="Clear value" aria-label="Clear value">
<span class="Select-clear">×</span>
</span>
<span class="Select-arrow-zone">
<span class="Select-arrow"/>
</span>
</div>
</div>
</div>
*Apologies for the formatting.
Edit: I do not believe my question is a duplicate of the one suggested. I have put lengthy waits and also an explicit wait to ensure the dropdown has expanded. I think the problem might be due to the dynamic nature of the dropdown and hence not being able to get an accurate xpath. This is just a guess. Thanks.
I think the problem may be in that you are not trying to do the input in the input element, but in the div element.
Could you try:
//input[#role='combobox']
And let me know if it works for you.
Using selenium web driver, me need to get the set of option values such as Last 30 days, Last 60 days etc.
I have tried to get those elements using CSS selector.
var timeperiodcss = "div.k-animation-container div.k-list-container.k-popup.k-group.k-reset div ul#selectDefaultTimePeriod li.k-item";
var elements = element.FindElements(By.CssSelector(timeperiodcss));
if (elements.Count >= 1)
break;
Every time elements.count is showing as 0. Not able to get those elements.
The following is the HTML content for those cases
<div class="k-animation-container" style="width: 150px; height: 206px; margin-left: -10px; padding-left: 10px; padding-right: 10px; padding-bottom: 15px; box-sizing: content-box; overflow: hidden; display: none; position: absolute; top: 1039.55px; z-index: 10002; left: 87.45px;">
<div id="selectDefaultTimePeriod-list" class="k-list-container k-popup k-group k-reset" data-role="popup" style="position: absolute; height: 200px; display: none; font-size: 13px; font-family: "Roboto",sans-serif; font-stretch: normal; font-style: normal; font-weight: 400; line-height: 18px; width: 144px; transform: translateY(204px);">
<div class="k-list-optionlabel">Select time period</div>
<div class="k-group-header" style="display:none"></div>
<div unselectable="on" style="overflow: auto; position: relative; height: 175px;">
<ul id="selectDefaultTimePeriod_listbox" class="k-list k-reset" unselectable="on" tabindex="-1" aria-hidden="true" aria-live="off" data-role="staticlist" role="listbox">
<li class="k-item" data-offset-index="0" unselectable="on" role="option" tabindex="-1">Last 30 days</li>
<li class="k-item" data-offset-index="1" unselectable="on" role="option" tabindex="-1">Last 60 days</li>
<li id="0936dfb5-4f8c-4dd4-826f-f802b6a719ff" class="k-item k-state-selected k-state-focused" data-offset-index="2" unselectable="on" role="option" tabindex="-1">Last 90 days</li>
<li class="k-item" data-offset-index="3" unselectable="on" role="option" tabindex="-1">Last month</li>
<li class="k-item" data-offset-index="4" unselectable="on" role="option" tabindex="-1">Last quarter</li>
<li class="k-item" data-offset-index="5" unselectable="on" role="option" tabindex="-1">Last 6 months</li>
<li class="k-item" data-offset-index="6" unselectable="on" role="option" tabindex="-1">Last 12 months</li>
<li class="k-item" data-offset-index="7" unselectable="on" role="option" tabindex="-1">Last 365 days</li>
<li class="k-item" data-offset-index="8" unselectable="on" role="option" tabindex="-1">Full year 2016</li>
</ul>
</div>
</div>
Please let me know, Is it have any other option to get those elements.
You can select those element by using xpath in two steps.
Step 1: click on the drop down. //you need to do this, as after clicking on the drop down only the html for drop down list will become visible.
code: driver.findElement(By.id("selectDefaultTimePeriod_listbox")).click();
Step 2: Select the li element by using xpath.
Code: drive3r.findElement(By.xpath("//ul/li[text()='Last 30 days']"));
I have this html :
<div class="c_row caption single" style="height: 89px;">
<label>
<span>Question</span>
</label>
<div class="c_box radio-block" style="height: 88px;">
<label style="width: 10%; font-size: initial; height: 88px;" class="radio">
<input class="radio-button" type="radio" name="question_27" value="1" checked="">
<span class="lb">1</span><i class="input-helper"></i></label><label style="width: 10%; font-size: initial; height: 88px;" class="radio">
<input class="radio-button" type="radio" name="question_27" value="2">
<span class="lb">2</span><i class="input-helper"></i></label><label style="width: 10%; font-size: initial; height: 88px;" class="radio">
<input class="radio-button" type="radio" name="question_27" value="3">
<span class="lb">3</span><i class="input-helper"></i></label><label style="width: 10%; font-size: initial; height: 88px;" class="radio">
<input class="radio-button" type="radio" name="question_27" value="4">
<span class="lb">4</span><i class="input-helper"></i></label><label style="width: 10%; font-size: initial; height: 88px;" class="radio">
<input class="radio-button" type="radio" name="question_27" value="5">
<span class="lb">5</span><i class="input-helper"></i></label><label style="width: 10%; font-size: initial; height: 88px;" class="radio">
<input class="radio-button" type="radio" name="question_27" value="6">
<span class="lb">6</span><i class="input-helper"></i></label><label style="width: 10%; font-size: initial; height: 88px;" class="radio">
<input class="radio-button" type="radio" name="question_27" value="7">
<span class="lb">7</span><i class="input-helper"></i></label><label style="width: 10%; font-size: initial; height: 88px;" class="radio">
<input class="radio-button" type="radio" name="question_27" value="8">
<span class="lb">8</span><i class="input-helper"></i></label><label style="width: 10%; font-size: initial; height: 88px;" class="radio">
<input class="radio-button" type="radio" name="question_27" value="9">
<span class="lb">9</span><i class="input-helper"></i></label><label style="width: 10%; font-size: initial; height: 88px;" class="radio">
<input class="radio-button" type="radio" name="question_27" value="10">
<span class="lb">10</span><i class="input-helper"></i></label>
</div>
<div class="c_box select-block hidden" style="height: 88px;">
<select class="selectmenu" name="question_27" id="ui-id-2" style="display: none;">
<option disabled="" selected="" value=""> -- </option>
<option value="1" selected="">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>
</select>
</div>
And I want to check the radio button but the problem is that works only for first value of radio. For example if I write :
And I select "1" from "question_27"
Works fine, but If I tried the second value :
And I select "2" from "question_27"
Doesn't work. I get the error that this value doesn't exist.
Can you help me please ? Thx in advance and sorry for my english
I need to know how we can select a value from drop down combo box using value of that item.
Below is the form tag
<form id="rahul" onkeypress="EnterHandler();" onsubmit="javascript:return WebForm_OnSubmit();" action="./RequestSubmission?CC8510F49CCCF2&" method="post">
<div class="rcbSlide" style="z-index: 6000; visibility: visible; display: block; overflow: visible; margin-left: 0px; position: absolute; top: 575.2px; left: 768.183px; height: 202px; width: 300px;">
<div id="ctl00_MainContent_ucAdditionalDetailsMAP_txtResponsiblePerson_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_MetroTouch rcbAutoWidth rcbAutoWidthResizer" style="display: block; visibility: visible; top: 0px; left: 0px; transition: none 0s ease 0s ;">
<div class="rcbScroll rcbWidth rcbNoWrap" style="height: 200px; width: 100%; overflow: auto;">
<ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
<li class="rcbItem">Aava, Ruth</li>
<li class="rcbItem">Abdelgawwad, Khaled</li>
<li class="rcbItem">Achcar, Cecilia</li>
<li class="rcbItem">Achilles, Karin</li>
<li class="rcbItem">Adachi, Masatoshi</li>
<li class="rcbItem">admin, bayer</li>
<li class="rcbItem">Adriane, Fernandes</li>
<li class="rcbItem">Aeschliman, Lisa</li>
<li class="rcbItem">Afonja, Olubunmi</li>
</ul>
</div>
</div>
</div>
</form>
Here is the div tag from where we are selecting the value from drop down combo box.
<div id="ctl00_MainContent_ucAdditionalDetailsMAP_txtResponsiblePerson" class="RadComboBox RadComboBox_MetroTouch" style="width:350px;">
<table class="" style="border-width: 0px; border-collapse: collapse;" summary="combobox">
<tbody>
<tr>
<td class="rcbInputCell rcbInputCellLeft" style="width:100%;">
<input id="ctl00_MainContent_ucAdditionalDetailsMAP_txtResponsiblePerson_Input" class="rcbInput radPreventDecorate rcbEmptyMessage" type="text" value="Select" name="ctl00$MainContent$ucAdditionalDetailsMAP$txtResponsiblePerson" autocomplete="off">
</td>
<td class="rcbArrowCell rcbArrowCellRight">
<a id="ctl00_MainContent_ucAdditionalDetailsMAP_txtResponsiblePerson_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a>
</td>
</tr>
</tbody>
</table>
</div>
I want to know how we can select li item "Aava, Ruth" in selenium webdriver using its value.
Use below XPath
//ul[#class='rcbList']/li[1]
OR
//ul[#class='rcbList']/li[contains(.,'Aava, Ruth')]
You can select it directly by using below code:-
driver.findElement(By.xpath("//ul[#class='rcbList']/li[1]")).click();
Note:- First click on dropbox then use above code
Hope it will help you :)
How can I add 2 more rows to the JSSOR tiled menu slider? Thank you.
Given a slide defined as follows, you will see all content in a slide is fully customizable. To define 4 rows instead of 2 rows, you can edit css.
<div>
<a class=appicon01 style="left: 0px; top: 0px; background-position:0px 0px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 01</div>
</a>
<a class=appicon01 style="left: 160px; top: 0px; background-position:-160px 0px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 02</div>
</a>
<a class=appicon01 style="left: 320px; top: 0px; background-position:-320px 0px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 03</div>
</a>
<a class=appicon01 style="left: 480px; top: 0px; background-position:-480px 0px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 04</div>
</a>
<a class=appicon01 style="left: 640px; top: 0px; background-position:-640px 0px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 05</div>
</a>
<a class=appicon01 style="left: 0px; top: 160px; background-position:0px -160px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 06</div>
</a>
<a class=appicon01 style="left: 160px; top: 160px; background-position:-160px -160px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 07</div>
</a>
<a class=appicon01 style="left: 320px; top: 160px; background-position:-320px -160px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 08</div>
</a>
<a class=appicon01 style="left: 480px; top: 160px; background-position:-480px -160px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 09</div>
</a>
<a class=appicon01 style="left: 640px; top: 160px; background-position:-640px -160px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 10</div>
</a>
</div>