We Keep Coding

Selenium : How to select options from a dropdown if the select tag containsstyle="display: none;"

I have to perform a select action i.e select a value from a dropdown. Here is the code of my iframe:
<div class="js-stools-field-filter">
<select id="filter_active" name="filter[active]" onchange="this.form.submit();" style="display: none;">
<option value="" selected="selected">- Select Active State -</option>
<option value="0">Activated</option>
<option value="1">Unactivated</option>
</select>
<div class="chzn-container chzn-container-single chzn-container-single-nosearch chzn-container-active chzn-with-drop" style="width: 220px;" title="" id="filter_active_chzn"><a class="chzn-single"><span>- Select Active State -</span><div><b></b></div></a>
<div class="chzn-drop">
<div class="chzn-search">
<input type="text" autocomplete="off" readonly="" class="active">
</div>
<ul class="chzn-results">
<li class="active-result result-selected" data-option-array-index="0" style="">- Select Active State -</li>
<li class="active-result" data-option-array-index="1" style="">Activated</li>
<li class="active-result" data-option-array-index="2" style="">Unactivated</li>
</ul>
</div>
</div>
</div>
I need to select the options form the dropdown. Here is my script:
Select sc = new Select(driver.findElement(By.id("filter_active")));
sc.selectByVisibleText("Activated");
But,I'm getting this error in the console:
Element is not currently visible and may not be manipulated
Can someone please let me know how to fix this.

From the HTML you posted, the SELECT is hidden because it contains style="display: none;". It looks like the <ul class="chzn-results"> and children LIs are the visible "dropdown" while the hidden SELECT holds the values after selection.
In cases like this, you can't use the Select() class. You will need to click the visible dropdown element (can't tell what that is... maybe the INPUT?) and then click the desired LI using normal Selenium methods.
Something like this should work...
driver.findElement(By.cssSelector("div.chzn-search > input")).click();
driver.findElement(By.xpath("//ul[#class='chzn-results']/li[.='Activated']")).click();

To click() on the option with text as Activated as the <select> tag is having the attribute style="display: none;" you need to use the make the selection from the <li> tags and you can use either of the following Locator Strategies:
cssSelector:
driver.findElement(By.cssSelector("div.chzn-drop ul.chzn-results li.result-selected")).click();
driver.findElement(By.cssSelector("div.chzn-drop ul.chzn-results li.active-result[data-option-array-index='1']")).click();
xpath:
driver.findElement(By.xpath("//div[#class='chzn-drop']//ul[#class='chzn-results']//li[contains(#class, 'result-selected')]")).click();
driver.findElement(By.xpath("//div[#class='chzn-drop']//ul[#class='chzn-results']//li[contains(#class, 'active-result') and #data-option-array-index='1']")).click();

List WebElement always selecting first element from the drop-down but i want to select 4th element

My list has approximate 190 items and items also getting traced one by one in for loop. I applied the condition to a specific text. however, debugger entering into condition but selecting always the first element from the drop-down. In mentioned code country "America" present on the 4th index of my drop-down.
List<WebElement> options=driver.findElements(By.xpath("//*[#id='Countryitems_popup']/div[1]/ul//li/span"));
for(int i=0;i<options.size();i++)
{
WebElement select=options.get(i);
String innerhtml=select.getAttribute("innerHTML");
if(innerhtml.contentEquals("America"))
{
select.click();
break;
}
}
HTML is mentioned below:
<div id="Countryitems_popup" class="e-scroll e-js e-wid" tabindex="" style="height: auto; display: block;">
<div class="h-con" style="height: 150px; width: 158.891px;">
<ul class="H-Kl" role="listbox">
<li data-value="001" id="004" role="option" unselectable="on" class="">
<span class=" e-ddltxt">Country 1</span>
</li>
<li data-value="676" id="006" role="option" unselectable="on" class="">
<span class=" e-ddltxt">Country 2</span>
</li>
<li data-value="765" id="009" role="option" unselectable="on" class="">
<span class=" e-ddltxt">Country 3</span>
</li>
<li data-value="0067" id="065" role="option" unselectable="on" class="">
<span class=" e-ddltxt">America</span>
</li>
</ul>
</div>
</div>

Use for each loop for more readability. Try with this code :
List<WebElement> options= driver.findElements(By.xpath("//[#id='Countryitems_popup']/div[1]/ul//li/span"));
for(WebElement option : options) {
if(option.getText().trim().equals("America")) {
option.click();
break;
}
}
This should work, provided the xpath should be correct.

Without seeing the page to test it, it's hard to know exactly what the issue is but if it's like other pages I've seen you will need to:
Click the "dropdown" to open it (and make the options visible)
Wait for the desired option to be clickable (indicating the list is open and visible)
Click the desired option
My recommendation is to put this all in a method called selectCountry() (or something similar) and pass in the desired country name.
public void selectCountry(String countryName)
{
// I'm assuming this is the container for the dropdown. Clicking it should open the dropdown
driver.findElement(By.id("Countryitems_popup")).click();
new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[#id='Countryitems_popup']//span[.='" + countryName + "']))).click();
}

You can achieve it with selector itself without loop. The xpath to find the list element with text 'America' will be as,
driver.findElement(By.xpath("//[#id='Countryitems_popup']/div[1]/ul//li[conatins(text(), 'America')]")).click()

How to select from the drop down using Selenium

Please see the code below where I need to click on dropdown so that list is displayed
<span class="k-widget k-dropdown k-header" style="" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="" aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-dropdown-wrap k-state-default k-state-hover k-state-focused" unselectable="on">
<span class="k-input" unselectable="on">Is equal to</span>
<span class="k-select" unselectable="on">
<span class="k-icon k-i-arrow-s" unselectable="on">select</span>
</span>
</span>

driver.FindElement(By.CssSelector(".k-widget k-dropdown k-header")).click()

I think you again have to try by clicking using JavascriptExecutor
WebElement element1 = driver.findElement(By.xpath("//span[#class='k-widget k-dropdown k-header' and #role='listbox']"));
JavascriptExecutor executor1 = (JavascriptExecutor) oBrowser;
executor1.executeScript("arguments[0].click();", element1);
If above Xpath didn't work then try below:-
//span[#class='k-widget k-dropdown k-header']
Hope it will help you :)

