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: "Open Sans", 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
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")));
-
As per the html code attached how do you know html code? OP didn't post one.Alexey R.– Alexey R.2018年10月17日 10:31:01 +00:00Commented Oct 17, 2018 at 10:31
-
2OP actually posted the html code but it was formatted incorrectly. Now with latest changes it is visible correctly.the_coder– the_coder2018年10月23日 12:36:31 +00:00Commented Oct 23, 2018 at 12:36
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");.
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)