如何与iframe内部的元素进行交互。但是iframe在柏树中的两个阴影dom＆＃

发布于 2025-02-12 18:10:26 字数 406 浏览 0 评论 0原文

我无法与Shadow Dom和Iframe内部的元素进行交互。附件是HTML文档片段。我在这里使用柏树。我直接与第二个阴影DOM和IFRAME进行互动。

我的柏树代码

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()

})

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

坦然微笑 2025-02-19 18:10:26

在您的柏树配置文件中，添加includeShadowdom：true，这将确保所有柏树命令都将自动遍历Shadow doms。

对于iframe的我，我建议您使用插件 cypress-frame-iframe plugin。

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

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()

回复收藏 0 原文

棒棒糖 2025-02-19 18:10:26

使用柏树命令，以下可能是您的测试。

首先，.notification-toast是一个toat弹出窗口，它将是动画的，因此在其下方包括.layout-wrapper，柏树将等待动画完成。

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()
})

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()
})

回复收藏 0 原文

~没有更多了~