Unable to select a dropdown which is hidden

Question

I'm trying to select a values from dropdown in Selenium Webdriver. But every time I end up with an error in console

This is my site URL and below is the snap of element :

I've tried with the below code but its not working

Select dropdown= new Select(driver.findElement(By.xpath("//div[@on-dimension-select = 'selectQuantityDimension']/*[@role='combobox']")));
dropdown.selectByValue("4");

Getting the below exception : -

Exception in thread "main" org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "span" Build info: version: 'unknown', revision: '1969d75', time: '2016-10-18 09:43:45 -0700'

Also tried this way too :

driver.findElement(By.xpath("//div[@on-dimension-select = 'selectQuantityDimension']/*[@role='combobox']")).click();
Select dropdown= new Select(driver.findElement(By.xpath("//div[@on-dimension-select = 'selectQuantityDimension']/select/")));
dropdown.selectByValue("4");

And this time error is :

Exception in thread "main" org.openqa.selenium.InvalidSelectorException: invalid selector: Unable to locate an element with the xpath expression //div[@on-dimension-select = 'selectQuantityDimension']/select/ because of the following error: SyntaxError: Failed to execute 'evaluate' on 'Document': The string '//div[@on-dimension-select = 'selectQuantityDimension']/select/' is not a valid XPath expression.

This is the HTML code for the same :

 <div class="ng-isolate-scope ng-pristine ng-valid" ng-show="!docked" ng-model="variantOptionsModel" on-dimension-select="selectQuantityDimension" docked="docked">
  <label>Quantity:</label>
    <select class="accessory-option ng-pristine ng-valid" ng-model="model.selectedQuantity" ng-options="quantity for quantity in model.quantityDropDownValues track by quantity" ng-change="quantityClick()" data-qa-quantity-value="" style="display: none;">
     <option value="1" selected="selected" label="1">1</option>
     <option value="2" label="2">2</option>
     <option value="3" label="3">3</option>
     <option value="4" label="4">4</option>
     <option value="5" label="5">5</option>
     <option value="6" label="6">6</option>
   </select>
<span id="" class="selectboxit-container selectboxit-container" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="">
<span id="" class="selectboxit accessory-option ng-pristine ng-valid selectboxit-enabled selectboxit-btn" name="" tabindex="0" unselectable="on" data-qa-quantity-value="">
<ul class="selectboxit-options selectboxit-list" tabindex="-1" role="listbox" aria-hidden="true" style="max-height: 217px; top: -217px; display: none;">
</span>
</div>

I'm not sure what I'm doing wrong.

Answer 1

Here is the Answer to your Question:

Here is the working code block which navigates to "https://www.o2.co.uk/shop/smartwatches/samsung/gear-s2/#contractType=nonconnected", counts the number of entries in the Quantity DropDown, prints the output to the console and finally selects Quantity as 4 & prints to the console:

package demo;

import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Q44559302_dropdown_select {

    public static void main(String[] args) {


        String innerhtml = null;
        System.setProperty("webdriver.gecko.driver", "C:\\your_directory\\geckodriver.exe");
        WebDriver driver =  new FirefoxDriver();
        driver.manage().window().maximize();
        driver.get("https://www.o2.co.uk/shop/smartwatches/samsung/gear-s2/#contractType=nonconnected");
        driver.findElement(By.xpath("//form[@id='chooseTariffForm']//div[@class='quantiy-picker-wrapper']/div/span")).click();
        List<WebElement> element_list = driver.findElements(By.xpath("//form[@id='chooseTariffForm']//div[@class='quantiy-picker-wrapper']/div/span/ul/li/a"));
        System.out.println("Number of Elements : "+element_list.size());
        for (int i=0; i<element_list.size(); i++)
        {
            WebElement my_element = element_list.get(i);
            innerhtml = my_element.getText();

            if(innerhtml.contentEquals("4"))
            {
                my_element.click();
                break;
            }


        }
        System.out.println("Value selected from Dropdown is : "+innerhtml);

    }

}

Let me know if this Answers your Question.

Answer 2

The drop down is Angular and the DOM you have pasted has Select Tag pointing to somewhere else in the webpage.

1. Click on the quantity drop down:

   driver.findElement(by.xpath("//div[@class='quantiy-picker-wrapper']//span[@class='selectboxit-container selectboxit-container']")).click();
   

Now the option from the drop down will be visible to the user.

2. Select a value from the dropdown:

   //am selecting quantity 4
   driver.findElement(by.xpath("//div[@class='quantiy-picker-wrapper']//span[@class='selectboxit-container selectboxit-container']//li[4]")).click();
   

Hope this helps you. Thanks.

Answer 3

You cannot use select class because the page select box doesn't have select tag.

To select the option, first click on the select box and then click on list option which ever you want.

Following code will click on first option

        //click on dropdown
        driver.findElement(By.xpath("//div[@on-dimension-select = 'selectQuantityDimension']/*[@role='combobox']")).click();

        //click on first option 1
        driver.findElement(By.xpath("//div[@on-dimension-select = 'selectQuantityDimension']/*[@role='combobox']/ul/li[@data-val=1]/a")).click();