<Select> Tag is not working for selecting value in dropdown

Question

I am facing an issue where dropdown has tag. but still I am unable to select value in dropdown and it is throwing exception. I am able to get dropdown values but unable to select

Here is complete details

URL : https://semantic-ui.com/modules/dropdown.html

Testcase: Select multiple values in Skill dropdown.( Find attachment for exact field on web page.

WebDriver driver = new FirefoxDriver();
driver.get("https://semantic-ui.com/modules/dropdown.html");
driver.manage().timeouts().implicitlyWait(10L, TimeUnit.SECONDS);

WebElement Dropdown = driver.findElement(By.name("skills"));
Select sel = new Select(driver.findElement(By.name("skills")));
List<WebElement> Options = sel.getOptions();

System.out.println(Options.size());

for(int i=0;i<Options.size()-1;i++) {
    driver.findElement(By.xpath("//*[@id=\"example\"]/div[4]/div[1]/div[2]/div[4]/div[1]/div[8]/div")).click();
    System.out.println(Options.get(i).getAttribute("value"));
    if(Options.get(i).getAttribute("value").equalsIgnoreCase("angular")||Options.get(i).getAttribute("value").equalsIgnoreCase("Graphic Design")||Options.get(i).getAttribute("value").equalsIgnoreCase("HTML")) {
        Thread.sleep(6000);
        sel.selectByIndex(i);
        }
    }
}

Exception : Exception in thread "main" org.openqa.selenium.ElementNotInteractableException:

Please help to suggest for this.

Answer 1

Your drop down is a simulated drop down by css, not a HTML native drop down: Select . So you can not operate it as native drop down.

After look into the HTML code of your dropdown, there is an embed native drop down, but it's always invisible no matter you expand options or not. Selenium can't operate on invisible element(But you can read value/attribute from it), that's why the exception you met.

Actually all options come from the div class="menu" , so you should click the option from div class="menu" as below screenshot show:

Code to resolve your problem:

// click arrow down to expand options
driver.findElement(By.cssSelector("select[name='skills'] + i")).click();
// choose option: Angular
driver.findElement(By.xpath("//div[contains(@class, 'multiple')][select[@name='skills']]//div[.='Angular']"));