Correct Syntax for this Selenium command - selenium

I am just not sure what will be the syntax for this
This is a drop-down which changes its ID so I wish to choose the label above to navigate the click
Here is the HTML
<label class="form-title">Charging and Billing Alignment</label>
<select name="ratingAndBillingAlignment" class="reverse-toggle-select check-if-form-row-visible hide-child-if-not-visible loadable-drop-down-37 loadable-drop-down-select" id="ratingAndBillingAlignment" makeloadabledropdown="37" style="display: none;" fixed_position=".popup-content-inner">
<option value="TRUE" class="done-into-select-dd">Yes</option>
<option value="FALSE" selected="selected" class="done-into-select-dd">No</option>
</select><span num="37" class="loadable-drop-down loadable-drop-down-container loadable-drop-down-container-37" id="makeLoadableDropDown37" style="position: relative;" title="No" title2="No"><span class="dropdown-label initialized" style="width: 100%;"><span class="dropdown-html"><span class="value_box" style="display: none;">FALSE</span><span class="text">No</span></span></span><span style="display: none; position: absolute; width: 100%; left: 0px;" class="dropdown-list custom-drop-down-dropdown-list custom-drop-down-dropdown-list-37" stop="0" loading="0" data-counter="37"><div class="option-list" style="max-height: 250px;"><div class="dropdown-link the-dd-counter-1 first-dd-link" c="1" title="Yes"><span class="dropdown-html"><span class="value_box" style="display: none;">TRUE</span><span class="text">Yes</span></span></div><div class="dropdown-link the-dd-counter-2 last-dd-link selected" c="2" title="No"><span class="dropdown-html"><span class="value_box" style="display: none;">FALSE</span><span class="text">No</span></span></div></div></span></span>
driver.findElement(By.xpath(
"//span[#class='dropdown-label initialized']/following-sibling::label[contains(text(),'Charging and Billing Alignment')and(#xpath='1')]"))
.click();
Thanks for your help!

Here is the xpath that you can use with name. As name does not update as it did in the case of id.
//select[#name='ratingAndBillingAlignment']

Locating <select> won't work in your case as its hidden. style="display: none;"
Try using below xpath to click on span looks alike dropdown
//label[contains(.,'Charging and Billing Alignment')]/following-sibling::span[contains(#class,'loadable-drop-down')]

Related

Capture list from autocomplete drop down

I am trying to capture list from this drop down.
<input aria-autocomplete="list" aria-owns="typeaheadDataPlain" autocomplete="off" class="clear-btn-input gcw-storeable text gcw-origin gcw-required gcw-distinct-locations " data-gcw-field-type="origin" data-gcw-storeable-name="gcw-origin" data-js-theme="autocomplete" data-lob="FLIGHTS" data-locale="en_US" data-mask="95" data-minchar="1" data-provide="utypeahead" data-template="hbs/templates/destinationCustom" data-tooltip-id="typeaheadDataPlain" data-version="v4" data-airport_code_element="flight-origin-hp-flight-airport_code" data-hotel_id_element="flight-origin-hp-flight-hotel_id" data-lat_long_element="flight-origin-hp-flight-lat_long" data-region_id_element="flight-origin-hp-flight-region_id" data-region_type_element="flight-origin-hp-flight-region_type" data-station_code_element="flight-origin-hp-flight-station_code" data-city_element="flight-origin-hp-flight-city" data-country_code_element="flight-origin-hp-flight-country_code" data-category_element="flight-origin-hp-flight-category" data-heds_element="flight-origin-hp-flight-heds" data-search_name_element="flight-origin-hp-flight-search_name" data-ta_element="flight-origin-hp-flight-ta" id="flight-origin-hp-flight" placeholder="City or airport" spellcheck="false" type="text">
but I can't find no "ul" and I don't know where it's getting the list from. This is what I see when the list appears in HTML.
<div class="autocomplete-dropdown" style="left: -2px; max-width: 604px; min-width: 286px; width: 604px; display: none;"></div>

Dynamic Element handling

