I'm trying to automate account registration using Selenium java and I'm having troubles clicking a drop down menu on the registration. I want it to click the secret question drop down and select "Who is your favorite author?". Here is the html code.
<div class="clear input_wrapper_bg">
<div class="name_field">
<label for="SecretQuestion">Secret Question</label>
</div>
<div class="select_field">
<div class="select2-container" id="s2id_SecretQuestion">
<a href="#" onclick="return false;" class="select2-choice" tabindex="-1"><span>What is your mother's maiden name?</span><abbr class="select2-search-choice-close" style="display:none;"></abbr>
<div>
<b></b>
</div>
</a>
<div class="select2-drop select2-with-searchbox select2-drop-active select2-offscreen" style="display: block;">
<div class="select2-search">
<input type="text" autocomplete="off" class="select2-input select2-focused">
</div>
<ul class="select2-results">
</ul>
</div>
</div>
<select data-val="true" data-val-required="The Secret Question field is required." id="SecretQuestion" name="SecretQuestion" style="display: none;">
<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
<option value="What was your high school mascot?">What was your high school mascot?</option>
<option value="Who is your favorite author?">Who is your favorite author?</option>
<option value="What was the name of your first pet?">What was the name of your first pet?</option>
</select>
<div class="error_msg">
<span class="field-validation-valid" data-valmsg-for="SecretQuestion" data-valmsg-replace="true"></span>
</div>
</div>
</div>
I have tried using
new Select(driver.findElement(By.id("s2id_SecretQuestion"))).selectByVisibleText("Who is your favorite author?");
But it doesn't work because when I click the drop down menu it adds some more html code at the bottom of the page.
<div class="select2-drop select2-with-searchbox select2-drop-active" style="display: block; top: 541.109375px; left: 876.3125px; width: 310px;">
<div class="select2-search">
<input type="text" autocomplete="off" class="select2-input select2-focused" tabindex="-1">
</div>
<ul class="select2-results">
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">
<span class="select2-match"></span>What is your mother's maiden name?
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">
<span class="select2-match"></span>What was your high school mascot?
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">
<span class="select2-match"></span>Who is your favorite author?
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
<div class="select2-result-label">
<span class="select2-match"></span>What was the name of your first pet?
</div>
</li>
</ul>
</div>
Any help would be appreciated. Thanks.
The way I interact with select lists is easy:
/**
* Clicks The Selector List and picks your option.
*
*/
public void selectOptionFromSelector(String selectedItem) {
WebElement select = webDriver.findElement(By.id("idhere"));
Select dropDown = new Select(select);
String selected = dropDown.getFirstSelectedOption().getText();
if(selected.equals(selectedItem)){
// This should not happen
}
List<WebElement> Options = dropDown.getOptions();
for(WebElement option:Options){
if(option.getText().equals(selectedItem)) {
option.click(); // clicks the option we want to select.
}
}
}
It appears you are using the wrong selector! From the sample code you posted By.id("s2id_SecretQuestion") is a div element and not a select element. Try:
new Select(driver.findElement(By.id("SecretQuestion"))).selectByVisibleText("Who is your favorite author?");
Related
Depending on who logs in the page changes from a field having a drop down menu to the field not having a drop down menu and I want my program to ignore that field when the drop down menu is not available. What I have now is this (customCoverageCell targets a cell in Excel)
Select dropDown = new Select(driver.findElement(By.xpath("//*[contains(text(), '"+ customCoverageCell +"')]/following::select")));
if((!customValueCell.equals("") && !driver.findElements(By.xpath("//*[contains(text(), '"+ customCoverageCell +"')]/following::select")).isEmpty())){
dropDown.selectByValue(customValueCell);
}
but it will try to change the drop down menu.
I've tried this
Select dropDown = new Select(driver.findElement(By.xpath("//*[contains(text(), '"+ customCoverageCell +"')]/following::select")));
if((!customValueCell.equals("") && driver.findElements(By.xpath("//*[contains(text(), '"+ customCoverageCell +"')]/following::select")).isEnabled())){//also tried isDisplayed and isSelected just to see if it actually would do anything
dropDown.selectByValue(customValueCell);
}
How would I get it to not try to input a value without making sure the value in excel is blank?
Here is the HTML in question:
WITHOUT DROP DOWN
<div class="wrap-padding-sm">
<div class="threeCols">
<div class="colContent">
<div class="sub-colContent">
<span class="checkmark-grey">
</span>
<span class="checkTitle">Third Party (THIS IS WHERE I NEED TO TARGET AND WORK FROM)
</span>
</div>
<div class="sub-colContent">Limit:
<span class="amount-midCol">$$$$$$$$$$$$
</span>
</div><span class="scroogeMsg h7 mobile-show">Some text</span>
</div>
<div class="colContent">
<a data-toggle="collapse" class="margin-R10" data-target="#cust_standard_scrooge_0">
<span>What this covers
</span>
</a>
<a data-toggle="collapse" data-target="#cust_standard_scrooge_0" class="btn-accordian collapsed"> </a>
</div>
</div>
<div id="cust_standard_scrooge_0" class="scrooge-wrap collapse">
<p>Some text
</p>
</div><span class="scroogeMsg h7 mobile-hide">Some text</span>
</div>
WITH DROP DOWN
<div class="wrap-padding-sm">
<div class="threeCols">
<div class="colContent">
<div class="sub-colContent">
<span class="checkmark-grey">
</span>
<span class="checkTitle">Third Party (THIS IS WHERE I NEED TO TARGET AND WORK FROM)
</span>
<span class="checkTitle_sub">Some text
</span>
</div>
<div class="sub-colContent">
<div class="select-dropWrap">
<div id="h_abc194" class="form-group form-group-lg "><label for="changeScrooge:h_abc161:0:h_abc194:select-one-menu" class="control-label">Limit: </label>
<div class="select-dropMenu ">
<div class="selector uniform-select fixedWidth" id="uniform-changeScrooges:h_abc161:0:h_abc194:select-one-menu"><span style="user-select: none;">1000000</span><select id="changeScrooges:h_abc161:0:h_abc194:select-one-menu" name="changeScrooges:h_abc161:0:h_abc194:select-one-menu" class="form-control input-lg " size="1" onchange="mojarra.ab(this,event,'valueChange','changeScrooges:custom_standard_scrooges','changeScrooges:custom_standard_scrooges changeScrooges:customAcceptDeclinePNL',{'onevent':recommendedScroogeAfterAJAX})">
<option value="1000000" selected="selected">1000000</option>
<option value="2000000">2000000</option>
</select></div>
</div>
</div>
</div>
</div><span class="scroogeMsg h7 mobile-show">Some text</span>
</div>
<div class="colContent">
<a data-toggle="collapse" class="margin-R10" data-target="#cust_standard_scrooge_0">
<span>What text?
</span>
</a>
<a data-toggle="collapse" data-target="#cust_standard_scrooge_0" class="btn-accordian collapsed"> </a>
</div>
</div>
<div id="cust_standard_scrooge_0" class="scrooge-wrap collapse">
<p>Some text
</p>
</div><span class="scroogeMsg h7 mobile-hide">Sme text</span>
</div>
All the black spots are just text fields that had to be blacked out
This is the small trick that i always used to find the existence of an element.
if(driver.findElements(By.xpath("")).size()>0)
{
//Element actually exists
//Do the Stuff
}
else
{
//Element doesn't exist
//Do the stuff if any
}
Hope this helps you. Thanks.
I am using Java and Selenium to write a test. I have an element (a drop down menu) that I want to click on that I used action.click, elemnet.clcik javascript executor. But instead of the element they all click on the most top-left side of the window.
I opened developer tool window and checked my xpath that I finding the element with and it's correct, i mean when I copy paste the xpath at the DOM it shows the element. why do they click on top-left side of the window?
below is the snippet of the dom that the element is in there:
<div class="verde-form-row workflowTask-row even">
<h1><span class="by-label">Service</span>: Platinum <span class="unitOrLld">(Acres)</span></h1>
<form class="verde-form-fields fieldInfo-fields " data-task="">
<div data-create-with="" class="form-field-wrapper task-create-with">
<div class="select2-container select2-container-multi verde-select2 undefined" id="s2id_autogen11438">
<ul class="select2-choices">
<li class="select2-search-field">
<label for="s2id_autogen11439" class="select2-offscreen"></label>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input select2-default" id="s2id_autogen11439" placeholder="" style="width: 290px;" aria-activedescendant="select2-result-label-11977"> </li>
</ul>
</div>
<input data-selector="" type="hidden" name="field" value="" tabindex="-1" class="select2-offscreen">
</div>
<div class="create-task-info">
<div class="task-comments">
<input type="text" name="comments" placeholder="Comments" value="">
<button type="button" data-action="cancel">Cancel</button>
</div>
<div class="task-lab">
<div class="form-field-wrapper" data-field-area="">
<input type="number" step="any" min="0" name="field_area" placeholder="Field Area" value="">
<label class="task-field-area-unit" data-field-area-units="">Acres</label>
</div>
<div data-lab-priority="" class="form-field-wrapper">
<div class="select2-container verde-select2 undefined select2-allowclear" id="s2id_autogen12036">
<a href="javascript:void(0)" class="select2-choice" tabindex="-1"> <span class="select2-chosen" id="select2-chosen-12037">Applied (Pre Buy)</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span>
</a>
<label for="s2id_autogen12037" class="select2-offscreen"></label>
<input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-12037" id="s2id_autogen12037">
<div class="select2-drop select2-display-none select2-with-searchbox">
<div class="select2-search">
<label for="s2id_autogen12037_search" class="select2-offscreen"></label>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-12037" id="s2id_autogen12037_search" placeholder=""> </div>
<ul class="select2-results" role="listbox" id="select2-results-12037"> </ul>
</div>
</div>
<input data-selector="" type="hidden" name="lab_priority_type" value="11" tabindex="-1" title="" class="select2-offscreen">
</div>
<div data-lab-analysis="" class="form-field-wrapper"></div>
</div>
</div>
</form>
and this is my xpath:
//div[./h1[contains(text(),'Platinum')]]//span[text()='Applied (Pre Buy)']
a hint: when I click on any other parts of the window and then click on the element it works !!!
I have the below code for the multiple select box in the web page and I need to
make a selection of any option group for the list using selenium
webdriver
<div class="ms-drop bottom" style="display: block;">
<div class="ms-search">
<ul style="max-height: 250px;">
<li class="group">
<label class="optgroup" data-group="group_0" style="display: block;">
<input type="checkbox" name="selectGroup">AmaWaterways
</label>
</li>
<li class="multiple" style="width: 180px;">
<label style="display: block;">
<input type="checkbox" data-group="group_0" value="AmaSerena" name="selectItem">AmaSerena
</label>
</li>
<li class="multiple" style="width: 180px;">
<label style="display: block;">
<input type="checkbox" data-group="group_0" value="AmaPura" name="selectItem">AmaPura
</label>
</li>
</ul>
</div>
</div>
Can somebody suggest how to select an option group of my choice?
In order to toggle a checkbox, it is as simple as clicking it.
String targetOption = "whatever";
By targetOptionLocator = By.cssSelector("input[type=checkbox][value=" + targetOption + "]");
driver.findElement(targetOptionLocator).click();
You may also want to check if a checkbox is already checked: WebElement#isSelected.
E.g.:
void selectOption(String optionName) {
By targetOptionLocator = By.cssSelector("input[type=checkbox][value='" + + optionName + "']");
WebElement option = driver.findElement(targetOptionLocator);
if(!option.isSelected())
option.click();
}
I need to write script for drop-down boxes. There are two dropdown elements on same screen and both the dropdown boxes have got similar class names (Dropdown boxes are of search and select kind),and there is no unique-id for any element.
So the script works fine to select element from first dropdown, But it fails when it supposed to perform same for second dropdown.
Do reply
Regards
<div class="title-edit-form" id="49156080-2097-ea0f">
<div class="control-group required">
<label class="control-label">Title
</label>
<div class="controls row-fluid">
<div class="select2-container span12 select2-container-active select2-dropdown-open" id="s2id_title">
<a href="#" onclick="return false;" class="select2-choice" tabindex="-1">
<span>de</span>
<abbr class="select2-search-choice-close" style="display:none;">
</abbr>
<div>
<b></b>
</div>
</a>
</div>
<input class="span12" id="title" type="hidden" style="display: none;" value="-1">
</div>
</div>
<div class="select2-drop select2-drop-active" style="display: block; top: 177px; left: 536px; width: 530px;">
<div class="select2-search">
<input type="text" autocomplete="off" class="select2-input select2-focused" tabindex="-1" style="">
</div>
<ul class="select2-results">
<li class="select2-results-dept-0 select2-result select2-result-selectable select2-new">
<div class="select2-result-label">
<span class="select2-match">de</span>
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">
<span class="select2-match">De</span>
"an"
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
<div class="select2-result-label">
"Stu"
<span class="select2-match">de</span>
"nt"
</div>`enter code here`
</li>
</ul>
</div>
the best way is to use cssSelector() for that kind of things, and especially the nth-child() function from cssSelector().
Exemple :
// gets the first div that contains school as a class value.
driver.findElement(By.cssSelector("div.school:nth-child(1)"));
More about cssSelector()
exemple wokring here -> JSfiddle
Hi I have created a JSP page. First tab contains a SELECT field. Based on the selected value I want to show the next tab. Can anyone help me please? I tried many times, but I am not getting.
<div class="navbar btn-navbar">
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#datacollector" target="main"
data-toggle="tab">Data Collector</a></li>
<li class="hidden"><a href="#fromDB" target="main"
data-toggle="tab">Data Load</a></li>
<li class="hidden"><a href="#fromFile" target="main"
data-toggle="tab">Data Load</a></li>
<li class="hidden"><a href="#email" target="main"
data-toggle="tab">Data Load</a></li>
<li><a href="ajax/DataFieldMapping.jsp" target="main" data-toggle="tab">Data
Map</a></li>
<li>Schedule</li>
</ul>
<br> <br> <br>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="datacollector">
<div class="container">
<div class="row">
<div class="span8">
<form name="selectType" action="selectType"
onsubmit="return validateForm()" target="#fromDB" method="get">
<fieldset>
</select> <label class="control-label" for="dataloadType">Data
load Type:</label> <select id="dataloadType" name="dataloadType">
<option>Choose Data load Type</option>
<option value="fromDB">From Database</option>
<option value="fromFile">From File</option>
<option value="email">E-mail</option>
<option value="webServices">Web Services</option>
</select>
<p>
<button id="nexttab" type="submit" class="btn btn-success">Submit</button>
</p>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="fromDB">
<iframe src="GenericFileUpload.jsp" width="1250" height="400"></iframe>
</div>
<div class="tab-pane fade" id="fromFile">
<iframe src="GenericDB.jsp" width="1250" height="400"></iframe>
</div>
<div class="tab-pane fade" id="email">
<iframe src="EmailService.jsp" width="1250" height="400"></iframe>
</div>
<div class="tab-pane fade" id="datamap">
<iframe src="DataFieldMapping.jsp" width="1250" height="400"></iframe>
</div>
<div class="tab-pane fade" id="schedule">
<iframe src="UploadConfiguration.jsp" width="1250" height="400"></iframe>
</div>
</div>
</div>
</div>
If the user selects from File it should show the next tab with id fromFile and also it should hide the tabs with ids fromDB and email. Can someone help me out?
How to do using Jquery?
How to make a DIV visible and invisible with JavaScript
Just to add-on to this:
onchange event should be registered with a java-script function. This function will read the current selected value in the select box.
Based on the value, make only the div visible that's required, rest all to hidden.
$('#dataloadType').live('change',function(){
var value = $(this).val();
$('#tabs').tabs('select',value);
});