0
202
ViewsHow to interact with the elements inside iframe. But iframe is within two shadow DOM's in cypress
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()
})
·
Juan Pablo Isaza
2 answers
Answer question0
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()
·
Juan Pablo Isaza
Report
0
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()
})
·
Juan Pablo Isaza
Report
Answer question