如何與 iframe 中的元素交互。 但是 iframe 在柏樹的兩個影子 DOM 內

Question

我無法與 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()

})

Answer 1

在您的 cypress 配置文件中，添加includeShadowDom: true ，這將確保所有 cypress 命令將自動遍歷 Shadow DOMS。

對於 iFrame，我建議您使用插件cypress-iframe插件。

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

Answer 2

使用賽普拉斯命令，以下可能是您的測試。

首先， .notification-toast是一個 toat 彈出窗口，它將被動畫化，因此在其下方包含.layout-wrapper ，賽普拉斯將等待 animation 完成。

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