0

I'm trying to select an option from datalist using selenium. First, send the option name from keys, and after send an arrow down to select it. Everything goes well until send ENTER key, it does not take any action. I must press down and enter keys to make the submit button clickable and can't modify the HTML code

I have tried

  • Send the whole name to the input
  • Send DOWN and ENTER keys together
  • Send RETURN Key

This is the datalist HTML code

...
<input _ngcontent-njw-c0="" list="salesmans" placeholder="Selecciona Cliente o Vendedor" style="width: 100%;border: none;">
<datalist _ngcontent-njw-c0="" id="salesmans">
<option _ngcontent-njw-c0="" value="Vendedor Venta" ng-reflect-value="Vendedor Venta"></option>
<option _ngcontent-njw-c0="" value="juan peña hjvgvghghc" ng-reflect-value="juan peña hjvgvghghc"></option>
...

My python code

...
user_selector = WebDriverWait(self.loader.chrome_driver, con.TIME_LIMIT).until(
                ec.presence_of_element_located((By.XPATH, '//input[@placeholder="Selecciona Cliente o Vendedor"]')))

user_selector.send_keys(user_auth_data[2])
user_selector.send_keys(Keys.ARROW_DOWN)
...

Element image:

The code just work until send down key

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
EDGAR MEDINA
  • 111
  • 1
  • 9

2 Answers2

1

To select the option from datalist with text as Vendedor Venta using Selenium instead of sending DOWN and ENTER keys together as the desired element is an Angular element, to click on the element you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

  • Using CSS_SELECTOR:

    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input[placeholder="Selecciona Cliente o Vendedor"]"))).send_keys(user_auth_data[2])
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "option[value='Vendedor Venta'][ng-reflect-value='Vendedor Venta']"))).click()

  • Using XPATH:

    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@placeholder="Selecciona Cliente o Vendedor"]"))).send_keys(user_auth_data[2])
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//option[@value='Vendedor Venta' and @ng-reflect-value='Vendedor Venta']"))).click()

  • Note: You have to add the following imports :

    from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
  • I tried to implement that solution however I got the error message: javascript error: option element is not in a select. Why is it happening? – EDGAR MEDINA Feb 16 '21 at 19:24
0

You can try below options.

  1. Try sending the whole name to the input and try first manually pressing the 'ENTER' or 'TAB' button. ( if any of this works and then you can send that key in your code after entering the whole name)

  2. Try sending the whole name to the input and then find the XPath of the option that you want to select. Also please note that the XPath of an option (that you want to select) can be different than the original once, once you send the whole name. so plz consider that.

I was facing a similar issue and the second option worked for me, however, I did it in C# and not in Python.

Thanks,

John

John
  • 11
  • 3