首先让我确认这不是重复的(因为那里发布的答案没有解决我的问题)。 This post本质上是我的确切问题:Capybara 无法在 Stripe 模式中找到表单字段来填写它们。

这是我的 capybara 规范:

describe 'checkout', type: :feature, js: true do
  it 'checks out correctly' do
    visit '/'
    page.should have_content 'Amount: $20.00'
    page.find('#button-two').click_button 'Pay with Card'
    Capybara.within_frame 'stripe_checkout_app' do
      fill_in 'Email', with: 'example@example.com'
      fill_in 'Name',  with: 'Nick Cox'
      fill_in 'Street', with: '123 Anywhere St.'
      fill_in 'ZIP', with: '98117'
      fill_in 'City', with: 'Seattle'
      click_button 'Payment Info'
      fill_in 'Card number', with: '4242424242424242' #test card number
      fill_in 'MM/YY', with: '02/22'
      fill_in 'CVC', with: '222'
      click_button 'Pay'
    end
    page.should have_content 'Thanks'
  end
end

该规范中的文字是我最近的尝试。 capybara 错误是Unable to find field "Email" .

我尝试过的

• 最近尝试按照建议的占位符文本填写字段 here
• 通过名称属性查找电子邮件字段(例如，fill_in 'email', with: 'example@example.com')
• 有和没有type: :feature和 js: true describe 中的哈希
• 有和没有 within_frame调用Capybara
• 尝试通过 css 查找输入(例如，page.find('.emailInput input').set('example@example.com')
• 添加 within block :within('.panel') do围绕表单输入(失败 Unable to find css ".panel" )
• 添加 sleep 3在上一步之前，以防它过早地寻找该 div(因 Unable to find css ".panel" 而失败)
• 添加对 find 的调用(还有 page.find )并将表单操作作为 block 传递(有和没有嵌套在 within block 中的 find block ):

Capybara.within_frame 'stripe_checkout_app' do
  page.find('.panel') do
    fill_in 'Email', with: 'example@example.com'
    ...
  end
end

我也用 poltergeist 试过这个。

令人抓狂的是，我已将 Capybara 驱动程序从 poltergeist 改回 selenium/Firefox，我可以亲眼看到驱动程序打开页面、单击按钮并调出模式。

关于如何让 Capybara 与此表单交互有什么想法吗？

编辑

我也试过贴一个binding.pry在那里用 pry gem 调试.模态加载时页面的 HTML 是一些元素，然后是将 JS 动态插入 iframe 头部的脚本标记。在 binding.pry 所在的位置查看 DOM 的屏幕截图被击中(在模态窗口以 Stripe 形式打开后):

所以<div class="emailInput">显然在那里，但是page.has_selector?('.emailInput')在 pry 控制台中返回 false。

Here是我打印 page.html 时发生的事情的 GitHub 要点来自 pry 绑定(bind)作为 Capybara.within_frame 'stripe_checkout_app' do 之后的下一行. 也就是说，这是从 Capybara 的角度来看的标记，它与 DOM 有很大的不同，如上图显示的实际表单的 DOM 屏幕截图所示。如您所见，在 Capybara 看到的标记中没有输入或任何可处理的内容。

更新

这是包含执行模式的 JS 的表单的标记。 (标记在 haml 中)。

  %form{ action: "/charge?amount=1400", method: 'post', class: 'payment', id: 'fourteen' }
    %article
      %label.amount
        %span Amount: $14.00

    .stripejs#button-one
      %script{ src: 'https://checkout.stripe.com/checkout.js', class:'stripe-button', :'data-key' => settings.publishable_key, :'data-name' => 'Slow Coffee', :'data-description' => '2 8oz. bags (2/month)', :'data-shipping-address' => true }

最佳答案

我无法针对 Stripe's demo checkout page 重现此问题.

require "capybara"

sess = Capybara::Session.new(:selenium)
sess.visit("https://stripe.com/docs/checkout")
sess.click_button('Pay with Card')
sess.within_frame('stripe_checkout_app') do
  sess.fill_in 'Email', with: 'test@example.com' # it's visible that field becomes filled in
  sleep 3 # just to inspect that manually
end

您描述的问题是因为有两个名为stripe_checkout_app 的iframe。 within_frame 找到其中第一个不包含账单字段的。要找到第二个 iframe，您可以执行以下操作:

stripe_iframe = all('iframe[name=stripe_checkout_app]').last
within_frame stripe_iframe do
  # your code here
end

关于ruby - Capybara 麻烦填写 JS 模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22335808/