Selenium Access options for input drop-down list

Question

I have an input control that acts as a read-only drop-down list (Svelte is framework behind it). How do I get a list of the drop-down options using Selenium and Java please? I have tried the select option:

Select allOptions = new Select(webDriver.getWebDriver().findElement(By.xpath(xpath)));

I got exceptions saying that you cannot select on an input. Because the control is read-only you can't type into it to enter values.

<input readonly="true" autocapitalize="none" autocomplete="off" autocorrect="off" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" id="select-instances" placeholder="Select an instance" class="svelte-abcd" style="">

I have researched answers here, for example this one. You don't get list tags from Svelte. Any suggestions or help would be greatly appreciated.

What do you mean by *You don't get list tags from Svelte*? the drop down options are not in the DOM as children of the `` tag? — Guy, Jun 21 '22 at 12:56
@Guy We are using Svelte which means it's an input (see the question for HTML element) and not a typical select — Swatcat, Jun 21 '22 at 14:37
This is not what I asked, you should see the list of the options to choose in the html. By the way using svelte doesn't mean you can't create ` — Guy, Jun 21 '22 at 15:53
@GemmaMorriss - Is it possible to try following solution, look towards this approach 1. Instead of directly using Select, first we can click on the xpath `webDriver.getWebDriver().findElement(By.xpath(xpath)).click();` and then find options generated or enter text using `sendKeys` so that autogenerated options are visible. 2. Using `JavaScriptExecutor` we can first edit attribute `readonly="true" ` to `readonly="false"` in DOM and then try to find options, if these works — Amit Jain, Jun 21 '22 at 17:55
What are the option under this dropdown? Can you post that html as well? Also can you give us example of this case in some other public sites? — Dev, Jun 22 '22 at 05:03
An input can't have children. You're not showing enough HTML for an answer. — pguardiario, Jun 27 '22 at 05:47

score 1 · Answer 1 · answered Jun 15 '22 at 06:59

Open DevTools -> Sources
Click on the input -> Press F8 to stop JS execution in the browser

Inspect dropdown option -> Write down the xpath

public List<string> GetOptionsText(IWebDriver driver)
{
    string parentInputXpath = "inputXpath";
    string optionXpath = "optionXpath";
    List<string> optionsText = new List<string>();

    driver.FindElement(By.XPath(parentInputXpath)).Click();
    options = driver.FindElement(By.XPath(parentInputXpath)).FindElements(By.XPath(optionXpath)).ToList();

    if (options.Count == 0)
        throw new NoSuchElementException("Dropdown options not found");

    foreach (var option in options)
    {
        optionsText.Add(option.Text);
    }
    return optionsText;
}

P.S: It would be also good to add implicit/explicit waits here.

Sorry, I don't understand, what browser was you using for that? — Swatcat, Jun 20 '22 at 09:42
This works for popular browsers like Chrome, Edge and Firefox — pwrngr, Jun 21 '22 at 14:19

score 1 · Accepted Answer · answered Jun 27 '22 at 05:16

I would try with sendKeys combination (you can experiment with ArrowDown, Tab, Enter) and then if it is not working for you - with JavaScript. You can set the text and then trigger onchange event if needed.

document.getElementById("select-instances").value = "My value";

or set the placeholder

document.getElementById("select-instances").setAttribute('placeholder','My value');

Reference:
What is JavaScriptExecutor in Selenium?

score 0 · Answer 3 · answered Jun 14 '22 at 09:27

0

If Possible can you share pic of html code of the dropdown element

Select allOptions = new 
Select(webDriver.getWebDriver().findElement(By.xpath(xpath)));
List<WebElement> elements = allOptions.getOptions();
List<String> options = new LinkedList<String();
for(WebElement el: elements)
{
    options.Add(el.getText());
}

answered Jun 14 '22 at 09:27

Ketan Pardeshi

516
1
5
8

You get the same issue with select exception: org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "input" – Swatcat Jun 14 '22 at 09:33
Can you share the html code of the select element – Ketan Pardeshi Jun 14 '22 at 09:37
Ketan, it's in the question – Swatcat Jun 14 '22 at 09:39
Here it is again: – Swatcat Jun 14 '22 at 09:39

score 0 · Answer 4 · answered Jun 20 '22 at 17:45

although I'm not a expert in selenium but just try to solve this problem. I create a index.html file to get the options from the dropdown menu. I only create a drop down menu in this index.html files its code is this:-

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div class="row">
            <span class="label">Select Text</span>
            <span class="box"><input readonly="true" autocapitalize="none" autocomplete="off" autocorrect="off" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" id="datatext" placeholder="Select an instance" class="datatext" >
                <select class="contentselect"
                    id="contentselect">
                    <option></option>
                    <option value="one">test1</option>
                    <option value="two">test2</option>
                    <option value="two">test3</option>
                    <option value="two">test4</option>
                    <option value="two">test5</option>
                    <option value="two">test6</option>
                </select></span>
        </div>
        <script>
            textfield = document.getElementById("datatext");
            contentselect = document.getElementById("contentselect");
    
            contentselect.onchange = function () {
                var text = contentselect.options[contentselect.selectedIndex].value
                if (text != "") {
                    textfield.value += text;
                }
            }
        </script>
    </body>
    
    </html>

Then I create a java file to read all the options from the index.html. Java code looks like:-

    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "D:\\Goal Projects\\Webnovel API\\chromedriver.exe");
    
        WebDriver driver = new ChromeDriver();
    
        driver.get("http://127.0.0.1:5500/index.html");
    
        Select allOptions = new Select(driver.findElement(By.xpath("//select[@id='contentselect']")));
        List<WebElement> elements = allOptions.getOptions();
        List<String> options = new ArrayList<String>();
        for (WebElement element : elements) {
          options.add(element.getText());
        }
    
        for (String s : options) System.out.println(s);
      }

Result Output is like this:-

I think you are using wrong xpath you are using input xpath but you should use selection path. I hope this will help you, Thanks for reading.

Hi, the answer would normally be good, but, the drop-down is via an input and not a select and I can't change this piece of functionality. — Swatcat, Jun 21 '22 at 08:32

Selenium Access options for input drop-down list

4 Answers4