Selenium cannot find element in webpage

Question

I am having some trouble trying to automate some web inputs, but first i need to click some buttons and i cannot do it. I've tried a lot of stuff but i cannot complete it :'(

webpage: https://vacunacovid.catsalut.gencat.cat/

I cannot go past the image the code i have:

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

# browser config
options = webdriver.ChromeOptions()
options.add_argument('--start-maximized')
options.add_argument('--disable-extensions')
driver_path= "/C:/chromedriver_linux64/chromedriver" # este es el driver del navegador https://chromedriver.chromium.org/
driver = webdriver.Chrome(driver_path,chrome_options=options)

#starting screen in optimal position
driver.set_window_position(2000,0)
driver.maximize_window()
time.sleep(1)

#getting website
driver.get("https://vacunacovid.catsalut.gencat.cat/")

#go to the element if its clickable
WebDriverWait(driver, 5)\
    .until(EC.element_to_be_clickable((By.XPATH, BLABLABLA)))\
    .click()

it doesn't find anything throwugh this #shadow (open) , how can i do it? https://i.stack.imgur.com/it2nQ.png

Answer 1

It is under Shadow-dom #shadow-root (open) So you have not mentioned exactly which button you want to click, so I'm clicking on the first button Demana o modifica cita

#adding some wait for application to load properly
sleep(5)

You just take the JS path of the desire element as below and return the element for that

press F12->Element Tab -> right click(on the element)->copy JS path

javascript = 'return document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-onboarding").shadowRoot.querySelector("#dismiss-btn").shadowRoot.querySelector("#button")'

By using execute_script will access the element under shadow-root (open)

element = driver.execute_script(javascript)
element.click()

code

options = webdriver.ChromeOptions()
options.add_argument('--start-maximized')
options.add_argument('--disable-extensions')
driver_path= "/C:/chromedriver_linux64/chromedriver" 
driver = webdriver.Chrome(driver_path,chrome_options=options)

#starting screen in optimal position
driver.set_window_position(2000,0)
driver.maximize_window()
time.sleep(1)

#getting website
driver.get("https://vacunacovid.catsalut.gencat.cat/")
sleep(5)
javascript = 'return document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-onboarding").shadowRoot.querySelector("#dismiss-btn").shadowRoot.querySelector("#button")'
element = driver.execute_script(javascript)
element.click()

For reference check here