使用Cypress v5.4测试Braintree PayPal Drop-in时无法定位iframe

问题分析 #

自定义的getIframeBody命令失效，核心原因大概率是iframe加载时机未处理到位、选择器匹配不准确，或者跨域限制导致的。以下是针对性修复方案：

1. 修正iframe选择器，确保精准匹配 #

Braintree的hosted field iframe可能动态生成属性，先检查页面HTML中信用卡号对应的iframe实际标识（比如是否带title="Credit Card Number"这类属性），替换为更稳定的选择器：

// 修改command.js中的选择器逻辑
Cypress.Commands.add('getIframeBody', () => {
  return cy
    .get('iframe[title*="Credit Card Number"]') // 替换为页面实际匹配的选择器
    .its('0.contentDocument.body')
    .should('not.be.empty')
    .then(cy.wrap)
});

2. 优化命令逻辑，确保iframe完全加载 #

原命令仅等待body非空，但iframe本身可能未完成加载。修改命令增加加载监听：

Cypress.Commands.add('getIframeBody', () => {
  return cy.get('#braintree-hosted-field-number')
    .should('exist')
    .then($iframe => {
      // 监听iframe加载事件，确保内容就绪
      return new Cypress.Promise(resolve => {
        $iframe.on('load', () => {
          resolve($iframe[0].contentDocument.body);
        });
        // 若iframe已加载完成，直接返回
        if ($iframe[0].contentDocument.readyState === 'complete') {
          resolve($iframe[0].contentDocument.body);
        }
      });
    })
    .should('not.be.empty')
    .then(cy.wrap);
});

3. 调整测试流程，等待iframe可见后再操作 #

点击卡片选项后，直接等待目标iframe出现，而非仅等待模态框区域：

cy.get(".braintree-option.braintree-option__card")
  .should("be.visible")
  .click()

// 延长超时时间，等待iframe完全可见
cy.get('#braintree-hosted-field-number', { timeout: 10000 })
  .should('be.visible')

cy.getIframeBody()
  .find('#credit-card-number').type('4111111111111111');

4. 关闭Chrome跨域安全限制 #

Braintree的iframe属于第三方域名，Cypress默认会拦截跨域访问。在cypress.json中添加配置：

{
  "chromeWebSecurity": false
}

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