How to Extract Info Within a #Shadow-Root (Open) Using Selenium Python

How to extract info within a #shadow-root (open) using Selenium Python?

The products within the website https://www.tiendasjumbo.co/buscar?q=mani are located within a #shadow-root (open).

---

Solution

To extract the product label you have to use shadowRoot.querySelector() and you can use the following Locator Strategy:

• Code Block:

  driver.get('https://www.tiendasjumbo.co/buscar?q=mani')
  item = driver.execute_script("return document.querySelector('impulse-search').shadowRoot.querySelector('div.group-name-brand h1.impulse-title span.formatted-text')")
  print(item.text)
  

• Console Output:

  La especial mezcla de nueces, maní, almendras y marañones x 450 g
  

---

References

You can find a couple of relevant discussions in:

• Unable to locate the Sign In element within #shadow-root (open) using Selenium and Python
• How to locate the First name field within shadow-root (open) within the website https://www.virustotal.com using Selenium and Python

---

Microsoft Edge and Google Chrome version 96

Chrome v96 has changed the shadow root return values for Selenium. Some helpful links:

• Java - full example on GitHub
• Shadow DOM in Selenium
• Python - full example on GitHub
• Shadow DOM and Selenium with Chromium 96
• C# - full example on GitHub
• Shadow DOM in Ruby Selenium
• Ruby - full example on GitHub

Best way to click a button within #shadow-root (open) via Python and Selenium

The element Jetzt berechnen is within #shadow-root (open) and is an <input> element.

---

Solution

To click on Jetzt berechnen you can use the following line of code:

berechnen_button = browser.execute_script("""return document.querySelector('kredit-rechner').shadowRoot.querySelector('input.calculator__submit-button')""")
berechnen_button.click()

How to accept cookies popup within #shadow-root (open) using Selenium Python

The element Alle akzeptieren within the website is located within a #shadow-root (open).

---

Solution

To click on the element Alle akzeptieren you have to use shadowRoot.querySelector() and you can use the following Locator Strategy:

• Code Block:

  driver.execute("get", {'url': 'https://www.immobilienscout24.de/'})
  time.sleep(10)
  item = driver.execute_script('''return document.querySelector('div#usercentrics-root').shadowRoot.querySelector('button[data-testid="uc-accept-all-button"]')''')
  item.click()
  

How to access the html nested within multiple shadowRoot using Selenium and Python

The desired information interms of innerHTML is within multiple #shadow-root (open).

---

Solution

To extract the information you need to use shadowRoot.querySelectorAll() and you can use the following Locator Strategy:

• Code Block:

  driver.get("https://www.powerlanguage.co.uk/wordle/")
  time.sleep(1)
  sends=driver.find_element(By.XPATH, "/html/body")
  sends.click()
  sends.send_keys("adieu")
  sends.send_keys(Keys.ENTER)
  inner_texts = [my_elem.get_attribute("outerHTML") for my_elem in driver.execute_script("""return document.querySelector('game-app').shadowRoot.querySelector('game-row').shadowRoot.querySelectorAll('game-tile[letter]')""")]
  for inner_text in inner_texts:
  print(inner_text)
  

• Console Output:

  <game-tile letter="a" evaluation="absent" reveal=""></game-tile>
  <game-tile letter="d" evaluation="absent"></game-tile>
  <game-tile letter="i" evaluation="correct"></game-tile>
  <game-tile letter="e" evaluation="absent"></game-tile>
  <game-tile letter="u" evaluation="absent"></game-tile>
  

---

References

You can find a couple of relevant discussions in:

• Can't locate elments within shadow-root (open) using Python Selenium
• How to get past a cookie agreement page using Python and Selenium?

---

Related Topics