How we can select item from drop down combo box using value of element in selenium webdriver - selenium

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 :)

Related

How Do I Click a div dropdown menu using VBA IE automation

Have the following DIV class, where you click on the bottom it will create a drop down menu. In browser, you can click it with mouse, however with IE automation with VBA. I tried the ".click" method and doesn't work.
I also tried the FireEvent with "onclick" "onchange" "onmouseover" and nothing works. Trying to see if there is any other solution
<div id="add12" style="width: 47px; height: 23px; white-space: nowrap;
position: static;"
controltype="DropDown" param="par">
<input name="ct10115" id="ddl" type="hidden" value="E">
<input class="ffb-input" id="input" style="width: 13px;" maxlength="1"
autocomplete="off">
<span class="ffb-arrow ui-button ui-widget ui-state-default ui-corner-Allui-button-text-icon-primary" id="teste2" role="button" ariadisabled="false" style="position:
static;">
<span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"
style="left: 0px; top: 0px; margin-top: 0px; position: static;"></span>
<span class="ui-button-text"></span>
</span>
<div class="ffb" id="example11" style="left: 0px; top: 29px; width: 450px; display: none; z- index: 21; opacity: 0.999;">
<div class="content" style="height: auto; max-height: 200px;" scrolltop="0">
<div class="row" id="A" val="A" std_phase_cd="A" std_nm="A_">
<table>
<tbody>
<tr>
<td style="width: 45px;">A </td>
<td>none A </td>
</tr>
</tbody>
</table>
</div>
<div class="row" id="B" val="B" std__cd="B" std_nm="1">
<table>
<tbody>
<tr>
<td style="width: 45px;">B </td>
<td>none1 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div></div>
</div>
</div>
ok I got it figured out.
So I use the dev tool on browser, and found the event e.g. click, mousedown etc.
then I use IE.dipatchEvent to trigger the click event.

Unable to enter and select option in custom combobox

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

Element not reachable error when trying to enter values into search field

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.

change content when resize in gridster.js

i just learn to using gridster, and i want to create a card show general infomation and when user select expand the card, this wil change content and show full infomation off the product!
this is the card before click expand
<ul>
<li class="firm" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div style="width: 95%; height: 80%; float: left; margin: 5px" id="divMain_1">
<div id="headerCol" style="width: 100%; height: 15%">
<span id="quankul">asset under management</span>
</div>
<div id="totalCol" style="width: 100%; height: 25%">
<span class="bold secondDiv" style="font-size: 24px">$1.41 Billion</span> <span class="bold">
(total asset)</span>
</div>
<div class="secondDiv" style="width: 100%; height: 50%; float: left">
<div style="float: left; width: 100%">
<div style="float: left; width: 70%">
<span class="bold">Top 3 Plan</span>
</div>
<div style="float: left; width: 30%">
</div>
</div>
<div style="float: left; width: 100%">
<div style="float: left; width: 70%">
<span>Seafood Gallery</span>
</div>
<div style="float: left; width: 30%">
<span>$100.000</span>
</div>
</div>
<div style="float: left; width: 100%">
<div style="float: left; width: 70%">
<span>ACME Enterprise</span>
</div>
<div style="float: left; width: 30%">
<span>$200.000</span>
</div>
</div>
<div style="float: left; width: 100%">
<div style="float: left; width: 70%">
<span>Ashley Cleaning</span>
</div>
<div style="float: left; width: 30%">
<span>$300.000</span>
</div>
</div>
</div>
</div>
<div id="expand" style="width: 100%;padding-bottom:0px; float: right;text-align:right">
<span>Expand</span>
</div>
<div id="collapse" style="width: 100%;padding-bottom:10px;height:20%;text-align:right;display:none">
<span>Collapse</span>
</div>
</li>
and when i click "expand" this will show ful infomation about the product;
can you help me to do it!

clearing out dojox/mobile/Accordion contained objects

I'm trying to destroy descendants of Accordion, that is I have 4 Content Panes within an Accrdion and then when I get new data I want to repopulate the accordion with that data(eg 5 ContentPanes) but the issue is that Once I call destroyDescendants on the accordion the content panes still reside within as dijit__Contained objects left from previous data:
<div class="mblAccordionTitle mblAccordionHasIcon mblAccordionTitleSelected" id="dijit__Contained_0" widgetid="dijit__Contained_0" style="-webkit-user-select: none;">
<a class="mblAccordionTitleAnchor" role="presentation">
<div class="mblAccordionIconParent mblAccordionIconParent2">
<div class="mblSpriteIconParent" style="position: relative; width: 32px; height: 32px;">
<img alt="" src="images/i.png" class="mblSpriteIcon" style="position: absolute; clip: rect(0px 32px 32px 0px ); top: 0px; left: 0px;">
</div>
</div>
<div class="mblAccordionIconParent mblAccordionIconParent1">
<div class="mblSpriteIconParent" style="position: relative; width: 32px; height: 32px;">
<img alt="" src="images/i.png" class="mblSpriteIcon" style="position: absolute; clip: rect(0px 64px 32px 32px); top: 0px; left: -32px;">
</div>
</div>
<div class="mblAccordionTitleTextBox" role="tab" tabindex="0" aria-controls="widget/PersonContainerContentPane" aria -selected="true" aria-posinset="1" aria-setsize="4">
<span class="mblAccordionTitleLabel">John Smith
</span>
</div>
</a>
</div>
Also the contained object is not a child of accordion...
Is there any way to get rid of this when I call destroyDescendants on accordion?
That solved my problem:
for (var i = this.accordion.containerNode.childNodes.length - 1; i >= 0; i--) {
registry.byId(this.accordion.containerNode.childNodes[i].id).destroyRecursive(false);
};
Don't know why destroyDescendants didn't clean up leftover html.