Capybara在JS模式中填补麻烦

Question

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

这是我的水豚规格:

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".

我试过的

• 这是最近尝试通过此处建议的占位符文本填充字段
• 通过name属性查找电子邮件字段(例如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块:within('.panel') do围绕表单输入(失败Unable to find css ".panel")
• sleep 3在上一步之前添加a ,以防它过早地查找该div(失败Unable to find css ".panel")
• 添加一个调用find(以及page.find)并将表单操作作为一个块传递(有和没有within嵌套在find块中的块):

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

我也和恶作剧家一起试过这个.

令人抓狂的是我将Capybara驱动程序从poltergeist改回了selenium/Firefox,我可以看到驱动程序打开页面,单击按钮并调出模态.

有关如何让Capybara与此表单进行交互的任何想法？

编辑

我也尝试坚持binding.pry使用pry gem进行调试.页面的HTML在模态加载的点上是几个元素,然后是脚本标记,动态地将JS插入到iframe的头部.在binding.pry命中点看到DOM的这个屏幕截图(在使用条带形式打开模态窗口之后):

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

这是一个GitHub的要点,当我page.html从pry绑定作为下一行打印后会发生什么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 }

Answer 1

I can't reproduce this issue against 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

The issue described by you is because there are two iframes with name stripe_checkout_app. within_frame finds the first of them that doesn't contain billing fields. To find second iframe you can do e.g.:

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

Answer 2

没有50位代表发表评论，但是，您是否尝试过在水豚上添加一些等待时间，以便模态有时间完全加载，我遇到了一个类似的问题，使用testcafe并给了它2-3秒的等待时间来解决问题。