How to use click() function of selenium in case of "button" attribute in HTML?

Question

I want to use the click() function of selenium on these buttons in the following manner(the first two clicks):

For reference the 1st button I want to click and its code:

2nd button with its code:

I tried using driver.find_element(By.XPATH,"//button[contains(@type,\"button\")]").click() on the first button (the "X" mark) but it didn't work and got this error:

selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <button type="button" class="el-button yellowBtn el-button--default">...</button> is not clickable at point (606, 507). Other element would receive the click: <img src="https://d2g38dx0j6xqav.cloudfront.net/online/img/app-inner/popup.png" alt="" style="width: 100%;">

If I somehow get it to click the first button then getting it to click the second button will be much easier.

Answer 1

I think you should wait until the element is visible in the modal dialog box. U can use both the Explicit and Implicit waits methods for the above problem.

Answer 2

selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted

Above exception implies that the element you are trying to action upon isn't clickable, as some other element is overshadowing it.

Try by inducing wait(see below):

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH,"Your XPath expression here"))).click()

if the above doesn't work, try using execute_script() method(see below):

driver.execute_script("arguments[0].click();", WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "Your XPath expression here"))))

Required imports statements:

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

Answer 3

Always read exception and/or error messages carefully to see what you can learn about the problem. In this case, it tells you exactly what happened. I reformatted and shortened it to make it more readable.

ElementClickInterceptedException:
Message: element click intercepted: Element <button...> is not clickable.
Other element would receive the click: <img...>

Selenium is telling you that it tried to click the BUTTON but the click was intercepted (it never got clicked because there was another element covering it). The element that got clicked instead was an IMG.

Without seeing the full HTML of the page it's hard to say but your BUTTON locator looks pretty generic and there's a good chance that you clicked a different BUTTON than you intended. I would use the locator below instead to click on the I tag.

wait = WebDriverWait(driver, 10)
close_icon = (By.CSS_SELECTOR, "i.el-dialog__close")
wait.until(EC.element_to_be_clickable(close_icon)).click() # click the close icon
wait.until(EC.invisibility_of_element_located(close_icon)) # wait for the close icon to disappear indicating the dialog is fully closed
# continue script

If that still doesn't work, you will probably need to use a JS click. If you are writing UI tests, then you should avoid JS clicks unless no other solution can be found because it allows the script to do things that a user can't. If you aren't writing tests, then it likely doesn't matter.

wait = WebDriverWait(driver, 10)
close_icon = wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "i.el-dialog__close")))
driver.execute_script("arguments[0].click()", close_icon)
# continue script

Answer 4

You desired element is:

But your line of code:

driver.find_element(By.XPATH,"//button[contains(@type,\"button\")]").click()

is attempting to click on:

<button type="button" class="el-button yellowBtn el-button--default">...</button>

which isn't the desired element and still the click attempt is intercepted by:

<img src="https://d2g38dx0j6xqav.cloudfront.net/online/img/app-inner/popup.png" alt="" style="width: 100%;">

---

Solution

To click 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, "button.el-dialog__headerbtn[aria-label='Close'] > i.el-dialog__close.el-icon.el-icon-close"))).click()
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//button[@class='el-dialog__headerbtn' and @aria-label='Close']/i[@class='el-dialog__close el-icon el-icon-close']"))).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