Como interactuar con elementos SVG y/o mapas con selenium en python

Buenas lectores

Un reto muy interesante que se nos puede presentar es cuando tratamos de interactuar con elementos en un mapa o en un gráfico, normalmente los encontramos como SVG.

El resto consiste en que normalmente no encuentra los elementos a pesar de que hagamos correctamente el cambio al iframe donde se supone están los controles. Es algo complicado y puede llegar a frustrarnos.

Soluciones hay varias, pero hoy vamos a usar las mas comunes y mas estables.

Usando xpath:

//div[@id="map"]//*[name()="svg"]/*[name()="g"]

//div[@id="map"]//*[name()="svg"]/*[name()="g"]/*[name()="image"]

En muchas ocasiones no funciona el xpath, esto porque pareciera que los elementos no están en el DOM o por lo menos , no en el orden que los vemos ya construidos. Para esos casos podemos recurrir a CSS

En este ejemplo vamos a capturar todos los puntos del mapa y luego los recorremos pulsando click sobre cada uno de ellos:

from selenium import webdriver

driver.get("tu_url_aquí")

elements = driver.find_elements_by_css_selector('[id^="OpenLayers.Geometry.Point_"]')

for element in elements:

    element.click()

Con esto podemos interactuar con todos los elementos del mapa, recuerdo agregar un try y catch por cada click debido a que puede que encuentre elementos los cuales no sean interactuables.

Saludos

Fuentes:

https://stackoverflow.com/questions/41829000/how-to-click-on-svg-elements-using-xpath-and-selenium-webdriver-through-java

https://umaar.com/dev-tips/24-view-event-listeners/

https://stackoverflow.com/questions/20996392/how-to-get-text-with-selenium-webdriver-in-python