Select dropdown1 = new Select(driver.findElement(By.xpath("//html/body/div/div[2]/div/div/div//div//select")));
List<WebElement> drop1 = dropdown1.getAllSelectedOptions();
for(WebElement temp : drop1) {
String drop_text = temp.getText();
System.out.println(drop_text);
}
The above xpath represents 3 dropdown fields.When i execute this code i am getting the selected text in first dropdown only.What changes i need to do in this to get the selected options from all three dropdown fields.
**html code**
<div class="form-group">
<label class="control-label col-md-4 col-sm-4" for="type-select">Category<span style="color:red">*</span></label>
<div class="col-md-8 col-sm-8">
<select defaultattr="4" class="form-control input-style mandatory" data-val="true" data-val-number="The field CategoryID must be a number." id="CategoryID" name="CategoryID"><option value="">--Select--</option>
<option value="1">Architectural Firm</option>
<option value="2">Interior Design Firm</option>
<option value="3">General Contractor</option>
<option selected="selected" value="4">2tec2 Sales Network</option>
<option value="5">Cleaning Company</option>
<option value="6">Commercial end user</option>
</select>
<div class="form-group">
<label class="control-label col-md-4 col-sm-4" for="type-select">Company Status</label>
<div class="col-md-8 col-sm-8">
<select class="form-control input-style" id="ddlCompanyStatus">
<option selected="selected" value="1">Active</option>
<option value="0">Non Active</option>
</select>
</div>
</div>
<div class="form-group">
You can use css selector option:checked to get selected options
List<WebElement> selectedOpts = driver.findElements(
By.cssSelector("select.form-control > option:checked"));
for(WebElement temp : selectedOpts ) {
System.out.println(temp.getText());
}
First of all, calling findElement() only returns a single element from the HTML page. In order to get all elements that match a given selector, you need to call findElements() instead.
Secondly, you seem to be under the impression that getAllSelectedOptions() will return all of the options selected for all <select> fields. This is not the case. Instead, it only returns all of the selected options for a single <select> field. This only makes sense if you use the multiple attribute.
To get the selected option in each <select>, you first need to use findElements() instead of findElement(). Then you need to iterate over the selected elements and call getSelectedOption() on each one.
Related
I'm developing a automation that needs to access the first (and only one) dropdown value. I want to get this "Unavailable date" value to do a validation in the future. This is the HTML:
<div class = "content-box-wrapper">
<fieldset>
<li>
<label>Select a time</label>
<div>
<select name = "idAgenda" id="hourSelected">
<option value>Unavailable date</option>
</select>
</div>
</li>
</fieldset>
</div>
import org.openqa.selenium.support.ui.Select;
Select hours = new Select(driver.findElement(By.id("hoursSelected")));
hours.selectByIndex(1);
hours.selectByVisibleText("Unavailable date");
hours.selectByValue("Unavailable date")
Since it's in a Select tag you can use the following import and select by index or value.
You need to use the below xPath to get the selected value of drop-down.
//select[#id='hourSelected']/option
In case, if drop-down is having multiple values then if it have selected tag for selected value. Please write xPath as below,
HTML
<option value="">Unavailable date1</option>
<option selected="" value="">Unavailable date2</option>
<option value="">Unavailable date3</option>
xPath
//select[#id='hourSelected']/option[#selected]
I got it using getText() method:
WebElement disponibilidade = chrome.findElement(By.xpath("//*[#id=\"hourSelected\"]"));
String text1 = disponibilidade.getText();
There are two select, the second depends on the first:
<div class="form-group">
<label class="col-xs-12 col-sm-2 control-label">Тип ТС:</label>
<div class="col-xs-12 col-sm-10">
<select class="form-control " type="text" [(ngModel)]="item.TransportTypeId">
<option *ngFor='let type of transportTypes' [ngValue]='type.Id' [textContent]='type.Name'></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-2 control-label">Подтип ТС:</label>
<div class="col-xs-12 col-sm-10">
<select class="form-control " type="text" [(ngModel)]="item.TransportSubTypeId" (ngModelChange)="show()">
<option [ngValue]="undefined">Не указано</option>
<option *ngFor="let subType of transportSubTypes | filterBy: ['TransportTypeId']: item.TransportTypeId" [ngValue]='subType.Id' [textContent]='subType.Name'></option>
</select>
</div>
</div>
It is assumed that the second select can be empty (undefined). At the initial time all works fine, both select have values, when the second ngModelChange changes, it works. But if I select any value in the first select, when the filter for the second select returns an empty array, then visually the second select is dropped to the value Not chosen (undefined), but the ngModel does not equal undefined.
For example:
item.TransportTypeId = 1;
item.TransportSubTypeId = 1;
change to:
item.TransportTypeId = 2;
The filterBy filter returns [], item.TransportSubType === 1, but the value Not chosen is selected and the ngModelChange event does not occur.
Help me figure out how to make it so that select automatically resets the value of the model.
You need to add component logic as well to understand the query in right direction. But by looking to your query change the code as per below
(ngModelChange)="show($event)"
//component
show(event) { this.val = event.value; }
I try to load conditional value to a select tag based on the user's choice on a pervious form tag. it might require java or php. i am not competent in any of those two language.
the logic is explain as the following.
<form>
<input name="complaint" value="copyright" type="radio">copyright <br>
<input name="complaint" value="trademark" type="radio">trademark <br>
<input name="complaint" value="other_concern" type="radio"> other concerns
</form>
if complaint="copyright" then
<select>
<option value="image">image</option>
<option value="product">product</option>
</select>
elseif complaint="trademark" then
<select>
<option value="item">item</option>
<option value="image">image</option>
</select>
elseif complaint="other_concern"
<select>
<option value="explain">explain</option>
</select>
end if
any solution?
Heres a solution in Jquery. Add a class name to the inputs and hide the selct options by default
<input name="complaint" value="copyright" type="radio" class="complaint">
then add unique ID tags to the select options along with a css class i like to use, .addClass and .removeClass are slighty faster and more efficent than .hide() and .show() selectors
Add the css at the bottom of your css sheet
.hidden{position:absolute;width:0;height:0;overflow:hidden;visibility:0;padding:0;margin:0}
<select id="copyright" class="selectOptions hidden">
<option value="image">image</option>
<option value="product">product</option>
</select>
Finally add some JQuery You need to copy the remainder for your other hidden values
$('.complaint').click(function() {
$('.selectOptions').addClass('hidden');
var checkComplaint = $(this).val();
$('#' + checkComplaint).removeClass('hidden');
});
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 :)
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