Element not clickable, ElementClickInterceptedException in Selenium

Question

A similar question has been asked many times, and I have gone over many of them, such as Debugging "Element is not clickable at point" error , Selenium Webdriver - element not clickable error in firefox, ElementClickInterceptedException: Message: element click intercepted:

but haven't been able to solve my problem.

I want to select a subset of car brands from the websites search dropdown menu. Usually I would do it via Selenium's Select, but that doesn't do the trick here.

Here's my code.

from selenium import webdriver
from selenium.webdriver.chrome.service import Service as ChromeService
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.proxy import Proxy, ProxyType
from selenium.webdriver.common.by import By
import time
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.action_chains import ActionChains

ser = Service(executable_path= r'D:\chromedriver.exe')

#Note I have omitted the options that I use (proxy and header).
driver = webdriver.Chrome(service = ser)
driver.get("https://www.autotalli.com/")
time.sleep(5)

# Accepting cookies
driver.find_element(by = By.XPATH, value  = "//button[contains(text(),'Asetuks')]").click()
time.sleep(5)
driver.find_element(by = By.XPATH, value  = "//button[contains(text(),'Tallenna')]").click()
driver.maximize_window()
time.sleep(5)

#selecting parameters from the dropdown menu
element = WebDriverWait(driver, 20).until(
EC.element_to_be_clickable((By.XPATH, "//*[@class = 'mbsc-input-wrap']")))
element.click()

element = WebDriverWait(driver, 20).until(
EC.element_to_be_clickable((By.XPATH, "//*[@data-val = '66-duplicated']")))
element.click()
element = WebDriverWait(driver, 20).until(
EC.element_to_be_clickable((By.XPATH, "//*[@class = 'mbsc-input-wrap']")))
element.click()
element = WebDriverWait(driver, 20).until(
EC.element_to_be_clickable((By.XPATH, "//*[@data-val = '10-duplicated']")))
element.click()

What throws me off is that the code works for the 66-duplicated element but not for the 10-duplicated element, and the two are identical in every way. The error I get is

Exception has occurred: ElementClickInterceptedException
Message: element click intercepted: Element <div role="option" tabindex="-1" aria-selected="false" class="mbsc-sc-itm mbsc-sel-gr-itm  mbsc-btn-e" data-index="2" data-val="10-duplicated" style="height:40px;line-height:40px;">...</div> is not clickable at point (268, 217). Other element would receive the click: <input tabindex="0" type="text" class="mbsc-sel-filter-input mbsc-control" placeholder="Hae">

To to solve this, I have tried to use javascript, move to the element and then click and maximize the window - None of which worked.

#Attempt 1:js:
driver.execute_script("arguments[0].click()", element)

#Attempt 2: moveToElement:

element = driver.find_element(by = By.XPATH, value  = "//*[@data-val = '10-duplicated']")
actions = ActionChains(driver)
actions.move_to_element(element).perform()
element = WebDriverWait(driver, 20).until(
EC.element_to_be_clickable((By.XPATH, "//*[@data-val = '10-duplicated']")))
element.click()

I have also tried a combination of these but to no avail.

However,when I put a break point right before the click of element "10-duplicated" and manually scroll and move the mouse to the element, and run the remaining code, it works.

I am quite puzzled here. What's going on and how can this problem be solved?

Answer 1

There are 17 matches for //*[@class = 'mbsc-input-wrap'] locator on that page, but you are opening the same, first match 2 times. That is Merkit droplist.
Now, when selecting //*[@data-val = '66-duplicated'] (Nissan) from the opened droplist this will work since that option is within the visible options but when Nissan is currently selected //*[@data-val = '10-duplicated'] (BMW) option in not visible, you can not click it directly.
In order to select it now you will have to

1. Cancel the previous selection of Nissan so that BMW will become initially visible by opening the droplist.
2. Scroll the droplist
3. Click the //*[@data-val = '10-duplicated'] with JavaScript - not recommended since this is not what human user can do via GUI.
   I will give you a code to make the first approach - cancelling the previous Nissan selection.
   I have also made some improvements there.

from selenium import webdriver
from selenium.webdriver.chrome.service import Service as ChromeService
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.proxy import Proxy, ProxyType
from selenium.webdriver.common.by import By
import time
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.action_chains import ActionChains

ser = Service(executable_path= r'D:\chromedriver.exe')

#Note I have omitted the options that I use (proxy and header).
driver = webdriver.Chrome(service = ser)
driver.get("https://www.autotalli.com/")
wait = WebDriverWait(driver, 20)

time.sleep(5)

# Accepting cookies
driver.find_element(by = By.XPATH, value  = "//button[contains(text(),'Asetuks')]").click()
time.sleep(5)
driver.find_element(by = By.XPATH, value  = "//button[contains(text(),'Tallenna')]").click()
driver.maximize_window()
time.sleep(5)

#selecting parameters from the dropdown menu
wait.until(EC.element_to_be_clickable((By.XPATH, "//*[@class = 'mbsc-input-wrap']"))).click()

wait.until(EC.element_to_be_clickable((By.XPATH, "//*[@data-val = '66-duplicated']"))).click()
#clear the previously selected NIssan option
wait.until(EC.element_to_be_clickable((By.XPATH, "//span[contains(@class,'usedCarsMakeClear clearOption')]"))).click()

wait.until(EC.element_to_be_clickable((By.XPATH, "//*[@class = 'mbsc-input-wrap']"))).click()

wait.until(EC.element_to_be_clickable((By.XPATH, "//*[@data-val = '10-duplicated']"))).click()