how to access elements inside svg object with selenium

Question

I am trying to access speed data from OpenStreetBrowser with Selenium but I am unable to access SVG elements of the website.

This is what I've tried so far

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.maximize_window()
driver.get('https://www.openstreetbrowser.org')

wait = WebDriverWait(driver, 15)

xpath_expression = f"//a[contains(text(), 'Transportation')]"
wait.until(EC.element_to_be_clickable((By.XPATH, xpath_expression))).click()

xpath_expression = f"//a[contains(text(), 'Individual Traffic')]"
wait.until(EC.element_to_be_clickable((By.XPATH, xpath_expression))).click()

xpath_expression = f"//a[contains(text(), 'Maxspeed')]"
wait.until(EC.element_to_be_clickable((By.XPATH, xpath_expression))).click()

xpath_expression = f"//li[contains(text(), 'search')]"
wait.until(EC.element_to_be_clickable((By.XPATH, "//ul[@class='tabs-list']//li[@title='search']"))).click()

wait.until(EC.element_to_be_clickable((By.XPATH, "//div[@class='tabs-section nominatim-search selected']//input"))).send_keys('53.40125254855821,-3.0876670857133757')
wait.until(EC.element_to_be_clickable((By.XPATH, "//div[@class='tabs-section nominatim-search selected']//ul//li"))).click()

a = wait.until(EC.element_to_be_clickable((By.XPATH, "//*[@id='map']//div[1]//div[2]//svg")))

I am getting the following exception

TimeoutException: Message: 
Stacktrace:
    GetHandleVerifier [0x00007FF737801502+60802]
    (No symbol) [0x00007FF73777AC02]
    (No symbol) [0x00007FF737637CE4]
    (No symbol) [0x00007FF737686D4D]
    (No symbol) [0x00007FF737686E1C]
    (No symbol) [0x00007FF7376CCE37]
    (No symbol) [0x00007FF7376AABBF]
    (No symbol) [0x00007FF7376CA224]
    (No symbol) [0x00007FF7376AA923]
    (No symbol) [0x00007FF737678FEC]
    (No symbol) [0x00007FF737679C21]
    GetHandleVerifier [0x00007FF737B0411D+3217821]
    GetHandleVerifier [0x00007FF737B460B7+3488055]
    GetHandleVerifier [0x00007FF737B3F03F+3459263]
    GetHandleVerifier [0x00007FF7378BB846+823494]
    (No symbol) [0x00007FF737785F9F]
    (No symbol) [0x00007FF737780EC4]
    (No symbol) [0x00007FF737781052]
    (No symbol) [0x00007FF7377718A4]
    BaseThreadInitThunk [0x00007FF87E237344+20]
    RtlUserThreadStart [0x00007FF87FD826B1+33]

It seems like each road stretch was arranged as an image/tile. I want to click on each image and then Details option on the popup to gather the required data. How can I access each tile on this website and click on it?

Thanks in advance!

Answer 1

SVG elements have to be treated differently than other elements. You need to update your locator slightly to get access to them. Instead of

(By.XPATH, "//svg")

you need to use

(By.XPATH, "//*[name()='svg']")

So your SVG locator would be changed to

a = wait.until(EC.element_to_be_clickable((By.XPATH, "//*[@id='map']//div[1]//div[2]//*[name()='svg']")))