Cypress 如何将一个 iframe 处理成另一个 iframe答案

【问题标题】：Cypress how to deal with one iframe into another iframeCypress 如何将一个 iframe 处理成另一个 iframe
【发布时间】：2022-08-24 05:30:04
【问题描述】：

主要目标是访问输入字段并提交一些数据。问题 - 这些元素位于一个 iframe 中（我们不能在那里添加任何属性，如 id 等），它被包装到另一个 iframe 中（我能够通过 id 访问它）。顶部 iframe 可使用 cy.frameLoaded(\'#3ds-iframe\'); 访问使用 cy.frameLoaded(\'#cko-3ds2-iframe\'); 或 cy.frameLoaded(\'[name=\"cko-3ds2-iframe\"]\') 无法访问下部 iframe

提前致谢

标签： javascript iframe cypress cypress-iframe

【解决方案1】：

这是我发现的一种适用于嵌套 iframe 的方法，至少适用于非常简单的 HTML。

使用 .enter() （它是 cypress-iframe 包的一部分），在第一个 iframe 内移动。
使用同一包中的 getBody() 助手，定位第二个 iframe。
使用传统的 Cypress 命令（来自Working with iframes in Cypress）来提取嵌套 iframe 的主体。
使用 Cypress 命令.within() 将下一个命令集中在第二个 iframe 内。

cy.enter('#iframe1').then(getBody => {
  getBody().find('#iframe2')
    .its('0.contentDocument')
    .its('body').within(() => {
      // working inside nested iframe
      cy.get('div').should('contain', 'Inside iframe2')
    })
})

如果第二个 iframe 的加载时间比外部 iframe 的加载时间长，这可能需要额外的步骤。 cypress-iframe 命令只检查外框的内容，但希望内框在那个时间段内也准备好。

这是我测试的 HTML

<iframe id="iframe1" width="300" height="200" src="./iframe2.html">
  #document
  <html>
    <head></head>
    <body>
      <iframe id="iframe2" width="300" height="200" src="./iframe-content.html">
        #document
        <html>
          <head></head>
          <body>
            <div>Inside iframe2</div>
          </body>
        </html>
      </iframe>
    </body>
  </html>
</iframe>

【讨论】：