Cypress 12.12.0无法获取Stripe支付弹窗iframe的body元素

核心原因 #

$iframe.contents()返回空值，主要是因为Stripe跨域iframe虽被成功获取元素，但内部文档尚未完全加载，或是直接用jQuery方法处理iframe内容的逻辑，不符合Cypress的异步操作机制。

解决方案 #

1. 确认跨域安全配置 #

在cypress.config.js中确保已禁用Chrome安全策略，这是处理跨域iframe的必要前提：

const { defineConfig } = require('cypress');

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

2. 等待iframe内容加载完成后操作 #

不要直接获取iframe后立即调用contents()，需先等待内部文档加载完成，再用Cypress的cy.wrap将内容转为可操作对象：

cy.get('iframe[title="Secure card payment input frame"]', { timeout: 15000 })
  // 等待iframe内部文档加载完成
  .its('0.contentDocument.readyState')
  .should('eq', 'complete')
  // 获取iframe的body并转为Cypress可操作对象
  .then(() => cy.get('iframe[title="Secure card payment input frame"]').its('0.contentDocument.body'))
  .then(cy.wrap)
  // 定位Stripe卡号输入框（选择器需根据实际DOM调整）
  .find('input[data-stripe="number"]')
  .type('4242424242424242');

3. 替代方案：直接操作iframe的contentWindow #

若上述方法无效，可直接访问iframe的contentWindow来获取文档：

cy.get('iframe[title="Secure card payment input frame"]').then($iframe => {
  const iframeWindow = $iframe[0].contentWindow;
  // 等待iframe窗口加载完成
  cy.wrap(iframeWindow).should('have.property', 'document')
    .then(doc => cy.wrap(doc.body))
    .find('input[name="cardnumber"]') // 适配实际输入框选择器
    .type('4242424242424242');
});

注意事项 #

• Stripe支付输入框的选择器可能随版本变化，建议通过浏览器开发者工具确认实际属性（如data-stripe、name或类名）。
• 适当延长超时时间（如设置为15000ms），确保跨域iframe有足够时间加载内容。

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