0

I'm trying to get elements on a webpage that has a react-leaflet map. The import on the page is the following:

// Map.js component

import { Map, TileLayer, GeoJSON, Pane } from 'react-leaflet'

...
  return(
    <Map
      <TileLayer ... />
    />
  )

Then the DOM looks like this:

<div class="leaflet-container">
  <div class="leaflet-pane">
    <div class="leaflet-pane custom-pane">
      <svg class="leaflet-zoom-animated">
        <g>
          <path class="leaflet-interactive">...</path>
          <path class="leaflet-interactive">...</path>
          <path class="leaflet-interactive">...</path>
          <path class="leaflet-interactive">...</path>
          <path class="leaflet-interactive">...</path>
        </g>
      </svg>
    </div>
  </div>
</div>

When I query the elements in the browser console I get all the <path> elements

document.querySelectorAll('.leaflet-interactive')
// NodeList(5)

But when I try to get from my Python script it can't find the elements:

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


chrome_options = webdriver.ChromeOptions()
chrome_options.add_experimental_options("detach", True)

driver = webdriver.Chrome(options=chrome_options)
wait = WebDriverWait(driver, 10)

wait.until(EC.url_contains("map"))

driver.get(url) # the webpage url
wait.until(EC.url_contains(f"{latitude}/{longitude}"))

# the following step fails
elements = wait.until(EC.visibility_of_all_elements_located((By.CLASS_NAME, "leaflet-interactive")))

Unfortunately, it does not give me any useful errors (no exceptions actually).

I was looking at other questions but looks like my code is right - https://stackoverflow.com/a/63329510/11228445

Is this an issue on leaflet renders the page? I can't see any layers or iframes being rendered.

thenewjames
  • 966
  • 2
  • 14
  • 25

1 Answers1

1

After some experimentation, I verified that switching to

# any instead of all
elements = wait.until(EC.visibility_of_any_elements_located((By.CLASS_NAME, "leaflet-interactive")))

returned the right amount of elements.

So what it most likely be happening is that not all elements are being rendered in the current viewport (the window is 800 x 600); therefore, switching to any instead of all should suffice in this case.

thenewjames
  • 966
  • 2
  • 14
  • 25