I have currently hit a stumbling block when trying to simply pick an option from a dropdown menu whilst automating a website.
Here is a snippet of the HTML:
<select id="alarm-dropdown" name="alarm-dropdown" data-bind="value: AlarmCode" data-ga-category="CarInsurance_YourVehicle_VehicleDetails_FittedWithAnAlarm" data-ga-action="Selected" data-ga-label="CarInsurance_YourVehicle_VehicleDetails_FittedWithAnAlarm">
<option class="" selected="" disabled="" value="">Please select...</option>
<option class="" id="alarm-dropdown-99991" value="99991">Factory Fitted Thatcham Approved Alarm/Immobiliser</option>
<option class="" id="alarm-dropdown-99992" value="99992">Factory Fitted Thatcham Approved Alarm</option>
<option class="" id="alarm-dropdown-99993" value="99993">Factory Fitted Non-Thatcham Alarm/Immobiliser</option>
<option class="" id="alarm-dropdown-99994" value="99994">Factory Fitted Non-Thatcham Alarm</option>
<option class="" id="alarm-dropdown-#F" value="#F">Factory Fitted</option>
<option class="" id="alarm-dropdown-#N" value="#N">None</option>
</select>
Here is my current code: -
Select select = new Select(driver.findElement(By.id("alarm-dropdown")));
select.selectByValue("Factory Fitted Non-Thatcham Alarm");
I have tried XPATH/ID/CSS
Select select = new Select(driver.findElement(By.id("alarm-dropdown")));
select.selectByValue("99994");
Try with the xpath:
driver.findElement(By.xpath("//select[#id='alarm-dropdown']/option[#value='99994']")).click();
Related
I have this WebElement:
<select id="month">
<option value="empty">Select</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option selected="" value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
And I want to remove the selected attribute from Jul and put this attribute under different Month.
This is what I have tried to remove the Attribute:
(JavascriptExecutor) driver).executeScript("arguments[0].setAttribute('selected', '')", myElement)
In general if you want to remove an attribute use the JavaScript removeAttribute method rather than trying to use setAttribute. In this case, though, you are working with a select and want to select a different element. Just use the built in Select class in selenium like this:
Select select = new Select(myElement);
select.selectByVisibleText("Aug");
I created an HTML file with the following contents and then tested it on that.
<html>
<body>
<select id="month">
<option value="empty">Select</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option selected="" value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</body>
</html>
Then ran the following code:
#Test
public void testFoo() throws Exception {
WebDriver driver = new FirefoxDriver();
driver.manage()
.window()
.maximize();
driver.get("file:///blah/blah/blah/index.html");
Select select = new Select(driver.findElement(By.id("month")));
select.selectByVisibleText("Dec");
Thread.sleep(10_000);
}
The page ended successfully with "Dec" selected.
To deselect an option you can use deselectBy methods
WebElement dropdown = driver.findElement(By.id("month"));
Select select = new Select(dropdown);
select.deselectByVisibleText("Aug");
// or
select.deselectByValue("7");
// or
select.deselectByIndex(8);
// or
select.deselectAll();
And to select another month
select.selectByVisibleText("Feb")
// or
select.selectByValue("2");
See Select class
I have a form where i have to add form field based on options selected in the select box
what i have done is created all form fields and based on selection show hide fields , But is there any simplified way to do this
<select name="child" id="child">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="age1">
<select name="age1" id="age1">
//options
</select>
</div>
<div id="age2">
<select>
//options
</select>
</div>
<div id="age3">
<select>
//options
</select>
</div>
here is my jquery
$('#child').change(function() {
if( $(this).val() == 0 ) {
$("div#age1").hide();
$("div#age2").hide();
$("div#age3").hide();
$("div#age4").hide();
}
if( $(this).val() == 1 ) {
$("div#age1").show();
$("div#age2").hide();
$("div#age3").hide();
$("div#age4").hide();
}
if( $(this).val() == 2 ) {
$("div#age1").show();
$("div#age2").show();
$("div#age3").hide();
$("div#age4").hide();
}
if( $(this).val() == 3 ) {
$("div#age1").show();
$("div#age2").show();
$("div#age3").show();
$("div#age4").hide();
}
if( $(this).val() == 4 ) {
$("div#age1").show();
$("div#age2").show();
$("div#age3").show();
$("div#age4").show();
}
});
How to do it in simplified way and how to get post value for this
same basic approach as Prashant - but theres no need to use eq().. the divs all have ids that match the values of the select list - and note that the first select list in your current code have the same id as its parent div. This will cause an issue, but the following will fix it.
All this does is on the change of the #child select list - triggers all divs to hide (note the display none in the CSS to hide them initially) and then show the one that matches the age+value of child. I would not actually do it this way myself, but given the code you had this works. I also added options to the age select lists to give them something to show when you change the #child list.
As I said, I would not suggest doing it this way - I would suggest appending a new select list to the end of the form based on the selection -that way you dont have all select lists just sitting there and you don't have to worry about submitting the selected value from one of the hidden lists when you submit the form. Just a thought.
$('#child').change(function() {
$("div").hide();
$("#age"+$(this).val()).show();
});
div{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="child" id="child">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="age1">
<select name="age1">
<option value="a">a</option>
<option value="b">b</option>
</select>
</div>
<div id="age2">
<select name="age2">
<option value="c">c</option>
<option value="d">d</option>
</select></div>
<div id="age3">
<select name="age2">
<option value="e">e</option>
<option value="f">f</option>
</select></div>
<div id="age4"> <select>
<option value="g">g</option>
<option value="h">h</option>
</select></div>
Try This:
<select name="child" id="child">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div class="myage" id="age1">
<select name="age1" id="age_1">
//options
</select>
</div>
<div class="myage" id="age2">
<select>
//options
</select></div>
<div class="myage" id="age3"> <select>
//options
</select></div>
Your JS :
$(".myage:eq(0)").show();
$('#child').change(function() {
$(".myage").hide();
$(".myage:eq("+$(this).val()+")") .show();
});
Use Class instead of ID :)
I have 2 option in my jsp file. First option comobox,
<select name="firstoption">
<option value="select">-Select-</option>
<option value="apple">APPLE</option>
<option value="android">ANDROID</option>
</select>
and when I select the apple option, the second dropdown will be
<select name="secondoption">
<option value="select">-Select-</option>
<option value="iphone">Iphone</option>
<option value="ipod">Ipod</option>
</select>
If I select the android menu, the second dropdown will be another option list.
can anybody help me with this? thanks. and sorry for my bad english
I'm writing a small java application to automate report downloading using Selenium and the IE Webdriver. There are twenty fields which can be selected by a user in one area, and then by clicking a button, the field is moved from availabaleFieldsList to selectedFieldsList. An HTML sample is below.
Is it possible to execute some javascript on the page to insert all values in the selectedFieldsList? Similar to JavaScriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("document.getElementById('id').removeAttribute('attribute')");
<select name="BLANK.availableFieldsListArray" multiple="multiple" size="8" style="width:200;" id="availableFieldsListArray">
<option value="20~L0145~BLANK20~custom" selected="selected">Blank 20</option>
</select>
<select name="BLANK.selectedFieldsList" multiple="multiple" size="8" style="width:200;" id="selectedFieldsList">
<option value="1~L0117~BLANK1~null">Blank 1</option>
<option value="2~L0101~BLANK2~null">Blank 2</option>
<option value="3~L0119~BLANK3~null">Blank 3</option>
</select>
Hello im not able to find following dropdown element. Here is HTML code:
<div class="FormDetails"><br>
<ul class="lsn"><br>
<li><br>
<span id="errfileName"></span><br>
</li><br>
<li style="display: block;"><br>
<div class="LeftSection-Form" style="margin-bottom: 15px;"><br>
<div class="FormLabel"><br>
<Community<br>
<span class="FormDetails_required"> Required</span><br>
</div><br>
<div class="FormValue"><br>
<select id="Fact-Communities-LIVE" class="ToolTipPopup Sel1355" tooltip-title=<p>"Community "</p> onkeydown="return preventBackspace(event);" <br>onchange="dropDownValue(this);" name="Fact.Communities.LIVE" emptyoption="-Please select-"><br>
<option value="TxnyD.PleaseSelect.1.1">-Please select-</option><br>
<option value="TxnyD.Communities.1.1">UVDB</option><br>
<option value="TxnyD.Communities.2.1">THQS</option><br>
<option value="TxnyD.Communities.3.1">Master</option><br>
<option value="TxnyD.Communities.4.1">Connexio</option><br>
<option value="TxnyD.Communities.5.1">SL</option><br>
<option value="TxnyD.Communities.6.1">OG</option><br>
<option value="TxnyD.Communities.7.1">UT</option><br>
<option value="TxnyD.Communities.8.1">TR</option><br>
<option value="TxnyD.Communities.9.1">FGW</option><br>
<option value="TxnyD.Communities.10.1">E.ON TSMS</option><br>
<option value="TxnyD.Communities.11.1">Vattenfall TSMS</option><br>
<option value="TxnyD.Communities.12.1">Delivery1</option><br>
<option value="TxnyD.Communities.13.1">Test community</option><br>
<option value="TxnyD.Communities.14.1">Automotive</option><br>
<option value="TxnyD.Communities.15.1">SHELL SUPPLIER QUALIFICATION SYSTEM</option> <br>
<option value="TxnyD.Communities.17.1">Nestle</option><br>
<option value="TxnyD.Communities.18.1">BuildingConfidence</option><br>
</select><br>
</div><br>
</div><br>
i tried following script to find these element:
//driver.findElement(By.xpath(".//*[#id='Fact-Communities-LIVE']")).click();
//driver.findElement(By.xpath(".//*[#id='Fact-Communities-LIVE']/option[16]/text()='SHELL SUPPLIER QUALIFICATION SYSTEM'")).click();
tried these one as well:
//driver.findElement(By.id("Fact-Communities-LIVE")).sendKeys("SHELL SUPPLIER QUALIFICATION SYSTEM");
//Thread.sleep(1000);
//new Select(driver.findElement(By.id("Fact-Communities-LIVE"))).selectByVisibleText("SHELL SUPPLIER QUALIFICATION SYSTEM");
& these one as well
//WebElement dropDown = driver.findElement(By.xpath(".//*[#id='Fact-Communities-LIVE']"));
//List<WebElement> options = dropDown.findElements(By.xpath(".//*[#id='Fact-Communities-LIVE']/option[16]/text()"));
//driver.findElement(By.xpath(".//*[#id='Fact-Communities-LIVE']/option[16]")).click();
but seem to be something going wrong ..please any one guide me for these.
Try below code
WebElelment dropDown = driver.findElement(By.id("Fact-Communities-LIVE"));
new Select(dropDown).selectByVisibleText("SHELL SUPPLIER QUALIFICATION SYSTEM");
or
new Select(dropDown).selectByValue()("TxnyD.Communities.15.1");
Use the Select class:
Select select = new Select(driver.findElement(By.Id("Fact-Communities-LIVE");
and then use the option you want to select the options, by value, by text, by index etc.
Also check all the tags on the html if all of them are properly open and closed