Rails Capybara系统测试中如何向Stripe元素输入测试卡数据

两次触发Capybara::ElementNotFound报错的核心原因是Stripe Elements的输入框全部托管在Stripe域名下的独立iframe中，Capybara默认的元素查找范围只在当前站点的主DOM树内，不会自动跨进iframe查找元素。
你写的CardNumberField-input-wrapper节点确实存在于主页面DOM中，但这个节点内部嵌套的是Stripe的加载容器，真实的卡号input标签完全在容器内嵌的iframe里，在外层DOM里不管怎么调整选择器、怎么加点击激活逻辑，都不可能定位到可交互的真实输入框。

Capybara提供了within_frame方法用来切换到iframe上下文执行操作，针对Stripe Elements的输入场景，按以下逻辑实现即可：

1. 先通过iframe的title属性定位到对应字段的Stripe iframe（Stripe每个输入字段对应独立iframe，title属性和字段语义强绑定，兼容性最好）
2. 切换进iframe上下文后，直接用常规的fill_in方法填充对应字段即可，不需要额外写点击激活逻辑，fill_in会自动处理聚焦。

可直接复用的代码示例 #

# 填充测试卡号
within_frame find('iframe[title*="card number"]') do
  fill_in 'Card number', with: '4242424242424242'
end

# 填充卡片有效期（格式为月/年，直接连写即可，Stripe会自动加空格/斜杠分隔）
within_frame find('iframe[title*="expiration date"]') do
  fill_in 'MM / YY', with: '1234'
end

# 填充CVC安全码
within_frame find('iframe[title*="CVC"]') do
  fill_in 'CVC', with: '123'
end

# 填完所有字段后自动回到主页面上下文，点击提交支付按钮即可
click_button '提交支付'

• 选择iframe时用title*=模糊匹配是为了兼容不同Stripe版本、不同语言环境下title文案的细微差异，比精确匹配稳定性高很多
• 如果你用的是旧版单iframe的Stripe卡组件（所有卡字段放在同一个iframe内），只需要定位title包含"Secure card payment input frame"的iframe，进一次上下文填完所有字段即可
• 测试时必须使用Stripe官方测试卡数据，不要随意编造卡号，否则会触发Stripe的卡校验逻辑导致支付流程走不通
• 不需要额外写模拟键盘逐字输入、点击外层容器之类的冗余逻辑，切对iframe上下文后常规Capybara操作完全生效

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