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

Question

I am currently dabbling in Python in combination with Selenium. Here I came across the topic of Java Script buttons. I am looking for the smartest way to find out how to execute a Java-Script code (in this case a button) the easiest way.

My goals:

Open web page http://www.easyCredit.de
Accept the Cockies there
Click the "Jetzt berechnen" button
Click the "Zu den finanziellen Angaben" button

Number 1 and 2, I got right with a lot of research. Now it's time to click the button. This can be identified quite well in the code, but still I do not succeed in clicking.

<input type="submit" class="calculator__submit-button" value="calculate now">

I have now tried it similar to the cockies, but unfortunately it does not work. I hope you can help me.

Here is my code:

from selenium import webdriver
from selenium.webdriver.common.by import By
import time

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

# link to Chromedriver
browser = webdriver.Chrome('/usr/local/bin/chromedriver')

# maximize window
browser.maximize_window()

# URL
browser.get('https://www.easycredit.de/')

# wait
time.sleep(5)

# accept cookies
coockie_button = browser.execute_script("""return document.querySelector('#usercentrics-root').shadowRoot.querySelector("button[data-testid='uc-accept-all-button']")""")
coockie_button.click()

# wait
time.sleep(5)

# click "Jetzt berechnen" 
berechnen_button = browser.execute_script("""return document.querySelector('rr-62f0ff69f069c').shadowRoot.querySelector("button[class='calculator__submit-button']")""")
berechnen_button.click()

The last part does not work.

This is the button I want to click:

My next goal is the "Jetzt berechnen" Button. I added a Screenshot. — edstrinova
– edstrinova, Commented Aug 13, 2022 at 19:19
Can you give me a hint on how to click the button on the next page (Zu den finanziellen Angaben)? There it somehow does not work with this method. — edstrinova
– edstrinova, Commented Aug 15, 2022 at 19:56
Feel free to raise a new question with your new requirements. — undetected Selenium
– undetected Selenium, Commented Aug 15, 2022 at 19:58

Prakash Dahal · Accepted Answer · 2023-11-01 11:04:00Z

5

Selenium 4 introduced a new way to access shadow DOM elements:
shadow_root=elem.shadow_root

shadow_root = driver.find_element(By.CSS_SELECTOR, "kredit-rechner").shadow_root
berechnen_button = shadow_root.find_element(By.CSS_SELECTOR, "input.calculator__submit-button")
berechnen_button.click()

Safe solution:

shadow_root = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, "kredit-rechner"))).shadow_root
WebDriverWait(shadow_root, 10).until(EC.element_to_be_clickable((By.CSS_SELECTOR, ".input.calculator__submit-button"))).click()

edited Nov 1, 2023 at 11:04

Prakash Dahal

4,9462 gold badges20 silver badges31 bronze badges

answered May 30, 2023 at 0:18

I.sh.

2,4692 gold badges18 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Winiecki Over a year ago

I must be doing something wrong. elem.shadow_root always raises NoSuchShadowRootException for me, on every element (I tried iterating over every element to see if any did not raise, and all raised), even when I see a shadow root on an element using dev tools. I haven't been able to find documentation. I suppose I could read source code and/or file a bug report...

David Winiecki Over a year ago

I think my problem is that I misunderstood shadow roots in general. It's not clear in any documentation I've found, but some people claim that you can't use JavaScript to access a shadow root created by a browser and I guess that applies to Selenium too, which is not surprising I guess.

undetected Selenium · Accepted Answer · 2022-08-13 19:58:21Z

1

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

Jetzt

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()

edited Aug 13, 2022 at 19:58

answered Aug 13, 2022 at 19:24

undetected Selenium

194k44 gold badges304 silver badges387 bronze badges

5 Comments

edstrinova Over a year ago

Thank You. Did you test the code? I get "JavascriptException: javascript error: Invalid or unexpected token (Session info: chrome=104.0.5112.79)"

undetected Selenium Over a year ago

My bad, there was a typo, fixed it. Let me know the results.

edstrinova Over a year ago

Thank You. So I can go for the next Button to try :)

undetected Selenium Over a year ago

@edstrinova yeap, ofcoarse :)

edstrinova Over a year ago

Can you give me a hint on how to click the button on the next page? There it somehow does not work with this method.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Solution

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Solution

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related