element not visible exception in selenium drop down - selenium

I am getting element not visible exception in carrier drop-down list. I tried implicit wait, explicit wait, and all id, class, XPath, CSS selector way to find the element. Please help me to get to get the right XPath. I have "element not visible" exception error message at select a carrier drop-down list. Thank you .
<select class="form-control error" id="smsCarrier" name="smsCarrier" required="" data-required-message="Carrier is required." aria-required="true" aria-invalid="false">
<option value="-1">Select a Carrier</option>
<option value="#message.alltel.com">Alltel</option>
<option value="#txt.att.net">AT&T</option>
<option value="#myboostmobile.com">Boost Mobile</option>
<option value="#sms.cricketwireless.net">Cricket Wireless</option>
<option value="#msg.fi.google.com">Project Fi</option>
<option value="#text.republicwireless.com">Republic Wireless</option>
<option value="#messaging.sprintpcs.com">Sprint</option>
<option value="#tmomail.net">T-Mobile</option>
<option value="#email.uscc.net">US Cellular</option>
<select class="form-control error" id="smsCarrier" name="smsCarrier" required="" data-required-message="Carrier is required." aria-required="true" aria-invalid="false">
<option value="-1">Select a Carrier</option>
<option value="#message.alltel.com">Alltel</option>
<option value="#txt.att.net">AT&T</option>
<option value="#myboostmobile.com">Boost Mobile</option>
<option value="#sms.cricketwireless.net">Cricket Wireless</option>
<option value="#msg.fi.google.com">Project Fi</option>
<option value="#text.republicwireless.com">Republic Wireless</option>
<option value="#messaging.sprintpcs.com">Sprint</option>
<option value="#tmomail.net">T-Mobile</option>
<option value="#email.uscc.net">US Cellular</option>
<option value="#vtext.com">Verizon</option>
<option value="#vmobl.com">Virgin Mobile</option>
</select>
I used Fluent wait.
public void ContinueWhenReady(By locator, int timeout)
{
for (int i = 0; i < 2; i++)
{
try
{
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(timeout));
IWebElement element = wait.Until(ExpectedConditions.ElementToBeClickable(locator));
break;
}
catch (Exception e)
{
}
}
}
//PhoneNumberDetails details = table.CreateInstance<PhoneNumberDetails>();
ContinueWhenReady(By.CssSelector("#smsCarrier"), 50);
var SelectaCarrierDropDown = driver.FindElement(By.CssSelector("#smsCarrier"));
SelectaCarrierDropDown.Click();
var selectaCarrierElement = new SelectElement(SelectaCarrierDropDown);
//selectaCarrierElement.SelectByText(details.SelectaCarrier);
selectaCarrierElement.SelectByValue("#myboostmobile.com");

In JAVA you can do something like :
WebDriverWait wait = new WebDriverWait(driver, 10);
Select dropdown = new Select(wait.until(ExpectedConditions.visibilityOf(driver.findElement(By.id("smsCarrier")))));
dropdown.selectByVisibleText("Cricket Wireless");

As others have mentioned your question isn't really detailed enough to know your exact problem, but there are a couple common ones when working with dropdowns in Selenium that I can point out.
First, you need to make sure the select has actually loaded on the page before you try to find it. So you may need to use a WebDriverWait to do that. Example:
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("smsCarrier")));
Then you can try to locate the dropdown and store it in a WebElement:
WebElement carrierDropdown = driver.findElement(By.id("smsCarrier"));
The trick is, to work with dropdowns you need to then wrap that WebElement in a Select object:
Select carrierSelect = new Select(carrierDropdown);
From there you can use methods on that Select object to manipulate it, such as selecting an option from the dropdown. Example:
carrierSelect.selectByVisibleText("Boost Mobile");
or
carrierSelect.selectByValue("#myboostmobile.com");
Hope that helps!

Related

Getting error while selecting drop down value in selenium webdriver

From drop down, I am not able to select the value from dropdown.
HTML Code :
<select id="ctl00_ContentPlaceHolder1_drp85" class="form-control select2-hidden-accessible" data-varindex="9" onchange="SetVariableValue('9', this, 'DESCENDANT - DROPDOWN')" name="ctl00$ContentPlaceHolder1$drp85" tabindex="-1" aria-hidden="true">
<option value="-1">--Select--</option>
<option value="Please don't hesitate">Please don't hesitate </option>
<option value="Please reach out to us">Please reach out to us</option>
<option value="Remember we are here for you">Remember we are here for you</option>
<option value="If you need help">If you need help</option>
<option value="If you ever need additional help">If you ever need additional help</option>
</select>
Selenium WebDriver Code :
WebElement dropdown = driver.findElement(By.id("ctl00_ContentPlaceHolder1_drp85"));
selectbyindex=new Select(dropdown);
selectbyindex.selectByIndex(1);
Getting exception as :
Exception in thread "main" org.openqa.selenium.ElementNotVisibleException: element not visible: Element is not currently visible and may not be manipulated".
Can anyone help where I am making mistake?
Just wait for the drop-down to be visible first and then select:
new WebDriverWait(driver, TimeSpan.FromSeconds(45)).Until(ExpectedConditions.ElementIsVisible((By.Id("ctl00_ContentPlaceHolder1_drp85"))));

