1

I'm trying to use Selenium Webdriver with Python to display the tooltip in svg tag, but failed.

Below is the 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>

On the web page, there is a help icon in <button> tag and when moving mouse over it, there will be a tooltip "Email server configuration help" pops up. And I want to re-produce the tooltip pops-up with Selenium Webdriver.

Below is my code:

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

With my code above, when the it runs to tooltip.move_to_element(helpIcon).perform(), I can see the icon changes color, just like hovering mouse over it, but the tooltip does not pop-up, and no error occurs.

I've also tried to set the element to two xpath below, but both cannot be located:

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

How to make the tooltip in svg tag pop up with Selenium Webdriver?

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
Cathy Wang
  • 11
  • 2

3 Answers3

0

I have faced similar issue, then I used sikuli tool to hover the mouse cursor and i was able to see the tool-tip pop-up as well.

qababu
  • 11
  • 3
0

To display the tooltip using Selenium WebDriver you have to induce WebDriverWait for the visibility_of_element_located() and you can use either of the following Locator Strategies:

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

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

  • Note : You have to add the following imports :

    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

You can find a relevant discussion in Python-Scrape website with dynamic mouseover event

Update

Seems we need to reach till the <svg> tag to trigger the tooltip and you can use the following solution:

  • Using 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()
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
  • Thank you, but this doesn't work for me. The result is the same that the icon changes color just like hovering over it, it can locate the element correctly, but the tooltip just doesn't pop-up. I'm wondering the problem is about the tag, just don't know how to handle it. – Cathy Wang Nov 25 '19 at 07:08
  • @CathyWang Check out the updated answer and let me know the status – undetected Selenium Nov 25 '19 at 07:30
  • I tried but still the same, it can locate the svg, but the tooltip still doesn't pop-up. Note: a single quote is missing for @name='help' – Cathy Wang Nov 25 '19 at 09:30
  • What is the tooltip text? Possibly you need to _mouse hover_ over other element and the tooltip shown is this element. Can you locate the parent element once again? – undetected Selenium Nov 25 '19 at 09:38
  • The tooltip text is located in tag , I've tried and it cannot be located. But good news! I just make it work with pyautogui.moveTo(x,y), and the tooltip pops up. It may not be a perfect way, but since the location of the icon is fixed, so it works for my testing. Thank you for all the responses. – Cathy Wang Nov 25 '19 at 09:45
0

I finally use a totaly different method PyAutoGUI to trigger the tooltip:

import pyautogui

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

This may not be a perfect way, but in my own case the location of tag is fixed, so this works for me.

Note: If the tooltip still cannot show up, try to move or click anywhere else on the page and then move back.

Cathy Wang
  • 11
  • 2