[FIXED] How to click on a rect tag in a bar graph using Selenium

Issue

I have bar graph in a website and need to click on it. Using developer tools, I am getting below xpath:

/html/body/root/main/portal/div[2]/div/div/div/my-portal/div[3]/td-tyr/td-tyr/div[1]/filter-bar/div/div[3]/div[1]/div[1]/bar-chart/div/div[1]/div/svg/g[4]/g[1]/rect[1]

When using the above in xpath, it's giving invalid expression. Any help will be appreciated.

Solution

To click on the Bar Graph as the element have a parent <svg> element you can use either of the following Locator Strategies:

• Using css_selector:

  driver.find_element(By.CSS_SELECTOR, "bar-chart svg g rect.highcharts-point.highcharts-color-0.highcharts-point-hover[x='31.5'][y='40.5']").click()
  

• Using xpath:

  driver.find_element(By.XPATH, "//bar-chart//*[name()='svg']//*[name()='g']//*[name()='rect'][@x='31.5' and @y='40.5']").click()
  

---

Ideally to click on a clickable 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, "bar-chart svg g rect.highcharts-point.highcharts-color-0.highcharts-point-hover[x='31.5'][y='40.5']"))).click()
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//bar-chart//*[name()='svg']//*[name()='g']//*[name()='rect'][@x='31.5' and @y='40.5']"))).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 interacting with SVG element in:

• How to access to 'rect' type element through Selenium-Python
• Clicking on svg using selenium python

Answered By - undetected Selenium