Selenium webdriver select option

I'm trying to select an option from a select drop-down using Selenium/java/MS Edge driver, but I'm finding I can't select the option even though I can see I have located it.
My code so far;
final static String URL = "http://usedcars.bmw.co.uk";
final static String edgeDriverBinary = "MicrosoftWebDriver.exe";
System.setProperty("webdriver.edge.driver", edgeDriverBinary);
WebDriver driver = new EdgeDriver();
driver.get(URL);
// Click the field to activate the drop down
By byQsRangeBtn = By.xpath("//div[#id='quick-search']/form/fieldset[#class='form']/div/div[#class='js-ctm-dropdownlist']/div[#class='js-ctm-display']/span");
WebElement qsRangeElement = driver.findElement(byQsRangeBtn);
qsRangeElement.click();
Sending this click does activate the drop-down and I can see it expands
Select qsRange = new Select(driver.findElement(By.id("qsRange")));
log("OPTIONS: " + qsRange.getOptions());
In the above I can dump .getOptions() and I see all the data from the select options.
When I call this I just get an exception with no stack trace or useful logging information. I've tried .selectByIndex() and .selectByVisibleText() with the same result - an exception and no information.
qsRange.selectByValue("3648835");
The part of the page is below. The id="qsRange" is set as not visible in the page (grey'd out in firebug). class="js-ctm-display" is the only div that is visible.
If I manually click the drop down to display it's values then <div class="js-ctm-dropdownlist"> becomes <div class="js-ctm-dropdownlist js-open">, but firebug still sees the select as not displayed.
<form class="quicksearch mp-search-count" method="post" action="/search-cars.aspx">
<fieldset class="form">
<div class="search-control series js-ctm js-ctm-mode-full" data-theme-type="dropdownlist">
<div class="js-ctm-dropdownlist">
<select id="qsRange" class="mp-control-data" name="Range">
<option value="-1">Series</option>
<option value="890">1 Series</option>
<option value="3648873">2 Series</option>
<option value="66">3 Series</option>
<option value="3648835">4 Series</option>
<option value="67">5 Series</option>
<option value="68">6 Series</option>
<option value="69">7 Series</option>
<option value="3648830">X</option>
<option value="3648831">Z</option>
<option value="3648832">M</option>
<option value="3648938">PHEV</option>
<option value="3648833">Hybrid</option>
<option value="3648834">BMW i</option>
<option value="3648879">Alpina</option>
</select>
<div class="js-ctm-display">
<span>Series</span>
<span class="js-ctm-ico"></span>
</div>
If I manually select a value from the drop-down then I see class="js-ctm-display" becomes as below and the page then makes an ajax call to obtain values for subsequent drop-downs.
<div class="js-ctm-display">
<span>4 Series</span>
<span class="js-ctm-ico"></span>
</div>
Because I can tell that the page is making multiple ajax calls as I move through the options I believe I need to simulate user interaction (clicks) rather than being able to just set values. However my attempts at clicking on an option in the list aren't working out at all.
I've also attempted to get a WebElement for one of the option values with the intention of sending it a click, but that throws an exception saying the WebElement is expected to be a Select rather than an Option.
Does anyone have a view on how to approach this kind of page? I'm rather new to Selenium so expect my approach isn't the best.

Is there any way to Locate the XPATH of the dropdown list Option using the name "test1","first_test","i2","i3" as mentioned in the code below

Is there any way to Locate the XPATH location of the dropdown list Option using the text "test1","first_test","i2","i3" as mentioned in the code below.
<select id="listid_select" class="select-box" style="width:100px;" name="list_id">
<option value="">NONE</option>
<option value="1">test1</option>
<option value="3">first_test</option>
<option value="6">i2</option>
<option value="7">i3</option>
<option value="8">i4</option>
<option value="9">i5</option>
<option value="10">i6</option>
<option value="11">i7</option>
<option value="12">i8</option>
<option value="13">i9</option>
<option value="14">Clone1</option>
i need to locate the option based on the "text name" instead of using "values", because there are values which goes on till 300 and more. It would be easy if i find out the option using the names.
Thanks in Advance :)
Selenium has Select functionality, which allows you to select by text or value. This is a c# example:
IWebElement element = driver.FindElement(By.XPath("//select[#id='listid_select']"));
SelectElement select = new SelectElement(element);
select.SelectByText("i2");
Richard's answer is the most correct, but if you want to do it just using XPath, you can. Note that this is one area where webdriver does not mimic user behaviour completely, you do NOT have to click on the select element and then the option element, just clicking on the option element will suffice.
Also a C# example:
IWebElement element = driver.FindElement(By.XPath("//select[#id='listid_select']/option[text()='i2']"));
element.Click();
You may be able to do it like this, using Java :
import org.openqa.selenium.support.ui.Select;
....
public void selectByString( String str ) {
try {
Select( driver.findElement( By.id("listid_select") )
.selectByVisibleText( str );
return true;
} catch ( Exception e ) {
return false;
}
}
...
boolean selected = selectByString( "test1");

How to select a combobox in geb with groovy

This is what I have currently with Geb. I want to be able to retrieve and set the value of a combobox (or drop down) in a page. I'm not quite sure how to do it, and the Book of Geb does not seem to cover this. This is the HTML element that I'm trying to work with.
<select style="height: 22px; width: 370px;" id="ddlContactTypes" name="ddlContactTypes">
<option value="-1">--Please Select--</option>
<option value="18">Customer Hauler</option>
<option value="19">Customer General</option>
<option value="20">Rolloff</option>
<option value="21">Supplier</option>
<option value="22">Leads</option>
<option value="23">Competition</option>
<option value="24">Employees</option>
<option value="25">Customer Car</option>
<option value="26">Secondary Metals Recycler</option>
<option value="27">Mills</option>
<option value="28">Brokerage Customers</option>
<option value="29">Type Jon</option>
</select>
This is what I've go so far. This currently will click the element, but I don't know how to actually select one. Any ideas?
static content = {
title {$("title")}
contactType { $("#ddlContactTypes") }
}
def addUser(){
contactType.click()
}
You can select an option by setting the value of the geb object :
contactType.value('20')
Above example will set the value to '20', making the list show 'Rolloff' as selected.
U can see this
HTML
Alt folk
Chiptunes
Electroclash
G-Funk
Hair metal
GOOVY
$("form").artist = "1" // first option selected by its value attribute
$("form").artist = 2 // second option selected by its value attribute
$("form").artist = "Ima Robot" // first option selected by its text
http://www.gebish.org/manual/0.9.2/navigator.html
Manual descibes it in section Setting Values

Set the value of a drop down box on load

If you look at the source code for the html you can see the combobox has an id. However when i run a loop through all hte elements on the page in vb.net it comes up as a blank instead of the id thats clearly defined. I'm thinking it has something to do with the javascript giving it a dynamic id. Anyway. I need to set this box after the page has loaded in a webbrowser object. Please help. Its driving me crazy!
<input type="hidden" name="wlw-select_key:{actionForm.dobMonth}OldValue" value="true">"
<select name="wlw-select_key:{actionForm.dobMonth}" id="dobMonth" class="dobMonth"><option" value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option></select>
<script language="JavaScript" type="text/JavaScript">
<!--
netui_tagIdNameMap.dobMonth="wlw-select_key:{actionForm.dobMonth}"
-->
</script>
*My Source Code Attemps ***
WebBrowser1.Document.GetElementById("dobMonth").SetAttribute("selectedtext", "March") - dosent work
Dim el As HtmlElement = WebBrowser1.Document.All("wlw-select_key:{actionForm.dobMonth}")
Dim elCol As HtmlElementCollection = el.GetElementsByTagName("option")
Dim X As Integer = 0
For Each op As HtmlElement In elCol
If op.InnerText = "March?" Then
el.SetAttribute("selectedIndex", X.ToString())
Exit For
End If
X += 1
Next
that didnt work either
So i'm really out of options. Any ideas. I did some research on the javascript reference but didnt turn out much useful. Thanks in advance!
as I remember, the name and id attributes are limited in the characters they can contain. curly-braces are probably not allowed. not sure if that's your problem or not, but it's the first thing that popped into mind... I'll look into it some more.
[much later...]
OK, this works, but I hacked out a bunch of stuff, and it may not be quite what you're looking for:
<select name="dobMonth" id="dobMonth" class="dobMonth"><option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<script type="text/javascript">
document.getElementById("dobMonth").selectedIndex = 3;
</script>
You had a stray double-quote in your first option tag, which may have been part of the problem. But fixing that didn't allow the vbscript to work in my browser. I haven't done VBscript since the mid-90s so I switched to javascript. In any case it ought to give you a basis for further development, I hope!
[later]
This code will set the option by text string. I tested under Firefox, it ought to work in IE also:
<script type="text/javascript">
function setSelected(month) {
var select = document.getElementById("dobMonth");
var options = select.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
if (options[i].childNodes[0].nodeValue == month) {
select.selectedIndex = i;
break;
}
}
}
setSelected("March");
</script>