Clicking on Svg Using Selenium Python

Clicking on svg using selenium python

To click() on the svg icon you can use the following solution:

driver.find_element_by_xpath('//div[@class="some-class"]/*[name()="svg"][@aria-label="Search"]').click()

You can find a couple of relevant discussions in:

How to click on SVG elements using XPath and Selenium WebDriver through Java
Unable to locate SVG elements through xpath on Kendo UI chart

How to find svg element with selenium?

You have to apply a slightly different locator strategy to find svg.

Here is what works:

driver.find_element(By.XPATH, "//*[name()='svg']")

assuming that this is the only svg element (as provided in your query)

Combination of more than one attribute from the same DOM line:

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

Error in Clicking on SVG using Selenium Python

The desired element is a svg element. To click() on the element 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#leo-title-bar svg[data-icon='download']"))).click()

Using XPATH:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@id='leo-title-bar']//*[name()='svg' and @data-icon='download']"))).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

How to click on a svg:image element using Selenium and Python

`<svg:image>`

The <svg:image> element includes images inside SVG documents. It can display raster image files or other SVG files. The only image formats SVG software must support are JPEG, PNG, and other SVG files. Animated GIF behavior is undefined.

SVG files displayed with <image> are treated as an image where external resources aren't loaded, :visited styles aren't applied and they cannot be interactive. To include dynamic SVG elements, try <use> with an external URL. To include SVG files and run scripts inside them, try <object> inside of <foreignObject>.

Note: The HTML spec defines <image> as a synonym for <img> while parsing HTML. This specific element and its behavior only apply inside SVG documents or inline SVG.

xlink:href

The xlink:href attribute defines a link to a resource as a reference <IRI>. The exact meaning of that link depends on the context of each element using it.

Deprecated since SVG 2: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Note: SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href.

Solution

To click() on the desired element you need to induce WebDriverWait for the desired element_to_be_clickable and you can use the following solution:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//*[name()='svg:image' and starts-with(@class, 'holder') and contains(@xlink:href, 'some')]"))).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

How to click on a menu with svg tag on it using selenium

SVG is wrapped inside div tag, so you can either locate SVG or div.

I can do it with div:

driver.maximize_window()
wait = WebDriverWait(driver, 30)

driver.get("https://dappradar.com/binance-smart-chain/defi/drip")

try:
    wait.until(EC.element_to_be_clickable((By.XPATH, "//button[@title='Close']"))).click()
    print('Clicked on closed icon')
except:
    pass

wait.until(EC.element_to_be_clickable((By.XPATH, "//div[@title='Menu']"))).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

How can I make click over a SVG element?

g tag is under svg tag. so for locating g.team-A

Please use the below xpath :

//*[name()='g' and @class='team-A']

this is an xpath expression.

so the possible fix for this :

point = item.find_element_by_tag_name('svg')
point.click()

to use this :

point = item.find_element_by_xpath("//*[name()='svg']")
point.click()

What I would suggest here is to have a explicit wait defined and then you can try to click on it.

Code-trial :

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//*[name()='svg']"))).click()

for this explicit wait, you'd have to import these as well :

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

Update :

driver = webdriver.Chrome(driver_path)
driver.maximize_window()
wait = WebDriverWait(driver, 30)

driver.get("https://www.fiba.basketball/euroleaguewomen/21-22/game/1310/MBA-Moscow-ZVVZ-USK-Praha#tab=shot_chart")
ele = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "div.shot-chart_canvas")))
driver.execute_script("arguments[0].scrollIntoView(true);", ele)
wait.until(EC.element_to_be_clickable((By.XPATH, "//*[name()='svg' and @class='chart']//*[name()='g']//descendant::*[name()='g' and @class='shot-item']"))).click()
a = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div.player-profile"))).get_attribute('innerText')
print(a)

Imports :

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

output :

Q1 09:520 0
Alexandra Stolyar
2pt jump shot missed
View Player Profile
    FG  2Pts    3Pts    FT  Pts
In this game    
2/6
33.33%
    
1/4
25%
    
1/2
50%
    
3/3
100%
    8

Update 2 :

driver.get("https://www.fiba.basketball/euroleaguewomen/21-22/game/1310/MBA-Moscow-ZVVZ-USK-Praha#tab=shot_chart")
ele = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "div.shot-chart_canvas")))
driver.execute_script("arguments[0].scrollIntoView(true);", ele)
all_points  = wait.until(EC.presence_of_all_elements_located((By.XPATH, "//*[name()='svg' and @class='chart']//*[name()='g']//descendant::*[name()='g' and @class='shot-item']")))
print(len(all_points))
for point in all_points:
    point.click()
    a = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div.player-profile"))).get_attribute('innerText')
    print(a)
    wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "button.icon--close"))).click()
    time.sleep(1)

Imports :

119
Q1 09:520 0
Alexandra Stolyar
2pt jump shot missed
View Player Profile
    FG  2Pts    3Pts    FT  Pts
In this game    
2/6
33.33%
    
1/4
25%
    
1/2
50%
    
3/3
100%
    8
Q1 09:350 0
Karina Nizamova
3pt jump shot missed
View Player Profile
    FG  2Pts    3Pts    FT  Pts
In this game    
1/7
14.29%
    
1/3
33.33%
    
0/4
0%
    
2/3
66.67%
    4

How to click a dropdown button within a svg tag using Selenium and Python

The desired element is a svg element so to click on the element instead of visibility_of_element_located() you have to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

Using CSS_SELECTOR:

driver.get("https://www.rivm.nl/media/smap/eenzaamheid.html")
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.highcharts-container svg g[aria-label='View export menu'] rect"))).click()

Using XPATH:

driver.get("https://www.rivm.nl/media/smap/eenzaamheid.html")
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@class='highcharts-container ']//*[name()='svg']//*[name()='g' and @aria-label='View export menu']//*[name()='rect']"))).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

Browser Snapshot:

svg_css_click

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

Clicking on Svg Using Selenium Python