In our application there is a task view page. For different tasks, xpath for the same button found change every time as below
WIN_1_1000000014
WIN_2_1000000014
WIN_3_1000000014
WIN_4_1000000014
WIN_5_1000000014
I am providing html codes for two of such scenarios below . I am using following xpaths to find that button but not working for me.
//div[#ardbn='Assignee Organization']//a[#class = 'btn btn3d menu']//img
//img[#alt='Menu for Organization']
Help me guys
<div id="WIN_1_1000000014" class="df arfid1000000014 ardbnAssigneeOrganization Char" arid="1000000014" artype="Char" ardbn="Assignee Organization" arlbox="0,4,78,17" ardcf="1" style="z-index:998;top:84px; left:5px; width:263px; height:21px;" arwindowid="1">
<label id="label1000000014" class="label f6" for="x-arid_WIN_1_1000000014" style="top: 4px; left: 0px; width: 78px; height: 17px;">Organization</label>
<textarea id="arid_WIN_1_1000000014" class="text sr " cols="20" maxlen="60" style="top:0px; left:83px; width:154px; height:21px;" armenu="CTM:SGP:SupportOrganization3-Q" mstyle="2" arautoc="1" arautocmb="1" arautocak="0" arautoctt="400" rows="1" title="Service_Desk_First_Tier"
wrap="off"></textarea>
<a class="btn btn3d menu" href="javascript:" style="top:0px; left:242px; width:21px; height:21px;">
<img class="btnimg" src="../../../../resources/images/mt_sprites.gif" alt="Menu for Organization" title="" style="background-color: transparent;">
</a>
<div id="WIN_3_1000000014" class="df arfid1000000014 ardbnAssigneeOrganization Char" arid="1000000014" artype="Char" ardbn="Assignee Organization" arlbox="0,4,78,17" ardcf="1" style="z-index:998;top:84px; left:5px; width:263px; height:21px;" arwindowid="3">
<label id="label1000000014" class="label f6" for="x-arid_WIN_3_1000000014" style="top: 4px; left: 0px; width: 78px; height: 17px;">Organization</label>
<textarea id="arid_WIN_3_1000000014" class="text sr " cols="20" maxlen="60" style="top:0px; left:83px; width:154px; height:21px;" armenu="CTM:SGP:SupportOrganization3-Q" mstyle="2" arautoc="1" arautocmb="1" arautocak="0" arautoctt="400" rows="1" title="Service_Desk_Resolver"
wrap="off"></textarea>
<a class="btn btn3d menu" href="javascript:" style="top:0px; left:242px; width:21px; height:21px;">
<img class="btnimg" src="../../../../resources/images/mt_sprites.gif" alt="Menu for Organization" title="" style="background-color: transparent;">
</a>
you can write the xpath for the latest task as below:
(//div[contains(#id,'WIN_')])[last()]//img[#alt='Menu for Organization']
Use below code for click or any other operations:
List<WebElement> elements = driver.findElements(By.xpath("//img[#alt='Menu for Organization']"));
for(int i=1;i<=elements.size();++i){
elements.get(i).click();
}
xpath working for 1st 3 elements is
(//div[#ardbn='Assignee Organization']//a[#class = 'btn btn3d menu']//img)[last()]
xpath working for rest elements is
(//div[#ardbn='Assignee Organization']//a[#class = 'btn btn3d menu']//img)[position()<3]

Selecting drop down in selenium webdriver

I want to select a option from the drop down. The code is like below
<select id="hidBrokerId" name="hidBrokerId" style="display: none;">
<option value="" selected="selected">-- Valitse --</option>
<span class="select-sub" style="display: none; left: 0px; top: 50px; width:232px;">
<span data-value="" style="background: none repeat scroll 0% 0% rgb(232, 232, 232);">-- Valitse --</span>
<span data-value="23" style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">Mainos netissä</span> </select>
It is having display:none attribute so you need to you actions class to navigate to that element and find it.
WebElement ele = driver.findElement(By.xpath("//select[#id='hidBrokerId' and contains(#style,'display: none')]"));
Actions act = new Actions(driver);
act.moveToElement(ele).click(driver.findElement(By.xpath("//option[contains(text(),'Mainos netissä')]"))).build().perform();
Let me know if this works

options for search TextField in navbar

Is it possible that the user could select from the utility dropdown (see picture below) a search option which will effect the search text field?
Or is it possible merge the dropdown and search text field together?
I think you will be able to do this leveraging input-groups. But the docs also mention:
Avoid using elements here as they cannot be fully styled in
WebKit browsers.
HTML to integrate a <select> in the navbar:
<form class="navbar-form navbar-left select-search" role="search">
<div class="input-group">
<span class="input-group-addon">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Then apply the following CSS:
.select-search .input-group-addon {
padding: 0;
border: 0;
}
.select-search .input-group .input-group-addon > select.form-control {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
Demo: http://www.bootply.com/8zPGZ9ySOl
I found this works well in chrome, but in firefox the select arrow got some button like styling:
I'm not sure how to fix the style of the select arrow here. Style the select with -moz-appearance:none or -moz-appearance:menulist won't help. Possible related to: Clearing the background of a <select> element's pulldown button with CSS

Using Selenium IDE to find dynamic ID

I have been able to locate the element by using the following command, target and Value.
Command: Select
Target: //div[#id='ui-id-51']/div[2]/div/fieldset/div/div/select
Value: Documentation
This xpath works, however, the id number is dynamic and will change each time that I open up this window a new time. So the number (51 in this example) may be 201 the next time that I open this window, but the ui-id- will always be the same. So this Target is not found the next time I open the window. I have tried using the following xpath to fix this, but it does not work.
Command: Select
Target: //div[starts-with(#id,'ui-id-')]/div[2]/div/fieldset/div/div/select
Value: Documentation
Can someone give me the correct xpath to find this target with a dynamic id?
Here is the HTML:
<div id="ui-id-22" class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 552px;">
<div></div>
<div class="patient-module-contact-edit">
<!--
start of template: "#contact_log_logEntry_edit"
-->
<div class="new-encounter">
<fieldset class="wide-mode liquid" style="border: none; padding-top: 0px;">
<div class="row span5">
<div class="span5">
<label></label>
<select class="encounterType vf vf-required span4 vf-validated" name="encounterType" style="visibility: visible; background-color: rgb(238, 238, 238);">
<option value=""></option>
<option value="INBOUND_TELEPHONE"></option>
<option value="OUTBOUND_TELEPHONE"></option>
<option value="OUTBOUND_TELEPHONE_VM"></option>
<option value="OUTBOUND_TELEPHONE_NO"></option>
<option value="INBOUND_EMAIL"></option>
<option value="OUTBOUND_EMAIL"></option>
<option value="INBOUND_FAX"></option>
<option value="OUTBOUND_FAX"></option>
<option value="INBOUND_TEXT"></option>
<option value="OUTBOUND_TEXT"></option>
<option selected="" value="ENCOUNTER"></option>
<option value="DOCUMENTATION"></option>
starts-with() based solution looks good and should work according to what you've provided.
You can also try a bit broader check using contains():
//div[contains(#id,'ui-id-')]/div[2]/div/fieldset/div/div/select