How to interact with the elements inside iframe. But iframe is within two shadow DOM's in cypress

user_13653327 0
Viewed 55

I am unable to interact with elements inside shadow DOM and iframe. Attached is the HTML document snippet. I am using cypress here. I am directly interacting with the second shadow DOM and then the iframe.

My cypress code

cy.get('formbuilder-mainpage').should(e => {
  console.log(e)
  const [dom] = e.get()
  console.log(dom)
  dom.shadowRoot.querySelector().getIframe('iframe').find('New Organization').click()

})

HTML Doc

shadow-dom cypress automated-tests iframe javascript
2 Answers

In your cypress config file, add includeShadowDom: true, this will make sure that all the cypress commands will automatically traverse Shadow DOMS.

For iFrame's I owuld suggest you use the plugin cypress-iframe plugin.

cy.iframe('iframe').('elmeent-selector').click()
user_45712710

Using Cypress commands, the following could be your test.

First, .notification-toast is a toat popup, which will be animated so include the .layout-wrapper below it and Cypress will wait for animation to finish.

it('test deeply nested shadow DOM', () => {

  cy.get('main .notification-toast .layout-wrapper')           
    .shadow()                                              // 1st shadow
    .find('formbuilder-mainpage')
    .shadow()                                              // 2nd shadow
    .getIframe('iframe')
    .find('New Organization')
    .click()
})
user_169977070
Related