No puedo interactuar con elementos dentro de shadow DOM e iframe. Se adjunta el fragmento de documento HTML. Estoy usando ciprés aquí. Estoy interactuando directamente con el segundo shadow DOM y luego con el iframe.
Mi código de ciprés
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() })
En su archivo de configuración de Cypress, agregue includeShadowDom: true , esto asegurará que todos los comandos de Cypress atravesarán automáticamente Shadow DOMS.
Para iFrame, le sugiero que use el complemento cypress-iframe .
cy.iframe('iframe').('elmeent-selector').click()Usando los comandos de Cypress, lo siguiente podría ser su prueba.
En primer lugar, .notification-toast es una ventana emergente toat, que se animará, por lo que debe incluir el .layout-wrapper debajo y Cypress esperará a que finalice la animación.
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() })