如何在Cypress中点击iframe内的按钮以完成注册流程

原生实现（无需第三方依赖） #

首先在cypress/support/commands.js中添加自定义命令，用于获取iframe的可操作body节点：

Cypress.Commands.add('getIframeBody', (iframeSelector) => {
  return cy.get(iframeSelector)
    // 校验iframe加载完成，body非空
    .its('0.contentDocument.body')
    .should('not.be.empty')
    // 将DOM节点包装为Cypress可操作对象
    .then(cy.wrap)
})

之后在测试用例中直接调用该命令，查找目标按钮点击即可，示例代码如下（需要替换为你实际的iframe选择器、按钮选择器）：

// 示例iframe选择器为#register-frame，按钮选择器为.register-submit-btn
cy.getIframeBody('#register-frame')
  .find('.register-submit-btn')
  .should('be.visible')
  .click()

常见问题适配 #

• 若按钮被遮挡、Cypress判定不可交互，可添加强制点击参数：.click({ force: true })
• 若为跨域iframe，需在cypress.config.js中添加配置关闭同源校验：

  module.exports = defineConfig({
    e2e: {
      chromeWebSecurity: false
    }
  })
  

• 若iframe加载较慢，可给获取iframe的步骤增加超时配置：cy.get('#register-frame', { timeout: 10000 })

内容的提问来源于stack exchange，提问作者Krupal Vaghasiya