Extract text on mouse hover in python selenium

Question

I would like to extract the text that appears on mouse hover on an element from the website https://idsc.cidadessustentaveis.org.br/rankings. A particular example of text of interest, is the text “Erradicacao da pobreza Pontuacao: 44,47” which appears on hovering the first bar located in the column “Desempenho por ODS”. I have tried the code below but it returns the blank text ‘’

from selenium import webdriver
driver = webdriver.Firefox()
driver.get("https://idsc.cidadessustentaveis.org.br/rankings")
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
wait = WebDriverWait(driver, 20)
desired_elem = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, '.SdgPerformanceBar__Block-sc-1yl1q71-2.fBQLcJ')))

I printed an attribute of the element extracted which confirmed that I have successfully gotten to the targeted element.

print(desired_elem.get_attribute('outerHTML'))

Which returned:
<div style="width:2.62%" class="SdgPerformanceBar__Block-sc-1yl1q71-2 fBQLcJ"></div>

Note that by inspecting the element in Firefox I found that the element has no innerHTML.
I then tried to extract the text using desired_elem.text but I get a blank ‘’

I also tried the code below which returned a blank as well.

from selenium.webdriver.common.action_chains import ActionChains
elem = driver.find_element(By.CSS_SELECTOR, '.SdgPerformanceBar__Block-sc-1yl1q71-2.fBQLcJ');
actions = ActionChains(driver)
    actions.move_to_element(elem)
actions.move_to_element(elem).perform()

Calling elem.text returned ''

Asked By: amo

||

Source

Answer 1

You was close to the solution.
When hovering over those elements tooltips appearing.
These tooltips will present different texts according to element you hovered over.
Here I used your code, just added the tooltips

from selenium import webdriver
from selenium.webdriver import ActionChains
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

options = Options()
options.add_argument("start-maximized")

webdriver_service = Service('C:webdriverschromedriver.exe')
driver = webdriver.Chrome(options=options, service=webdriver_service)
wait = WebDriverWait(driver, 10)
actions = ActionChains(driver)
tooltip1 = "div[role='tooltip'] .MuiTypography-root.MuiTypography-body1"
tooltip2 = "div[role='tooltip'] .MuiTypography-root.MuiTypography-body2"

url = "https://idsc.cidadessustentaveis.org.br/rankings"

driver.get(url)

desired_elem = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, '.SdgPerformanceBar__Block-sc-1yl1q71-2.fBQLcJ')))
actions.move_to_element(desired_elem).perform()
tt1_text = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, tooltip1))).text
tt2_text = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, tooltip2))).text
print(tt1_text)
print(tt2_text)

The output is:

Erradicação da pobreza
Pontuação: 44,47

Answered By: Prophet

Extract text on mouse hover in python selenium

Question:

Answers: