How to click on the element with svg tag containing the attribute focusable="false" using Selenium and Python

Question

I'm quite new in Selenium in Python. This time I have a problem with clicking on an element (This is a closing button).

<div class="CloseButton_Background__27knc">
     <svg class="MuiSvgIcon-root CloseButton_Icon__7wksG" focusable="false" viewBox="0 0 24 24" 
      aria-hidden="true" style="font-size: 36px;">
        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 
          19 19 17.59 13.41 12 19 6.41z"></path></svg></div>

What I do first is: I'm looking for an element on the site:

closeButton = self.driver.find_elements_by_xpath('//div[@class="CloseButton_Background__27knc"]/*[name()="svg"][@class="MuiSvgIcon-root CloseButton_Icon__7wksG"]')

The element is found on the page. And then I try to call click () method on it and I get this error:

selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable

I'm waiting for the button to be visible. Please help! Thanks!

score 0 · Answer 1 · answered Jul 28 '20 at 09:10

You can wait until the element is loaded and then perform the click operation.

wait = WebDriverWait(browser, 10)
close_btn= wait.until(EC.visibility_of_element_located((By.XPATH,'//div[@class="CloseButton_Background__27knc"]/*[name()="svg"][@class="MuiSvgIcon-root CloseButton_Icon__7wksG"]')
close_btn.click()

Moreover, you can also use action chain to click on your element.

driver.implicitly_wait(10)
ActionChains(driver).move_to_element(close_btn).click(close_btn).perform()

score 0 · Answer 2 · answered Jul 28 '20 at 09:18

ElementNotInteractableException is caused when an element is found, but you can not interact with it. possible reasons : element is not visible , hidden or behind of another element

   closeButton = WebDriverWait(driver, 20).until(
   EC.presence_of_element_located((By.XPATH, '//div[@class="CloseButton_Background__27knc"]/*[name()="svg"][@class="MuiSvgIcon-root CloseButton_Icon__7wksG"]')))
   actionChains.move_to_element(closeButton).click().perform()

Note: Dont forget to add below imports to your solution:

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

Javascript :

closeButton = self.driver.find_elements_by_xpath('//div[@class="CloseButton_Background__27knc"]/*[name()="svg"][@class="MuiSvgIcon-root CloseButton_Icon__7wksG"]')
driver.execute_script("arguments[0].click();", closeButton)

score 0 · Answer 3 · answered Jul 28 '20 at 09:58

focusable="false"

As per the documentation in Managing focus in SVG:

The focusable attribute defined by SVG Tiny 1.2 is only implemented in Internet Explorer and Microsoft Edge. Unlike tabindex this attribute has a boolean value, where focusable="true" equals tabindex="0" and focusable="false" makes the element inert. Besides removing SVG links from the tabbing order by way of <a xlink:href="…" focusable="false">, this property also comes in handy to prevent the SVG's root element from unnecessarily receiving focus: <svg focusable="false">.

This usecase

To click on the desired element, it would be better to avoid the <svg> tag and you have 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, "div[class^='CloseButton_Background']"))).click()

Using XPATH:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[starts-with(@class, 'CloseButton_Background')]"))).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

References

You can find a couple of relevant discussions on ElementNotInteractableException in:

How to click on the element with svg tag containing the attribute focusable="false" using Selenium and Python

3 Answers3

focusable="false"

This usecase

References