Home > Software engineering >  How to click button inside #shadow-root (closed) using Selenium and Python
How to click button inside #shadow-root (closed) using Selenium and Python

Time:02-28

I'm trying to click button inside #shadow-root (closed), inside iframe

<iframe title="recaptcha challenge expires in two minutes" 
   <div >
      #shadow-root (closed)
         <link rel="stylesheet" href="chrome-extension://mpbjkejclgfgadiemmefgebjfooflfhl/src/solve/solver-button.css">
         <button tabindex="0" title="Solve the challenge" id="solver-button"></button>
   </div>
</iframe>

This is what I use to switch to iframe

WebDriverWait(driver, 10).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"//iframe[@title='recaptcha challenge expires in two minutes']")))

How can I click //button[@id="solver-button"]

Here are photos how it really looks

iframe-link

button-link

CodePudding user response:

host = driver.find_element(By.CSS_SELECTOR,".button-holder.help-button-holder"))
shadowRoot = driver.execute_script("return arguments[0].shadowRoot", host)
shadowRoot.find_element(By.ID,"solver-button")).click()

Grab the shadowroot element and then find the solver button.

CodePudding user response:

Your line of code to switch to the <iframe> was perfect. However, the desired element is within a #shadow-root (closed) and using Selenium you won't be able to interact with the elements within #shadow-root (closed) because as per the discussion in Shadow DOM traversal support:

  • @43081j mentioned, for closed shadow roots it should just be accepted that you can't access it (throw an exception). So, we don't need to care about closed roots as we shouldn't be able to access them anyway.
  • @AutomatedTester in his spec proposal suggested the ability to move between a Shadow DOM context and the document context.
  • Related