javascript - Cypress - 如何在 iframe 中的元素之间切换

Question

我正在尝试使用 cypress 与 iframe 中的某些元素进行交互。如果我使用 https://bparkerproductions.com/how-to-interact-with-iframes-using-cypress-io/ 中的方法每次测试只有一个元素，一切都很好。

# commands.js
Cypress.Commands.add(
    'iframe',
    { prevSubject: 'element' },
    ($iframe) => {
        return new Cypress.Promise(resolve => {
            $iframe.on('load', () => {
                resolve($iframe.contents().find('body'))
            })
        })
    })


# landing_page.spec.js    
cy.get('iframe').iframe().find('#happybutton').should('be.visible')

但是，我想查找多个元素，单击它们并检查它们是否正确呈现，但是如果我将 iframe 内容分配给一个变量并重新使用它来定位另一个元素(例如，一个按钮)， cypress 尝试从第一个元素(按钮)定位第二个元素(例如菜单)，这注定会失败，因为按钮不包含菜单。

# landing_page.spec.js  
let iframeContent = cy.get('iframe').iframe()
iframeContent.find('#happybutton').should('be.visible')
iframeContent.find('#myMenu').should('be.visible')

我尝试使用不同的变量，或者直接调用 cy.get('iframe').iframe()，每次我想与不同的元素交互时，但 cypress 陷入了无限循环并且测试永远不会结束(但不会产生错误或警告)。

有人知道避免这种无限循环的方法吗？由于我想重现构建测试用例的一系列步骤，因此不可能在不同的测试中隔离每个交互。

或者有人知道更适合使用 iframe 的框架吗？

Answer 1

问题是$iframe.on('load',只触发一次，所以你不能调用 cy.get('iframe').iframe()两次这实际上是两者.find()命令正在执行。

let iframeContent = cy.get('iframe').iframe()不存储 iframe 主体，它存储一个被视为函数或 getter 的“chainer”。

“无限循环”是 Cypress 等待 promise resolve() 第二次调用，但这种情况从未发生过。

所以你可以像这样嵌套命令

cy.get('iframe').iframe().then(body => {

  cy.wrap(body).find('#happybutton').should('be.visible')
  cy.wrap(body).find('#myMenu').should('be.visible')

});

或者您可以通过在加载事件触发时添加标签来增强命令

Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe) => {
  return $iframe._hasloaded 
    ? $iframe.contents().find('body')
    : new Cypress.Promise(resolve => {
        $iframe.on('load', () => {
          $iframe._hasloaded = true;
          resolve($iframe.contents().find('body'))
        })
      })
  })