Why getting this selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element

Question:

I know already upload answer to this same question but I try them they are not working for me because there is also some some update in selenium code too.
Getting this Error selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <div class="up-typeahead-fake" data-test="up-c-typeahead-input-fake">...</div> is not clickable at point (838, 0). Other element would receive the click: <div class="up-modal-header">...</div> , When trying to send my searching keyword in this input with labeled "Skills Search"
in advance searching pop-pup form.

Here is the URL: https://www.upwork.com/nx/jobs/search/modals/advanced-search?sort=recency&pageTitle=Advanced%20Search&_navType=modal&_modalInfo=%5B%7B%22navType%22%3A%22modal%22,%22title%22%3A%22Advanced%20Search%22,%22modalId%22%3A%221670133126002%22,%22channelName%22%3A%22advanced-search-modal%22%7D%5D

Here is my code:

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
from selenium.webdriver.common.proxy import Proxy, ProxyType
import time
from fake_useragent import UserAgent
import pyttsx3
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

def main():
    options = Options()
    service = Service('F:\work\chromedriver_win32\chromedriver.exe')
    options.add_argument("start-maximized")
    options.add_argument('--disable-blink-features=AutomationControlled') #Adding the argument
    options.add_experimental_option("excludeSwitches",["enable-automation"])#Disable chrome contrlled message (Exclude the collection of enable-automation switches)
    options.add_experimental_option('useAutomationExtension', False) #Turn-off useAutomationExtension
    options.add_experimental_option('useAutomationExtension', False) #Turn-off useAutomationExtension
    prefs = {"credentials_enable_service": False,
     "profile.password_manager_enabled": False}
    options.add_experimental_option("prefs", prefs)
    ua = UserAgent()
    userAgent = ua.random
    options.add_argument(f'user-agent={userAgent}')
    driver = webdriver.Chrome(service=service , options=options)
    url = 'https://www.upwork.com/nx/jobs/search/?sort=recency'
    driver.get(url)
    time.sleep(7)



    advsearch = driver.find_element(By.XPATH,'//button[contains(@title,"Advanced Search")]')
    advsearch.click()
    time.sleep(10) 
    skill = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH,'//div[contains(@class,"up-typeahead")]')))
    skill.click()
    time.sleep(10)
    keys = ["Web Scraping","Selenium WebDriver", "Data Scraping", "selenium", "Web Crawling", "Beautiful Soup", "Scrapy", "Data Extraction", "Automation"]
    for i in range(len(keys)):

        skill.send_keys(Keys[i],Keys.ENTER)
        time.sleep (2)

main()

I try to send keys to the input field but its give me Error .ElementClickInterceptedException , I try old answer from stack previous question answer related to this error but they are not working for me because there is also some some update in selenium code too.

Asked By: Info Rewind

||
Source

Answers:

That error indicates that you have to click using JS execution like:

 import time

 skill = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH,'//div[contains(@class,"up-typeahead")]')))
 driver.execute_script("arguments[0].click();" ,skill)
 time.sleep(1)
Answered By: Fazlul

By clicking on "Advanced search" button an advanced search modal dialog is opened. So, when this dialog is opened you can not insert your search inputs into the regular search input, only in that modal dialog input. Then you need to close the button on that dialog to perform the search.
The following code is working:

import time

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

options = Options()
options.add_argument("start-maximized")

webdriver_service = Service('C:webdriverschromedriver.exe')
driver = webdriver.Chrome(options=options, service=webdriver_service)
wait = WebDriverWait(driver, 10)

url = "https://www.upwork.com/nx/jobs/search/?sort=recency"
driver.get(url)

keys = ["Web Scraping","Selenium WebDriver", "Data Scraping", "selenium", "Web Crawling", "Beautiful Soup", "Scrapy", "Data Extraction", "Automation"]
wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, 'button#onetrust-accept-btn-handler')))
time.sleep(5)
wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, 'button#onetrust-accept-btn-handler'))).click()
for i in range(len(keys)):
    wait.until(EC.element_to_be_clickable((By.XPATH, '//button[contains(@title,"Advanced Search")]'))).click()
    advanced_search_input = wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR,'[data-test="modal-advanced-search-and_terms"]')))
    advanced_search_input.clear()
    advanced_search_input.send_keys(keys[i])
    wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR,'[data-test="modal-advanced-search-search-btn"]'))).click()

Also, when using Selenium you should never use JavaScript clicks until you have no alternatives since Selenium imitates human GUI actions while JavaScript clicks can perform clicks on invisible, covered elements etc.
In this case, when the dialog is opened as a user you can not click on elements covered by that dialog. So, when performing GUI testing with Selenium (this is what Selenium for) you should not perform force clicks on such elements with the use of JavaScript.

Answered By: Prophet