python/selenium：如何访问shadow-root（shadow DOM）下插槽中的按钮元素？

Question

我是 Shadow DOM 的新手，希望能在这里得到帮助。非常感谢！

链接是：wertpapiere.ing.de/ 问题出在点击按钮接受cookie。

编码直到找到此按钮的影子根：

baseurl='https://wertpapiere.ing.de'
driver = webdriver.Chrome()
driver.get(baseurl)
locB = driver.find_element(By.XPATH, "//*[starts-with(@id, 'dialogContent')]")
shadowrootB = driver.execute_script("return arguments[0].shadowRoot", locB)
locC=shadowrootB.find_element(By.CSS_SELECTOR,'ing-cc-button-6610.cc-l0__button__accept') #ok
shadowrootC = driver.execute_script("return arguments[0].shadowRoot", locC) #ok

在这个影子根下，插槽可以位于： b=shadowrootC.find_element('id','button-btg1c3gu3c') #OK

<!---->       <slot name="icon-before"></slot>       <div class="button-content" id="button-btg1c3gu3c"><slot></slot></div>       <slot name="icon-after"></slot>       <slot name="_button"></slot>     <!----> <button tabindex="-1" aria-hidden="true" slot="_button" type="submit"></button>

对于按钮，从 chrome 复制：

 css:

ing-cc-button-6610.cc-l0__button__accept > 按钮

xpath:

//*[@id="dialogContent-sjk4n7c2qu"]//ing-cc-button-6610[1]/button

bt=shadowrootC.find_element('xpath','//*[@id="dialogContent-sjk4n7c2qu"]//ing-cc-button-6610[1]/button') #NOK
bt=shadowrootC.find_element(By.CSS_SELECTOR,'ing-cc-button-6610.cc-l0__button__accept > button') #NOK
bt=shadowrootC.find_element(By.TAG_NAME, 'button') #NOK

然后我看到在这个影子根之上，同一级别有另一个并行的影子根，其中有

的 iframe。这里面有什么关系吗？

如何使用 click() 访问此按钮？ 此外，有关 Shadow-root/iframe 和 Shadow-root/slot/button 的任何解释都可能有助于更好地理解

你不需要去第二级影子根，第一级就足够了。

只需等待同意模式存在，进入第一级影子根（就像你所做的那样，没关系），然后单击带有定位器

[type=button]

的元素，这是按钮容器的根定位器。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions

baseurl = 'https://wertpapiere.ing.de'
driver = webdriver.Chrome()
wait = WebDriverWait(driver, 10)
driver.get(baseurl)
locB = wait.until(expected_conditions.presence_of_element_located((By.XPATH, "//*[starts-with(@id, 'dialogContent')]")))
shadowrootB = driver.execute_script("return arguments[0].shadowRoot", locB)
locC = shadowrootB.find_element(By.CSS_SELECTOR, '[type=submit]').click()
wait.until(expected_conditions.staleness_of(locB))

Answer 1

你不需要去第二级影子根，第一级就足够了。

只需等待同意模式存在，进入第一级影子根（就像你所做的那样，没关系），然后单击带有定位器

[type=button]

的元素，这是按钮容器的根定位器。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions

baseurl = 'https://wertpapiere.ing.de'
driver = webdriver.Chrome()
wait = WebDriverWait(driver, 10)
driver.get(baseurl)
locB = wait.until(expected_conditions.presence_of_element_located((By.XPATH, "//*[starts-with(@id, 'dialogContent')]")))
shadowrootB = driver.execute_script("return arguments[0].shadowRoot", locB)
locC = shadowrootB.find_element(By.CSS_SELECTOR, '[type=submit]').click()
wait.until(expected_conditions.staleness_of(locB))