Error in Clicking on SVG using Selenium Python

Question

Following is HTML code. I want to click on Export to CSV.

<pre>
<div id="leo-title-bar" style="width: 100%">
<div class="container-fluid p-0"><div class="no-gutters" style="min-height: 100vh;">
<div class="col-12 d-flex flex-column">
<nav class="navbar navbar-dark bg-primary justify-content-start" style="height: 64px; flex-wrap: unset;">
<span class="navbar-brand" style="flex: 1 1 0%; font-size: 22px;">Agency Summary</span>

<svg aria-labelledby="svg-inline--fa-title-5AhAR2Z9sKF8" data-prefix="fas" data-icon="download" class="svg-inline--fa fa-download fa-w-16 svg-shadow svg-icon-basic svg-icon-basic-hover" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<title id="svg-inline--fa-title-5AhAR2Z9sKF8">Export to CSV</title>

<path fill="currentColor" d="M216 0h80c13....."></path></svg>

</div></main>
</div>
</div>
</div>
</div>


</pre>

I have tried following code:

from selenium import webdriver
driver = webdriver.Edge(PATH)
driver.find_element_by_xpath('//div[@class="col-12 d-flex flex-column"]/*[name()="svg"][@aria-labelledby="svg-inline--fa-title-5AhAR2Z9sKF8"]').click()

Getting an error:

selenium.common.exceptions.NoSuchElementException

score 2 · Answer 1 · answered Jan 24 '22 at 17:58

Possibly you are missing a delay.
So adding some dummy sleep like

from selenium import webdriver
import time
driver = webdriver.Edge(PATH)
time.sleep(5)
driver.find_element_by_xpath('//div[@class="col-12 d-flex flex-column"]/*[name()="svg"][@aria-labelledby="svg-inline--fa-title-5AhAR2Z9sKF8"]').click()

Should resolve your problem.
Also your locator looks bad. You have to create more reliable locator.
Also you should use Expected Conditions explicit waits, as following:

from selenium import webdriver
import time
rom selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
driver = webdriver.Edge(PATH)
wait = WebDriverWait(driver, 20)
wait.until(EC.visibility_of_element_located((By.XPATH, '//div[@class="col-12 d-flex flex-column"]/*[name()="svg"][@aria-labelledby="svg-inline--fa-title-5AhAR2Z9sKF8"]'))).click()

Thank you. Adding wait time was one part of problem and creating a reliable element locator was other as you mentioned — Kajal Jain, Jan 24 '22 at 20:56
As mentioned by undetected Selenium, in case we resolved your issue please accept (one of) the correct answer(s) — Prophet, Jan 24 '22 at 21:00

score 0 · Answer 2 · answered Jan 24 '22 at 17:59

Change

.../*[name()="svg"]...

to

.../*[local-name()="svg"]...

in your XPath-expression, because your <svg...> element is in the namespace xmlns="http://www.w3.org/2000/svg". Thing is that name() matches namespace:name, but local-name() only matches the name without the namespace(-prefix).

score -1 · Accepted Answer · answered Jan 24 '22 at 20:30

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:

Error in Clicking on SVG using Selenium Python

3 Answers3

References