I ran across this exact issue the other day. The problem is the Kendo UI <span> element you are referencing uses a <ul> element to get it's innertext but it's the <ul> list that handles the option change/selection. You won't be able to select an option from the pop-up/dropdown you see when clicking the <span>, you have to click the <li> element that holds the text options referenced by the span.
In your example, somewhere else in the HTML document you'll find a <ul> list similar to...
<ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" aria-live="off" data-role="staticlist" role="listbox">
<li tabindex="-1" role="option" unselectable="on" class="k-item k-state-selected k-state-focused" data-offset-index="0">is equal to</li>
<li tabindex="-1" role="option" unselectable="on" class="k-item" data-offset-index="1">another option</li>
</ul>
Using Selenium 3, if you wanted to select "another option":
driver.findElement(By.xpath("//li[text()='another option']")).click();
You should see your <span> innertext change to 'another option' and you can continue on your testing journey.

How to print the all li items text of dropdown using Selenium WebDriver?

How I print the all li items text using selenium webdriver.
Here I want to some type of single line code that print all li items text like
Jackets,
protective etc. May by using for loop
<div class="dropdown change_right">
<ul>
<li>
<a class="" title="Jackets" href="/collections/jackets">Jackets</a>
</li>
<li>
<a title="Jackets protective" href="/collections/jackets/jackets-protective" class="sub-link"> protective</a>
</li>
<li>
<a title="casual leather" href="/collections/jackets/casual-leather" class="sub-link">casual leather</a>
</li>
<li>
<a class="" title="T-shirts & shirts " href="/collections/t-shirts-shirts">T-shirts & shirts </a>
</li>
<li>
<a title="shirts" href="/collections/t-shirts-shirts/shirts" class="sub-link">shirts</a>
</li>
<li>
<a title="crew-neck" href="/collections/t-shirts-shirts/crew-neck" class="sub-link">crew-neck</a>
</li>
<li>
<a title="polo tshirts" href="/collections/t-shirts-shirts/polo-tshirts" class="sub-link">polo tshirts</a>
</li>
<li>
<a class="" title="Trousers" href="/collections/trousers">Trousers</a>
</li>
<li>
<a title="Trousers Protective" href="/collections/trousers/trousers-protective" class="sub-link"> Protective</a>
</li>
</ul>

Can be done with a simple findElements(). With the help of xpath to grab the collection of elements and a simple iterate through the collection and print the value with the help of getText()which returns the string value of the element.
List<WebElement> allText = driver.findElements(By.xpath("//*[contains(#class,'dropdown')]//a"));
for ( WebElement element: allText) {
System.out.println(element.getText());
}
Note: untested code. You may need to make sure click and open the list happens before executing this code and some wait might also be necessary as well

How to extract values from a hidden table using xpath in selenium webdriver (java)

I want to extract the values from the "From" drop down of http://www.makemytrip.com/flights/ and then compare it with a particular search string to find if the string exist in the values from the drop down. But I am unable to extract the values as these fields are hidden. It is an autocomplete dropdown.
The html part of the drop down
<div class="container">
<div class="search_selector" style="display: none;">
<div class="col-xs-12">
<div class="city_sel_top">
<div class="top_cities_scroll" style="margin-top: -5px;">
<ul id="near_button" class="top_cities_list" style="width: 98%;">
<ul class="from_city_list top_cities_list" style="width: 98%; display: none;">
<li class="top_cities_heading text-right">Top Domestic Cities</li>
<li id="DEL|Y|New Delhi|India">
<a class="from_city_value1" href="javascript:void(0);">New Delhi, India (DEL)</a>
</li>
<li id="DEL|Y|New Delhi|India">
<a class="from_city_value1" href="javascript:void(0);">New Delhi, India (DEL)</a>
</li>
<li id="BOM|Y|Mumbai|India">
<a class="from_city_value2" href="javascript:void(0);">Mumbai, India (BOM)</a>
</li>
<li id="BLR|Y|Bangalore|India">
<a class="from_city_value3" href="javascript:void(0);">Bangalore, India (BLR)</a>
</li
>
......
I tried :
WebDriver driver;
List<WebElement> li = driver.findElements( By.xpath("//div/div[2]/ul[2]/li/a"));
This gives me a no such element exception as the first li element under ul[2] does not have a 'a' element under it. I want to get the 'a' element starting from the second li element.

Your XPath is too strict! Use By.tagName("a").

If you only want 'a' of the first item, then I think SiKing's solution is the best. But it you have to use xpath, then I think it should be the following:
//div/div/div/div[2]/ul[2]/li[2]/a