使用 Selenium Python 单击 SVG 时出错答案

【问题标题】：Error in Clicking on SVG using Selenium Python使用 Selenium Python 单击 SVG 时出错
【发布时间】：2022-01-25 04:30:27
【问题描述】：

以下是 HTML 代码。我想点击导出到 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>

我尝试了以下代码：

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()

得到一个错误：

selenium.common.exceptions.NoSuchElementException

【问题讨论】：

标签： python selenium svg xpath css-selectors

【解决方案1】：

您可能错过了延迟。
所以添加一些虚拟睡眠，比如

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()

应该可以解决您的问题。
此外，您的定位器看起来很糟糕。您必须创建更可靠的定位器。
此外，您应该使用预期条件显式等待，如下所示：

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()

【讨论】：

谢谢。添加等待时间是问题的一部分，而创建可靠的元素定位器是另一个问题，正如您提到的那样
如未检测到的 Selenium 所述，如果我们解决了您的问题，请接受正确答案（其中之一）

【解决方案2】：

改变

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

到

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

在您的 XPath 表达式中，因为您的 <svg...> 元素位于命名空间 xmlns="http://www.w3.org/2000/svg" 中。问题是 name() 匹配 namespace:name，但 local-name() 只匹配没有命名空间（-prefix）的名称。

【讨论】：

【解决方案3】：

所需的元素是svg 元素。要在元素上click()，您必须为element_to_be_clickable() 诱导WebDriverWait，您可以使用以下Locator Strategies 之一：

使用CSS_SELECTOR：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div#leo-title-bar svg[data-icon='download']"))).click()

使用XPATH:

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

注意：您必须添加以下导入：

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

参考文献

您可以在interacting with SVG element 上找到一些相关讨论：

【讨论】：