iframe - cypress - 单击 iframe 元素，而 iframe 的主体在几秒钟后发生变化

Question

我在使用 cy.getIframeBody().find('#some-button') 时遇到问题#some-button 元素尚不可用，因为 iframe 仍在加载，但 body 元素不为空，因此 .find() 被触发。
这是获取 iframe 正文的自定义命令

Cypress.Commands.add('getIframeBody', ()=> {
    return cy.get('iframe.cy-external-link-container')
        .its('0.contentDocument.body')
        .should('not.empty')
        .then(cy.wrap)
});

我如何在不使用的情况下做到这一点 cy.wait() ?

Answer 1

您可以添加随机超时和 .should()断言，但如果它们完全有效，则测试可能会不稳定。
关键是重复查询body元素(这一行)

.its('0.contentDocument.body')

直到按钮出现。
所以不是

.its('0.contentDocument.body')
.should('not.empty')

但像

.its('0.contentDocument.body')
.should('have.child', '#some-button')  // force a retry on body query

.should()带回调会做到这一点

Cypress.Commands.add('getIframeBodyWithSelector', (waitForSelector) => {
  return cy.get('iframe.cy-external-link-container')
    .its('0.contentDocument.body')
    .should(body => {
      expect(Cypress.$(body).has(waitForSelector).length).gt(0)
    })
    .then(cy.wrap)
})

it('finds some button', () => {
  cy.getIframeBodyWithSelector('#some-button')
    .find('#some-button')                      // passes
})