Selenium can't click element because other element obscures it

Question

Set-up

I'm using Python 3.x and Selenium to fill out a query field and subsequently click the search button,

# element containing the product search bar and buttons
search_area = el_id('Products').find_element_by_class_name('searchArea')

# insert name of file to be duplicated
name_field = search_area.find_element_by_xpath("//input[@type='text']")
name_field.clear()
name_field.send_keys('to_be_duplicated')  

# click search button
search_area.find_element_by_xpath('span/a[1]').click()

where el_id(x) = browser.find_element_by_id(x).

---

Problem

Executing the code above gives the following error,

ElementClickInterceptedException: Element <a class="button button-fleft searchButton" href="#"> is not clickable at point (577.6166763305664,225.06666564941406) because another element <div class="blockUI blockOverlay"> obscures it

I can solve this error by inserting a hard wait before grabbing and clicking the button, like so,

# click search button
time.sleep(1)
search_area.find_element_by_xpath('span/a[1]').click()

But I rather solve it differently, so I followed this answer and did the following,

# click search button
search_button = search_area.find_element_by_xpath('span/a[1]')
WebDriverWait(driver, 10).until_not(EC.visibility_of_element_located((By.XPATH, 
"//*[@id="Products"]/tbody/tr[1]/td/div/input")))
search_button.click()

But I got exactly the same error.

I also tried this answer, but same error.

How do I solve this?

Answer 1

Following nr.5 of DebanjanB's answer, I solved it by implying the code to wait for the temporary overlay to dissapear before trying to click,

wait.until(EC.invisibility_of_element_located((By.XPATH,
              "//div[@class='blockUI blockOverlay']")))
el_xp("//input[@value='Save']").click()

Answer 2

There are several ways to do this, one of the ways is by Javascript executor.

You could say:

element = driver.find_element_by_xpath("//div[@class='blockUI blockOverlay']")

driver.execute_script("arguments[0].style.visibility='hidden'", element)

This way, you can block the div with class = 'blockUI blockOverlay' and your element can be clicked if I'm correct.

Answer 3

Also, you can try to click the element by JavaScript like this:

# element containing the product search bar and buttons
search_area = el_id('Products').find_element_by_class_name('searchArea')

# click element by executing javascript
driver.execute_script("arguments[0].click();", search_area)