I am not able to interact with an Element that is inside a #shadow-root and has an tag on it</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2021-05-05T18:00:08.830" class="fromnow">May 05 '21 at 18:00</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2021-11-06T07:01:06.153" datetime="2021-11-06T07:01:06.153">Nov 06 '21 at 07:01</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 598 times"> <span class="fc-light mr2">Viewed</span> 598 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="67406487" data-ownerid="14202850" data-score="-1"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="67406487"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-1">-1</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p><a class="external-link" href="https://i.stack.imgur.com/hqs7m.png" rel="nofollow noreferrer">Page source: </a></p> <p>I am using selenium with java. To access the shadow-root, I am using JavascripExecutor (document.shadowRoot.querySelector)</p> <p>I am able to interact with other elements inside of the page. but I am not able to get inside of this iframe and paste what I want over the text box.</p> <p>this is how I am interacting with other elements :</p> <p>WebElement selectSubError1 = (WebElement) jsExecutor.executeScript("return document.querySelector"); ((JavascriptExecutor) browser).executeScript("arguments[0].click();", selectSubError1);</p> <p>please if you know the resolution of it, comment bellow.</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/selenium" class="post-tag js-gps-track" title="show questions tagged 'selenium'" rel="tag">selenium</a> <a href="../../questions/tagged/selenium-webdriver" class="post-tag js-gps-track" title="show questions tagged 'selenium-webdriver'" rel="tag">selenium-webdriver</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/shadow-dom" class="post-tag js-gps-track" title="show questions tagged 'shadow-dom'" rel="tag">shadow-dom</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 05 '21 at 18:00">asked May 05 '21 at 18:00</time> <a href="../../users/14202850/gilson-souza" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/14202850.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Gilson Souza " /> </a> <div class="s-user-card--info"> <a href="../../users/14202850/gilson-souza" class="s-user-card--link">Gilson Souza </a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingbronze" title="3 bronze badges">3</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="67407321"></a> <div id="answer-67407321" class="answer " data-answerid="67407321" data-ownerid="1387701" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="67407321"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>you need to switch to the iframe as if it's a separate window:</p> <p><a class="external-link" href="https://www.guru99.com/handling-iframes-selenium.html" rel="nofollow noreferrer">https://www.guru99.com/handling-iframes-selenium.html</a></p> <pre><code>driver.switchTo().frame("a077aa5e"); </code></pre> <p>More iframe details: <a href="../../a/67383631#67383631">https://stackoverflow.com/a/67383631/1387701</a></p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered May 05 '21 at 19:03">answered May 05 '21 at 19:03</time> <a href="../../users/1387701/dmart" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1387701.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="DMart" /> </a> <div class="s-user-card--info"> <a href="../../users/1387701/dmart" class="s-user-card--link">DMart</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,401</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="14 silver badge">14</li> <li class="s-award-bling s-award-bling__bronze" title="19 bronze badge">19</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-67407321" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="67407321" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-119181202" class="comment js-comment " data-comment-id="119181202" data-comment-owner-id="14202850" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment119181202_67407321"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Hi, thank you, but that is not the problem. Please open the link where it says "Page Source" to see the picture of my code. The problem is to switch to the frame inside shadow root. it is not a normal frame. Change between frames I am already aware.</span> – <a href="../../users/14202850/gilson-souza" title="1 reputation" class="comment-user owner">Gilson Souza </a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/67406487/i-am-not-able-to-interact-with-an-element-that-is-inside-a-shadow-root-and-has#comment119181202_67407321"><span title="2021-05-07T00:25:54.707 License: CC BY-SA 4.0" class="relativetime-clean">May 07 '21 at 00:25</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="69862039"></a> <div id="answer-69862039" class="answer " data-answerid="69862039" data-ownerid="10864627" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="69862039"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>use selector hub plug in for the browser. It will save lot's of time. I had a similar situation. iframe inside shadow-root.</p> <p>CSS selector will help you to resolve this, try this plug-in it will save allot of time.</p> <p><a class="external-link" href="https://chrome.google.com/webstore/detail/selectorshub-xpath-plugin/ndgimibanhlabgdgjcpbbndiehljcpfh" rel="nofollow noreferrer">https://chrome.google.com/webstore/detail/selectorshub-xpath-plugin/ndgimibanhlabgdgjcpbbndiehljcpfh</a></p> <pre><code>//This Element is inside single shadow DOM. String cssSelectorForHost1 = "html > div:nth-child(1)"; Thread.sleep(1000); WebElement shadowDomHostElement = driver.findElement(By.cssSelector("html > div:nth-child(1)")); WebElement last = (WebElement) ((JavascriptExecutor) driver).executeScript("return arguments[0].shadowRoot", shadowDomHostElement); Thread.sleep(1000); driver.switchto().form(last.findElement(By.cssSelector(".ra-move-in.ra-new-in.ra-flag-in.ra-shown.ra-pin-ac"))); </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 06 '21 at 07:01">answered Nov 06 '21 at 07:01</time> <a href="../../users/10864627/maheshkumar-palled" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/10864627.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Maheshkumar Palled" /> </a> <div class="s-user-card--info"> <a href="../../users/10864627/maheshkumar-palled" class="s-user-card--link">Maheshkumar Palled</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-bling__bronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>