如何在Cypress中处理iframe？执行测试遇属性不存在错误求助

错误原因 #

你当前代码中定位的#example-1-tab-2是一个div容器元素，而非iframe标签。只有iframe元素才具备contentDocument属性，因此Cypress无法在div上找到该属性，导致超时报错。

修正后的测试代码 #

describe('Frontend tasks', ()=>{
  it('First Task',()=>{
    cy.visit('https://way2automation.com/way2auto_jquery/alert.php#load_box')
    
    // 切换到Input Alert标签页
    cy.contains('Input Alert').click()
    
    // 定位标签页内的iframe，等待其加载完成
    cy.get('#example-1-tab-2 iframe')
      .should('be.visible')
      .its('0.contentDocument.body')
      .should('not.be.empty')
      .then(body => {
        // 在iframe内部定位目标按钮并点击
        cy.wrap(body).contains('Click the button to demonstrate the input box').click()
      })
  })
})

关键修正点 #

• 修正iframe定位：将原代码中的cy.get('#example-1-tab-2')改为cy.get('#example-1-tab-2 iframe')，确保定位到真正的iframe元素。
• 等待iframe加载：通过.should('be.visible')和.should('not.be.empty')断言，确保iframe内容完全加载后再执行后续操作，避免因内容未加载完成导致的元素找不到问题。
• 操作iframe内部元素：通过cy.wrap(body)将iframe的body对象转换为Cypress可操作的对象，之后即可正常定位并点击内部按钮。

内容的提问来源于stack exchange，提问作者Vasile Valcan