How do I click a button inside shadow-root element?

Question

On a website we have here in Catalonia to get the Covid-19 vaccine is very annoying having to introduce your personal information and the SMS code every time you want to check if there is any center available.

Since I'm learning Python, I'm trying to automate that process and the first step is to click the button on the main page. However, the button is inside many shadow-root elements.

I did a previous research looking for similar questions and tried some code but it doesn't work.

This is my code:

from selenium.webdriver import Firefox
import time

# Define the driver
driver = Firefox(executable_path='C:/Users/Alexis/AppData/Local/Programs/Python/Python39/Tools/geckodriver.exe')

# Helper for getting the shadow root of a shadow host
def getShadowRoot(host):
    shadow_root = driver.execute_script("return arguments[0].shadowRoot", host)
    return shadow_root

# Open the browser and load the website (vacunacovidsalut.cat)
driver.get('http://vacunacovidsalut.cat/')

# Give browser some time to load all website elements
time.sleep(5)

# Get the button we need to click
host1 = driver.find_element_by_tag_name('vaccinapp-app')
root1 = getShadowRoot(host1)

host2 = driver.find_element_by_tag_name('vaccinapp-shell')
root2 = getShadowRoot(host2)

host3 = driver.find_element_by_tag_name('appointment-shell')
root3 = getShadowRoot(host3)

host4 = driver.find_element_by_tag_name('appointment-onboarding')
root4 = getShadowRoot(host4)

host5 = driver.find_element_by_tag_name('mwc_button')
root5 = getShadowRoot(host5)

btn_pedircita = root5.find_element_by_css_selector('#button')
btn_pedircita.click()

This is the error:

Traceback (most recent call last):
  File "h:\Programacion\Python\VacunaCOVID\main.py", line 20, in 
    root1 = getShadowRoot(host1)
  File "h:\Programacion\Python\VacunaCOVID\main.py", line 9, in getShadowRoot
    shadow_root = driver.execute_script("return arguments[0].shadowRoot", host)
  File "C:\Users\Alexis\AppData\Local\Programs\Python\Python39\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 634, in execute_script
    return self.execute(command, {
  File "C:\Users\Alexis\AppData\Local\Programs\Python\Python39\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 321, in execute
    self.error_handler.check_response(response)
  File "C:\Users\Alexis\AppData\Local\Programs\Python\Python39\lib\site-packages\selenium\webdriver\remote\errorhandler.py", line 242, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.JavascriptException: Message: Cyclic object value

This is the HTML:

Any suggestions? Thanks a lot!

user_5977613 · Answer

I somehow figured out how to do it. This is the code for getting the button:

host1 = driver.find_element_by_tag_name('vaccinapp-app')
root1 = getShadowRoot(host1)

host2 = root1.find_element_by_tag_name('vaccinapp-shell')
root2 = getShadowRoot(host2)

host3 = root2.find_element_by_tag_name('appointment-shell')
root3 = getShadowRoot(host3)

host4 = root3.find_element_by_tag_name('appointment-onboarding')
root4 = getShadowRoot(host4)

host5 = root4.find_element_by_tag_name('mwc-button')
root5 = getShadowRoot(host5)

btn_pedircita = root5.find_element_by_tag_name('button')
btn_pedircita.click()

Now, any suggestions on how to improve/simplify this code? I don't really like repeating all those lines.

How do I click a button inside shadow-root element?

1 Answers