Selenium ElementClickInterceptedException: Other element would receive the click error clicking Like button on Instagram page

Question

I used to have the following python + selenium library code to like any IG post.

Below is a snippet code:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

"""
imagine on chrome browser you click on any IG picture of a gallery
of a specific account
then you see only that specific picture have the heart icon to click to like
see printscreen below
"""
like = browser.find_element_by_css_selector("[aria-label='Like']") 
like.get_attribute("aria-label")
like.click()  #error on this line !!!!!!

It used to work before, but recently I get the following error:

selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <span aria-label="Like" class="glyphsSpriteHeart__filled__16__white u-__7"></span> is not clickable at point (827, 76). Other element would receive the click: <div class=" _32yJO" role="dialog">...</div>
  (Session info: chrome=95.0.4638.69)

Could someone help me with this issue?

Answer 1

The Element is in an svg tag. To interact with the svg tag, below is the syntax. You can refer this.

//*[local-name()='svg']
Or
//*[name()='svg']

As per the screenshot of the DOM, the xpath for the Like element would be:

//*[local-name()='svg' and @aria-label='Like']

Do check if the xpath is unique locator for that element in the DOM (1/1 match). You can refer this.

Answer 2

To click on the Instagram icon you can use either of the following Locator Strategies:

• Using css_selector:

  driver.find_element(By.CSS_SELECTOR, "button svg[aria-label='Like']").click()
  

• Using xpath:

  driver.find_element(By.XPATH, "//button//*[name()='svg' and @aria-label='Like']").click()
  

---

The desired element is a dynamic element, so to click on the 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 svg[aria-label='Like']"))).click()
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//button//*[name()='svg' and @aria-label='Like']"))).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 detailed discussion in:

• Creating XPATH for svg tag
• How to click on SVG elements using XPath and Selenium WebDriver through Java
• Clicking on svg using selenium python

Answer 3

Typically the below xpath

//*[name()='svg' and @aria-label='Like']

should represent all the link icon in HTMLDOM.

if you want to be more specific, i.e based on IG handle you would like to press like icon, then you should use this

//a[text()='barked']/ancestor::header/../../following-sibling::div[2]//descendant::span[2]//*[name()='svg']

Also, I would recommend you to have ExplicitWait driver WebdriverWait

wait = WebDriverWait(driver, 30)
wait.until(EC.element_to_be_clickable((By.XPATH, "paste the above here"))).click()

Imports:

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

Please check in the dev tools (Google chrome) if we have unique entry in HTML DOM or not.

xpath that you should check :

//*[name()='svg' and @aria-label='Like']

Steps to check:

Press F12 in Chrome -> go to element section -> do a CTRL + F -> then paste the xpath and see, if your desired element is getting highlighted with 1/1 matching node.