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();
Related
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.
In my code I wrote this code to enter the expiration date by SendKeys
driver.findElement(By.cssSelector("#passport-exp-date-input-243202807"))
.sendKeys("2021-05-13");
now after entering the date, the calendar pops up with this date and due to this, I am not able to perform the next action which is selecting gender which is a dropdown.
the code for thar is below:
String locator = "select[id='passport-gender-243202807']" +
"[data-sync-to-element='#citizenship-info-view-passport_gender-243202807']"
Select dropdownGender = new Select(driver.findElement(By.cssSelector()));
dropdownGender.selectByVisibleText("Female");
It is giving me an error: “Element is not visible”
Html for expiration date:
<input required="" type="text" id="passport-exp-date-input-243202807"
name="documentExpirationDateInput"
class="form-control expirationDate input-sm orange-calendar
sync validDateFormat date-picker-selector hasDatepicker"
data-language="en" data-date-format="yy-mm-dd"
data-end-date-of-trip="2018-07-07T00:00:00.000-04:00"
data-min-date="0" data-max-date=""
data-sync-to-element="#citizenship-info-view-document_expiration-243202807"
data-ocr="" value="">
Html for gender:
<select required="" type="text" name="gender" id="passport-gender-243202807"
class="form-control input-sm sync" data-ocr=""
data-sync-to-element="#citizenship-info-view-passport_gender-243202807">
<option value="">Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
Screenshot of Gender
// input expiration date
driver.findElement(By.cssSelector("#passport-exp-date-input-243202807"))
.sendKeys("2021-05-13");
// click any element on page which is not covered by the calendar pop-up
// to make the calendar close, so that it won't cover the Gender element
driver.findElement(<any element no covered by calendar>).click()
// if it's native dropdown,
// click on the dropdown to expand all options
// Generally, for native dropdown, no need to expand options
// we can directly click the option without expand all options.
driver.findElement(By.id("passport-gender-243202807")).click()
// click the wanted option
driver.findElement(By.id("passport-gender-243202807"))
.findElement(By.xpath("./option[text()='Female']")).click()
I haven't tested this but I am pretty sure it should work:
Select dropdown = new Select(driver.findElement(By.id("passport-gender-243202807")));
dropdown.selectByVisibleText("Female");
Or if selecting by text doesn't work, try selecting by index:
dropdown.selectByIndex(2);
Also, to automatically trigger a click event on some other visible element to make the popup calendar go away, try this: https://stackoverflow.com/a/11956130/8065825
UPDATE:
I have just noticed an error in your dropdown HTML: you're placing the </select> closing tag before the dropdown options so clearly that won't work. Try this instead:
<select required="" type="text" name="gender" id="passport-gender-243202807" class="form-control input-sm sync" data-sync-to-element="#citizenship-info-view-passport_gender-243202807" data-ocr="">
<option value="">Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
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 am working on selenium webdriver, and I came up with a certain scenario.
There is a drop down list, and user selects one of the values (Text). The selected value (text) is now displayed on the drop down field.
I want to know how can I extract the text out of that element (div) and then assert it with the selected value (text).
The HTML of the element is:
<div class="kac-entry kac-select kac-display ng-binding" ng-click="toggleDropdown()" ng-hide="shouldShowPlaceholder()" ng-class="{btn: btnStyle, 'btn-primary': btnStyle}" style=""> ^NYA (NYSE COMPOSITE INDEX (NEW METHOD)) </div>
The xpath of the above element is:
//price-trigger[#class='ng-isolate-scope']/div/div[2]/div[1]/div[1]/k-select/div/div[1]
The text in the HTML element is ^NYA (NYSE COMPOSITE INDEX (NEW METHOD)). I want to get this title and check if this is the option (value) that user actually selected or not.
Any help will be highly appreciated.
Just wrap your WebElement into Select Object as shown below
Select select = new Select(driver.findElement(By.id("groupSelect")));
if you want to select by xpath
By.xpath("//price-trigger[#class='ng-isolate-scope']/div/div[2]/div[1]/div[1]/k-select/div/div[1]")
Assert.assertEquals("Please select any option...", select);
Syntax:
String selectedOption = new Select(driver.findElement(By.xpath("Type the xpath of the drop-down element"))).getFirstSelectedOption().getText();
Assert.assertEquals("Please select any option...", selectedOption);
More in detailed on selecting value from dropdown
<html>
<body>
<select id = "designation">
<option value = "MD">MD</option>
<option value = "prog"> Programmer </option>
<option value = "CEO"> CEO </option>
</option>
</select>
<body>
</html>
Now to identify dropdown do
Select dropdown = new Select(driver.findElement(By.id("designation")));
To select its option say 'Programmer' you can do
dropdown.selectByVisibleText("Programmer ");
or
dropdown.selectByIndex(1);
or
dropdown.selectByValue("prog");
I have a situation where I need to get the current selection from the drop down as a text or String and compare it for further assertion, but when I try the getText(), I get the complete list of items in the drop down, how can I get the currently selected item from drop down.
<form id="MODIFY_ATTRIBUTES" class="formList" method="post" action="jfn?ctxcontractId=L4%3A2274&mfunc=30&ctxnavCtx=C&cfunc=228&ctxaccountId=L4%3A1877&oid=L4%3A2042&ctx=L&octx=110&jfnRC=1">
<hr/>
<div class="formListTab">
<fieldset>
<div>
<label class="mandatory" for="p-param-L4:80000">Language</label>
<select id="p-param-L4:80000" name="p-param-L4:80000">
<option value="p-param-L4:80000-L4:12610">English</option>
<option selected="selected" value="p-param-L4:80000-L4:12600">French (Standard)</option>
<option value="p-param-L4:80000-L4:12830">Dutch</option>
</select>
</div>
I used the below XPATH, but it returns the complete list of items from the drop-down.
driver.findElement(By.xpath("//form[#id='MODIFY_ATTRIBUTES']/fieldset[1]/div/select")).getText();
You are fetching the text of whole Select element instead of just the selected option. You may use the inbuilt function to fetch selected option then fetch the text from this. Use Following:
String selectedOption = new Select(driver.findElement(By.id("p-param-L4:80000"))).getFirstSelectedOption().getText();
However if you want to use xpath. You may try following:
String selectedOption = driver.findElement(By.xpath("//select[#id='p-param-L4:80000']/option[#selected='selected']")).getText();
I would recommend Id to fetch your required text.