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

Question

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.

score 1 · Answer 1 · answered Nov 27 '21 at 13:25

There are basically 4 ways to click in Selenium.

I will use this xpath

//rect[@class='highcharts-point highcharts-color-0 highcharts-point-hover'][@stroke='#ffffff']

Code trial 1:

time.sleep(5)
driver.find_element_by_xpath("//rect[@class='highcharts-point highcharts-color-0 highcharts-point-hover'][@stroke='#ffffff']").click()

Code trial 2:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//rect[@class='highcharts-point highcharts-color-0 highcharts-point-hover'][@stroke='#ffffff']"))).click()

Code trial 3:

time.sleep(5)
button = driver.find_element_by_xpath("//rect[@class='highcharts-point highcharts-color-0 highcharts-point-hover'][@stroke='#ffffff']")
driver.execute_script("arguments[0].click();", button)

Code trial 4:

time.sleep(5)
button = driver.find_element_by_xpath("//rect[@class='highcharts-point highcharts-color-0 highcharts-point-hover'][@stroke='#ffffff']")
ActionChains(driver).move_to_element(button).click().perform()

Imports:

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

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

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.

the classname is not unique. There are multiple bargraph in the website and classname is same for all , so the above code is unable to find an element — Dcook, Nov 27 '21 at 13:41
You should share more HTML content, outerHTML in that case. Else, you would end up using XPath indexing like this `(//rect[@class='highcharts-point highcharts-color-0 highcharts-point-hover'][@stroke='#ffffff'])[1]`... put `[2]` or `[3]` or any arbitrary number that matches the node you want to perform click action on. Steps are mention to check unique node above. — cruisepandey, Nov 27 '21 at 13:51

score 1 · Accepted Answer · answered Nov 27 '21 at 20:44

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 click on a rect tag in a bar graph using Selenium

2 Answers2

References