How to interact with elements from a webpage

Question

I need to extract COVID-19-related data from the following webpage: https://painel.saude.rj.gov.br/monitoramento/covid19.html. The data I need are in the tabs "Mapa Risco Municípios" and "Ocupação de Leitos".

I can easily access the tabs with Selenium with the following code:

from selenium import webdriver
from selenium.webdriver import ChromeOptions
from selenium.webdriver.common.by import By
from selenium.webdriver import ActionChains
import time

options = ChromeOptions()
driver = webdriver.Chrome(options=options)
driver.get('https://painel.saude.rj.gov.br/monitoramento/covid19.html')
driver.maximize_window()
action = ActionChains(driver)
action.move_by_offset(0,0).click().perform()
time.sleep(3)
element = driver.find_element_by_id("W3D44BFCBCCEC4CD297B7EF42ED504065--K46")
action.move_to_element(element).click().perform()

The problem is, I would like to do two things:

1. Zoom in and drag the map, to later capture this image. I know how to capture the image, but I simply can't interact with the "zoom in" button (circled in blue).
2. Be able to press the dynamical button circled in red, to download the data.

I tried using the following code snippet for zooming in:

iframe = driver.find_element_by_xpath("/html/body/section[@class='mainSection']/div[@class='painel']/div[@id='dossierContainer1']/iframe")
driver.switch_to.frame(iframe)
elem = driver.find_element_by_xpath("/html/body/div[1]/div/div/div[2]/div/div[1]/div[2]/div/div/div[4]/div/div/div/div/div/div/div/div/div[3]/div/div/div/div[2]/div/div/div/div[2]/div/div[1]/div[2]/div/div[4]/div[3]/div[1]/div[1]/div[2]/div[2]/div[2]/div[1]/div/div/div[4]/div[1]")
action.move_to_element(elem).click().perform()

but I get the following error:

---------------------------------------------------------------------------
StaleElementReferenceException            Traceback (most recent call last)
<ipython-input-2-32378e68ad4f> in <module>
      2 driver.switch_to.frame(iframe)
      3 elem = driver.find_element_by_xpath("/html/body/div[1]/div/div/div[2]/div/div[1]/div[2]/div/div/div[4]/div/div/div/div/div/div/div/div/div[3]/div/div/div/div[2]/div/div/div/div[2]/div/div[1]/div[2]/div/div[4]/div[3]/div[1]/div[1]/div[2]/div[2]/div[2]/div[1]/div/div/div[4]/div[1]")
----> 4 action.move_to_element(elem).click().perform()

~/.local/lib/python3.8/site-packages/selenium/webdriver/common/action_chains.py in perform(self)
     78         """
     79         if self._driver.w3c:
---> 80             self.w3c_actions.perform()
     81         else:
     82             for action in self._actions:

~/.local/lib/python3.8/site-packages/selenium/webdriver/common/actions/action_builder.py in perform(self)
     74             if encoded['actions']:
     75                 enc["actions"].append(encoded)
---> 76         self.driver.execute(Command.W3C_ACTIONS, enc)
     77 
     78     def clear_actions(self):

~/.local/lib/python3.8/site-packages/selenium/webdriver/remote/webdriver.py in execute(self, driver_command, params)
    319         response = self.command_executor.execute(driver_command, params)
    320         if response:
--> 321             self.error_handler.check_response(response)
    322             response['value'] = self._unwrap_value(
    323                 response.get('value', None))

~/.local/lib/python3.8/site-packages/selenium/webdriver/remote/errorhandler.py in check_response(self, response)
    240                 alert_text = value['alert'].get('text')
    241             raise exception_class(message, screen, stacktrace, alert_text)
--> 242         raise exception_class(message, screen, stacktrace)
    243 
    244     def _value_or_default(self, obj, key, default):

StaleElementReferenceException: Message: stale element reference: element is not attached to the page document
  (Session info: chrome=93.0.4577.82)

Does anyone have any idea how to interact with the elements in this page? Is it even possible?

Best,

Marcos

Answer 1

Was able to interact with the zoom in button with below code.

Apply Explicit waits since it takes a long time to load the details. Try to get Elements with Relative xpaths.

# Imports required
import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.action_chains import ActionChains 

driver.get("https://painel.saude.rj.gov.br/monitoramento/covid19.html")

wait = WebDriverWait(driver,50)

actions = ActionChains(driver)

wait.until(EC.element_to_be_clickable((By.XPATH,"//div[@id='menu']//li[4]")))
driver.find_element_by_xpath("//div[@id='menu']//li[4]").click()

driver.switch_to.frame(driver.find_element_by_xpath("//div[@id='dossierContainer1']/iframe"))
wait.until(EC.visibility_of_element_located((By.XPATH,"//span[text()='+']")))

for i in range(5): CLicks on "+" for 5 times.
    zoom = driver.find_element_by_xpath("//span[text()='+']")
    actions.move_to_element(zoom).click().perform()