CODEWITHSUNDEEP
seleniumselectselenium-webdriver
user9134826
user9134826

Reputation:

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

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);
        }
    }
}

Webelement details

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

Please help to suggest for this.

Upvotes: 2

Views: 1720

Answers (1)

yong
yong

Reputation: 13722

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:

enter image description here

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']"));

Upvotes: 2

Related Questions