如何使用 Selenium Webdriver 在 svg 标签中显示工具提示答案

【问题标题】：How to display a tooltip in svg tag with Selenium Webdriver如何使用 Selenium Webdriver 在 svg 标签中显示工具提示
【发布时间】：2019-11-26 16:30:20
【问题描述】：

我正在尝试使用 Selenium Webdriver 和 Python 在 svg 标签中显示工具提示，但失败了。

下面是html：

<body class="DA_SKINNED DA_GECKO DA_MAC">
<div id="email-server-admin-target" data-qradar-locale="en">
<div>
<div id="header-container" class="spacing-md-y">
<header class="header">
<h4 class="ibm-helvetica header-title">Email Server Management</h4>
<button class="header-action icon-button" type="button">
<svg class="header-action header-action-icon" fill-rule="evenodd" height="24" name="help" role="help" viewBox="0 0 24 24" width="24" aria-label="Email server configuration help" alt="Email server configuration help">
<title>Email server configuration help</title>
<path d="M10.84 17h2.15v-2.11h-2.15V17zm-2.21-6.62h2.01c0-.25.03-.48.09-.69.05-.22.14-.4.25-.56.11-.16.26-.29.44-.39.18-.09.39-.14.64-.14.36 0 .64.1.85.3.2.2.31.51.31.93.01.25-.04.45-.13.62-.1.16-.22.31-.38.45-.15.14-.32.27-.51.41-.18.14-.35.3-.51.49-.17.18-.31.41-.44.67-.12.27-.19.6-.22.99v.61h1.85v-.52c.03-.27.12-.5.26-.68.14-.18.3-.34.49-.49.18-.14.37-.28.58-.42.2-.14.39-.31.56-.51.17-.2.31-.45.42-.73.12-.28.18-.64.18-1.08 0-.26-.06-.55-.18-.86-.11-.3-.3-.58-.56-.85a3.2 3.2 0 0 0-1.05-.66c-.43-.18-.97-.27-1.62-.27-.5 0-.96.08-1.36.25-.41.17-.76.41-1.04.71-.29.3-.51.65-.67 1.06-.16.42-.25.87-.26 1.36zM23 12c0 6.08-4.93 11-11 11S1 18.08 1 12 5.93 1 12 1s11 4.92 11 11z"></path>
</svg>
</button>
</header>
</div>
</div>
</div>
</body>

在网页上，<button>标签中有一个帮助图标，当鼠标移到上面时，会弹出一个工具提示“电子邮件服务器配置帮助”。我想用 Selenium Webdriver 重新生成工具提示弹出窗口。

下面是我的代码：

helpIcon = self.wfx("/html/body/div/div/div[1]/header/button")
tooltip = ActionChains(self.browser)
tooltip.move_to_element(helpIcon).perform()

使用我上面的代码，当它运行到tooltip.move_to_element(helpIcon).perform()时，我可以看到图标改变颜色，就像将鼠标悬停在它上面一样，但是没有弹出工具提示，也没有发生错误。

我也尝试将元素设置为下面的两个xpath，但都找不到：

helpIcon = self.wfx("/html/body/div/div/div[1]/header/button/svg")

helpIcon = self.wfx("/html/body/div/div/div[1]/header/button/svg/path")

如何使用 Selenium Webdriver 弹出 svg 标签中的工具提示？

【问题讨论】：

标签： python selenium svg tooltip action

【解决方案1】：

我遇到过类似的问题，然后我使用 sikuli 工具将鼠标光标悬停，我也能够看到工具提示弹出窗口。

【讨论】：

【解决方案2】：

要使用Selenium WebDriver 显示工具提示，您必须为visibility_of_element_located() 诱导WebDriverWait，您可以使用以下任一Locator Strategies：

使用CSS_SELECTOR：

ActionChains(self.browser).move_to_element(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "body.DA_SKINNED.DA_GECKO.DA_MAC div#header-container button.header-action.icon-button")))).perform()

使用XPATH：

ActionChains(self.browser).move_to_element(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//h4[@class='ibm-helvetica header-title' and contains(.,'Email Server Management')]//following::button[1]")))).perform()

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

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

您可以在Python-Scrape website with dynamic mouseover event找到相关讨论

更新

似乎我们需要到达<svg>标签才能触发工具提示，您可以使用以下解决方案：

使用XPATH：

ActionChains(self.browser).move_to_element(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//h4[@class='ibm-helvetica header-title' and contains(.,'Email Server Management')]//following::button[1]/*[name()='svg'][@class='header-action header-action-icon' and @name='help]")))).perform()

【讨论】：

谢谢，但这对我不起作用。结果是一样的，图标改变颜色就像悬停在它上面一样，它可以正确定位元素，但工具提示只是不弹出。我想知道问题出在
@CathyWang 查看更新的答案，让我知道状态
我试过了，还是一样，可以定位到svg，但是还是不弹出提示框。注意：@name='help' 缺少单引号
工具提示文本是什么？可能您需要将 鼠标悬停 悬停在其他元素上，并且显示的工具提示就是该元素。能否再次定位父元素？
工具提示文本位于标签中，我试过了，找不到。不过好消息！我只是让它与 pyautogui.moveTo(x,y) 一起工作，然后工具提示就会弹出。这可能不是一个完美的方法，但由于图标的位置是固定的，所以它适用于我的测试。谢谢大家的回复。

【解决方案3】：

我终于用完全不同的方法 PyAutoGUI 来触发提示了：

import pyautogui

pyautogui.moveTo('The X and Y integer coordinates')

这可能不是一个完美的方法，但在我自己的情况下，标签的位置是固定的，所以这对我有用。

注意：如果工具提示仍然无法显示，请尝试移动或单击页面上的其他任何位置，然后返回。

【讨论】：