0

I am getting this error message when trying to select a drop-down value:

    UnexpectedTagNameException with message 'Element should have been "select" but was "input" error'

The Error is descriptive in saying that the element is an "Input" element instead of a "Select" element, but the field is actually a multi select drop-down which the user can typeinto or select.

I am using the following command:

    Select state = new Select(driver.findElement(By.id("stateCode")));
    state.selectByIndex(6);

This is the HTML:

    <div class="react-select__input" style="display: inline-block;">
     <input autocapitalize="none" autocomplete="off" autocorrect="off" id="stateCode" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">
      <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 16px; font-family: &quot;Open Sans&quot;, sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;">
     </div>
  </div>

Is there another way to select the value from the drop-down?

3 Answers 3

2

As per the html code attached you are accessing an <input> tag with type='text' (which means a text box).

We can use Select only on <select> tag like below:

<select id='mySelect'>
 <option value="1">1</option> 
</select>

Select select = new Select(driver.findElement(By.id("mySelect")));
2
  • As per the html code attached how do you know html code? OP didn't post one.
    – Alexey R.
    Oct 17, 2018 at 10:31
  • 2
    OP actually posted the html code but it was formatted incorrectly. Now with latest changes it is visible correctly.
    – the_coder
    Oct 23, 2018 at 12:36
0

This exception occurs because the drop which you are accessing using select class is wrong. Use element.click();

Then use element sendkeys("your data here");.

0

You can follow any of the below 2 approaches:

Approach 1: (I believe this will be the best approach to follow)

Click on the Input element which will pop your multi-select dropdown : driver.findElement(By.xpath("//input[@id='stateCode']")).click();

Find the desired value by using desired locator: Ex: driver.findElement(By.xpath(…)),

Approach 2:

Type your desired value in the Input element   :  driver.findElement(By.xpath("//input[@id='stateCode']")).sendKeys("DesiredCheckBoxOption");

Click on the very first occurrence for checkbox by using desired locator (Ex: driver.findElement(By.xpath(…)))

Clear the input box: 

driver.findElement(By.xpath("//input[@id='stateCode']")).clear(); 

Repeat  steps 1,2,3 for multiple selections (you can use a loop)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.