使用 SVG 和 Span 单击 Python Selenium 按钮

Question

我在一个看似简单的问题上花了很多时间，但我仍在寻找答案。

这是 print(browser.page_source) 的输出，所以我的路径是正确的。

这是我试图用 Selenium 点击的按钮，但一点运气都没有。我没有使用 Selenium 和 SVG 的经验。我不确定 SVG 是否会在这里发挥作用。我认为一个带有 .click(0 事件的简单 xpath 应该可以做到，但到目前为止还没有骰子。

<button type="button" disabled="" class=“kl-button kl-button-pri ce-blue-button kl—button-disabled">
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 22 22” fill="none" stroke=“bluecolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=“school_search green_fields-search”>
      <circle cx="12” cy="12” r=“9”></circle>
      <path d="M17 19l-4.25-4.15"></path>
   </svg>
   School Finder<span class="green_fields_p”><span class="green_fields"></span></span>
</button>

这是我迄今为止尝试过的。

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

browser = webdriver.Chrome(ChromeDriverManager().install())
# browser.get('https://google.com')
browser.get(url)

# find_all = browser.find_element_by_xpath("//div[@class='school_load']//div[2]//button[2]")
# find_all = browser.find_element_by_xpath('//*[@id="LoadResults"]/div[2]/div[2]/div[1]/div[2]/button[1]')

# browser.find_element_by_xpath('//button[@class="ce-blue-button" and child::svg[@class="school_search green_fields-search"]]').click()

# find = browser.find_element_by_xpath('//button[@class="kl-button kl-button-pri ce-blue-button kl—button-disabled"]')

find = browser.find_element_by_xpath('//button[@class="ce-blue-button"]//*[name()="svg"][@class="school_search green_fields-search"]')
print(find)
find.click()

# browser.find_element_by_xpath('//button/*[name()="svg"][@class="school_search green_fields-search"]').click()

我得到了输出

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element:

或

<selenium.webdriver.remote.webelement.WebElement (session="2f2ab3421ll4fd509ecbeb762bd11d8e", element="44d4ce11-5a26-412a-8md1-83c59plm7c12")>

无论我如何尝试，我都无法点击按钮。任何帮助表示赞赏。

Answer 1

您的问题由 2 个不同的问题组成。

1. 第一个问题是 NoSuchElementException。当页面尚未加载但 find_element 代码已执行并因此找不到元素时，可能会发生此错误。 我建议在查找之前使用 WebDriverWait 等待元素加载完毕。

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

xpath = '//button[...]'
try:
    WebDriverWait(driver, 5).until(EC.presence_of_element_located((By.XPATH)))

    driver.find_element(By.XPATH, xpath)
    
except TimeoutException:
    print('Waiting for the element to appear on the webpage has expired. Wrong xpath?')

1. 您似乎遇到的第二个问题是无法单击该元素。发生这种情况时，您始终可以使用 ActionChains 将鼠标移动到某个元素，然后单击该位置。

from selenium.webdriver.common.action_chains import ActionChains

element = find_element(...)
ActionChains(driver).move_to_element(element).click().perform()

Answer 2

根据您在问题中提供的代码，您错过了等待。
您正尝试在页面加载之前访问该元素。
请试试这个：

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

browser = webdriver.Chrome(ChromeDriverManager().install())
browser.get(url)
wait = WebDriverWait(driver, 20)

find = wait.until(EC.visibility_of_element_located((By.XPATH, '//button[@class="ce-blue-button"]//*[name()="svg"][@class="school_search green_fields-search"]')))

print(find)
find.click()

Answer 3

有一种特殊的方法可以定位 svg 网页元素，请使用下面的 xpath

//*[local-name()='svg' and @class='“school_search']/..

在 Selenium 中基本上有 4 种点击方式。

代码试用 1：

time.sleep(5)
driver.find_element_by_xpath("//*[local-name()='svg' and @class='“school_search']/..").click()

代码试用 2：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//*[local-name()='svg' and @class='“school_search']/.."))).click()

代码试用 3：

time.sleep(5)
button = driver.find_element_by_xpath("//*[local-name()='svg' and @class='“school_search']/..")
driver.execute_script("arguments[0].click();", button)

代码试用 4：

time.sleep(5)
button = driver.find_element_by_xpath("//*[local-name()='svg' and @class='“school_search']/..")
ActionChains(driver).move_to_element(button).click().perform()

进口：

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：如果我们在HTML DOM 中有唯一条目，请检查dev tools（谷歌浏览器）。

检查步骤：

Press F12 in Chrome -> 转到element 部分 -> 做一个CTRL + F -> 然后粘贴xpath 看看，如果你想要的element 用@ 得到突出显示 987654334@匹配节点。