1

<div class="Select form-control undefined Select--single is-searchable has-value"><input name="deal.listdealasset[0].acacode" type="hidden" value="NEWCAR"><div class="Select-control"><span class="Select-multi-value-wrapper" id="react-select-3--value"><div class="Select-value"><span class="Select-value-label" id="react-select-3--value-item" role="option" aria-selected="true">New</span></div><div class="Select-input" style="display: inline-block;"><style>input#undefined::-ms-clear {display: none;}</style><input role="combobox" aria-expanded="false" aria-haspopup="false" aria-activedescendant="react-select-3--value" aria-owns="" style="width: 19px; box-sizing: content-box;" value="" data-rxName="deal.listdealasset[0].acacode"><div style="left: 0px; top: 0px; height: 0px; text-transform: none; letter-spacing: normal; overflow: scroll; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-weight: 400; white-space: pre; visibility: hidden; position: absolute;"></div></div></span><span class="Select-arrow-zone"><span class="Select-arrow"></span></span></div></div>

I'm trying to select a value from a drop-down but its html tag is not select. I have tried various options but none work.

WebElement optionsList = driver.findElement(By.xpath("//span[contains(@class, 'Select-multi-value-wrapper')]"));
List<WebElement> options = optionsList.findElements(By.xpath("//span[contains(@class, 'Select-value-label')]"));
options.get(0).click();

I want to select the value new from drop down.[enter image description here]

I'm getting below error on execution - Element could not be scrolled into view

Below is the HTML code for the page-

<div class="Select form-control undefined Select--single is-searchable has-value">
   <input name="deal.listdealasset[0].acacode" type="hidden" value="NEWCAR">
   <div class="Select-control">
      <span class="Select-multi-value-wrapper" id="react-select-3--value">
         <div class="Select-value"><span class="Select-value-label" id="react-select-3--value-item" role="option" aria-selected="true">New</span></div>
         <div class="Select-input" style="display: inline-block;">
            <style>input#undefined::-ms-clear {display: none;}</style>
            <input role="combobox" aria-expanded="false" aria-haspopup="false" aria-activedescendant="react-select-3--value" aria-owns="" style="width: 19px; box-sizing: content-box;" value="" data-rxName="deal.listdealasset[0].acacode">
            <div style="left: 0px; top: 0px; height: 0px; text-transform: none; letter-spacing: normal; overflow: scroll; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-weight: 400; white-space: pre; visibility: hidden; position: absolute;"></div>
         </div>
      </span>
      <span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
   </div>
</div>
Mehravish Temkar
  • 4,275
  • 3
  • 25
  • 44
user11491018
  • 11
  • 3

4 Answers4

0

Since your drop down is made of Div and span tags, Select class will not work from selenium.

Code you can try : 

List<WebElement> options = driver.findElements(by.xpath(" your locator"));
for(WebElement element : options){
 if(element.getText().equals(" your value from drop down")){
    element.click();
}
}

Let me know, if you have any more concerns.

cruisepandey
  • 28,520
  • 6
  • 20
  • 38
  • WebElement optionsList = driver.findElement(By.xpath("//span[contains(@class, 'Select-multi-value-wrapper')]")); List options = optionsList.findElements(By.xpath("//span[contains(@class, 'Select-value-label')]")); options.get(0).click(); – user11491018 May 13 '19 at 06:35
  • I have tried with xpath as well but the value is still not selected – user11491018 May 13 '19 at 06:36
  • shared the html tag kindly let me know a solution for same...there are 2 values in drop down - New and Used – user11491018 May 13 '19 at 06:47
  • WebElement optionsList = driver.findElement(By.xpath("//span[contains(@class, 'Select-multi-value-wrapper')]")); List options = optionsList.findElements(By.xpath("//span[contains(@class, 'Select-value-label')]")); for(WebElement option : options) { if (option.getText().equals("New")) { option.click(); } } ...on executing above no error is displayed nor the value is getting selected – user11491018 May 13 '19 at 06:54
  • First you have to write the code to click on drop down, then only you can use my solution. – cruisepandey May 13 '19 at 07:31
  • First write this : `driver.findElement(By.id("react-select-3--value")).click();` – cruisepandey May 13 '19 at 07:31
  • then write xpath that selects both the values from drop down. Please share your XPATH for the options. – cruisepandey May 13 '19 at 07:32
0

Since You are getting error of element can not be scrolled into view. You should try JavascriptExecutor for scrolling.

  1. This way will allow you to scroll horizontally/vertically page ((JavaScriptExecutor)driver).executeScript("scroll(0,200)") - only scroll vertically by 200 pixels

2 . For bringing element into Focus 

((JavaScriptExecutor)driver).executeScript("arguments[0].scrollIntoView(true);", element);
cruisepandey
  • 28,520
  • 6
  • 20
  • 38
Nitin Sahu
  • 611
  • 6
  • 12
  • tried javascript - //JavascriptExecutor je = (JavascriptExecutor) driver; //WebElement element = driver.findElement(By.xpath("//span[contains(@class,'Select-value-label')]")); //je.executeScript("arguments[0].scrollIntoView(true);",element);....but getting same cannot be scrolle dinto view error – user11491018 May 13 '19 at 06:40
0

Since option 'new' had id attribute defined, clicking object is straight forward by using id. Below code should work, provided that dropdown button is already clicked.

driver.findElement(By.id("react-select-3--value")).click();
driver.findElement(By.id("react-select-3--value-item")).click();
shyam kunda
  • 1
  • 3
  • This only clicks on the drop down , does not select the "New" value from list – user11491018 May 13 '19 at 07:23
  • Edit : I added code to click on new value in the list. Please try and let know. – shyam kunda May 13 '19 at 08:08
  • I gives following error -Unable to locate element: #react\-select\-3\-\-value\-item – user11491018 May 13 '19 at 10:53
  • After lots of attempts - following code will type New in the drop down field - driver.findElement(By.xpath("/html/body/section/div/div[2]/section/div/from/div/div[3]/div[1]/div/div/div[2]/div/div/div/div/div/span[1]/div[2]/input")).sendKeys("New"); – user11491018 May 13 '19 at 10:54
  • But still this is not allowing to use enter key as if we follow manual steps it normally would select "New"-driver.findElement(By.xpath("//span[(@id='react-select-10--value')]")).sendKeys(Keys.ENTER); – user11491018 May 13 '19 at 10:55
0

Thanks for the response . It worked with below query i.e by merging send keys and keys.enter-

driver.findElement(By.id("react-select-3--value")).click();
driver.findElement(By.xpath("/html/body/section/div/div[2]/section/div/from/div/div[3]/div[1]/div/div/div[2]/div/div/div/div/div/span[1]/div[2]/input")).sendKeys("New",Keys.ENTER);
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
user11491018
  • 11
  • 3