How to get data behind shadow-root (open) in selenium on python?

Viewed 952

I want to get the data in the redbox which comes after shadow-root, how do I got about doing this. I have tried using xpaths and css_selectors without any luck.

from selenium import webdriver
import time

driver = driver = webdriver.Firefox(executable_path= "C:\Program Files (x86)\geckodriver.exe")
driver.get('https://betfury.io/sport-betting')
time.sleep(5)
driver.find_element_by_xpath('//button[@class="popup-btn-close"]').click() #close pop_up
driver.find_element_by_xpath('//div[@id="bettech"]') # this works
driver.find_element_by_xpath('//div[@class="bt3306"]') # this does not work

Any advice would be much appreciated!

image

1 Answers

You can get rid of that like below :

def expand_shadow_element(element):
  shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
  return shadow_root


outer = expand_shadow_element(driver.find_element_by_css_selector("div.bt-inner-page"))
inner = outer.find_element_by_xpath("//div[@class="bt3306"]")
inner.click()

additionally, this bt3306 looks bit dynamic. so try with reliable class or any other locater. but as far as Shadow-root is concerned you can get rid off that by using the above code

Update 1 :

We were doing it wrong since bt-inner-page is an id, we have to use # not .

 def expand_shadow_element(element):
      shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
      return shadow_root

outer = expand_shadow_element(driver.find_element_by_css_selector("div#bt-inner-page"))
    inner = outer.find_element_by_xpath("//div[@data-editor-id='navbarIcon']//*[name()='svg']")
    inner.click()
Related