如何点击iframe中的PayPal按钮？Cypress实现遇报错求助

问题描述 #

开发中使用Cypress操作iframe内的PayPal按钮，通过自定义getIframeBody命令获取iframe body后，查找#paypal-animation-container元素点击未成功，相关截图如下：

• 页面截图：
• iframe body截图：

使用的代码：

cy.getIframeBody('iframe').find('#paypal-animation-container').click()

// command.js
Cypress.Commands.add('getIframeBody', (iframe) => {
    return cy.get(iframe).then($iframe => {
      const $body = $iframe.contents().find('body')
      cy.wrap($body)
    })
  })

解决方案 #

1. 修正自定义命令，确保iframe加载完成 #

原命令未等待iframe完全加载，可添加load事件监听，保证iframe内容加载完毕后再获取body：

Cypress.Commands.add('getIframeBody', (iframeSelector) => {
  return cy.get(iframeSelector)
    .should('be.visible')
    .then($iframe => {
      // 等待iframe加载完成
      return new Cypress.Promise(resolve => {
        $iframe.on('load', () => {
          resolve($iframe.contents().find('body'))
        })
        // 如果iframe已经加载完成，直接返回
        if ($iframe[0].readyState === 'complete') {
          resolve($iframe.contents().find('body'))
        }
      })
    })
    .then($body => cy.wrap($body))
})

2. 使用精确的iframe选择器 #

如果页面存在多个iframe，iframe选择器可能选中错误目标，建议根据PayPal iframe的特征（比如src包含paypal）定位：

cy.getIframeBody('iframe[src*="paypal"]')
  .find('#paypal-animation-container')
  .should('be.visible')
  .click()

3. 确保元素可交互 #

PayPal按钮需完全渲染后才能点击，添加断言保证元素状态：

cy.getIframeBody('iframe[src*="paypal"]')
  .find('#paypal-animation-container')
  .should('be.visible')
  .should('be.enabled')
  .click()

若元素被临时遮挡，可强制点击（优先排查遮挡原因，不建议长期使用）：

cy.getIframeBody('iframe[src*="paypal"]')
  .find('#paypal-animation-container')
  .click({ force: true })

4. 关闭跨域安全限制 #

PayPal iframe属于跨域资源，Cypress默认会限制跨域操作，需在cypress.config.js中配置：

module.exports = defineConfig({
  e2e: {
    chromeWebSecurity: false,
    // 其他配置项...
  },
})

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