Ruby 在JS模式中填充水豚故障

让我首先确认这不是重复的（因为在那里发布的答案并没有解决我的问题）。本质上就是我的问题：水豚无法在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

该规范中的文本是我最近的尝试水豚错误是

无法找到字段“Email”

我试过的

• 这是最近一次按建议用占位符文本填充字段的尝试
• 通过名称属性查找电子邮件字段（例如，

  在“email”中填入：'example@example.com“

  ）
• 使用和不使用

  type:：feature

  和

  js:true

  散列来描述

• 有无

  在_框架内

  调用

  水豚

• 试图通过css查找输入（例如，

  page.find（'.emailInput'）.set（'example@example.com“

  ）
• 在块中添加

  ：（'.panel'）中的
  围绕表单输入执行
  （由于
  无法找到css.panel“
  而失败）

• 在上一步之前添加一个

  sleep3

  ，以防它过早地查找该div（由于

  无法找到css.panel“

  而失败）
• 添加对

  find

  （以及

  page.find

  ）的调用，并将表单操作作为块传递（在

  find

  块中嵌套的

  块中有无
  ）：

我也试过这一点

令人恼火的是，我将水豚驱动程序从poltergeist改回selenium/Firefox，我可以看到驱动程序打开页面，单击按钮并打开模式

关于如何让水豚与这种形式互动有什么想法吗

编辑 我还尝试在其中粘贴一个

binding.pry

，并在模式加载的点使用.HTML进行调试，然后在iframe的头部动态插入JS的脚本标记。在点击

binding.pry

的点查看DOM的屏幕截图（在模式窗口以条带形式打开后）：

因此，

显然在那里，但是

page.has_selector？（'emailInput'）

在pry控制台中返回false

GitHub是我从pry binding打印

page.html

时发生的事情的要点，作为

Capybara之后的下一行。在_框架内“stripe\u checkout\u app”do

也就是说，这是从Capybara的角度来看的标记，这与实际表单的DOM屏幕截图中显示的DOM差异很大屏幕上的rs，如上所示。正如您所看到的，在Capybara看到的标记中没有输入或任何可处理的内容

更新 下面是表单的标记，该表单包含执行模态的JS。（标记用haml表示）

---

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

我只是在这里抛出了一个想法，因为我一直被这些小的特殊问题困扰，知道这有多令人沮丧有一次，我试图让水豚点击Twitter引导模式对话框上的“关闭”按钮。结果证明，为了让它工作，我必须将引导模式html代码封装在一个“表单”中标记，然后Capybara能够找到它。我想知道这是否是您的问题？

Capybara fill\u使用css ID而不是类。示例

---

您可能还必须使用

而不是

我无法根据复制此问题

您所描述的问题是因为有两个iframe的名称为

stripe\u checkout\u app

在\u frame

中查找不包含账单字段的第一个iframe。要查找第二个iframe，您可以执行以下操作，例如：

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

---

尝试使用窗口切换方法，使用“恶鬼”

---

我在这篇西班牙博客中找到了解决方案：。

在本文中，有一些关于如何调试水豚测试的提示。你能给我看看你想要填充的模型弹出表单的代码吗？表单HTML是由Stripe的JS动态生成的，但你可以查看表单完整标记的屏幕截图。假设你正在尝试填充…哈您是否已尝试填写（'email'）[请注意小写]；您可能还需要指定id=“email”尼克，我有一个非常相似/相同的问题，但现在甚至不能让你的解决方案为我工作。你不会碰巧有任何其他建议吗？谢谢！至少谢谢你尝试。请看我用

sleep 3

尝试的7件事。除非你尝试了另一种方法？你尝试过

页面。查找（'.checkout'））

？刚刚做了。

找不到css”。签出“

。我在

睡眠3

之后也尝试了它。我注意到水豚有一个

执行脚本的方法，但我什么都做不了。页面标记有多大的不同让我感到困惑。（参见HTML的要点。）@gimiarn1801这里有一些rep来帮助您达到50。这是一个有趣的想法。请参阅上面的haml标记。您是否建议将
脚本
标记包装在一个div中，并执行类似
查找（'div.script-container'）do
？啊，编辑响应，将负责生成模式的代码放入“表单”中tag.SOverflow隐藏了我答案的“”部分。嗯……所以你可以在我的haml中看到，
脚本
标记是一种
形式
标记。这与你的情况类似吗？是什么为你生成了模式？我的模式代码是静态HTML，与“黑客”一节中的内容类似在这篇文章中：你能使用静态HTML作为模式，看看会发生什么吗？你试过改变Capybara.default\u wait\t吗
  %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 }

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_iframe = all('iframe[name=stripe_checkout_app]').last
within_frame stripe_iframe do
  # your code here
end

stripe = page.driver.window_handles.last

page.within_window stripe do
  fill_in "Email", :with => "test@test.com"

  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