Capybara在JS模式中填补麻烦

让我首先确认这不是重复（因为那里发布的答案没有解决我的问题）。 这篇文章基本上是我的确切问题：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: '[e-mail]' 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: '[e-mail]' ）
• 在描述中有和没有type: :feature和js: true哈希
• 在within_frame上有和没有within_frame调用
• 试图通过css找到输入（例如， page.find('.emailInput input').set('[e-mail]' ）
• 添加一个within块： within('.panel') do Unable to find css ".panel" within('.panel') do表单输入（失败， Unable to find css ".panel" ）
• 在上一步之前添加一个sleep 3 ，以防它过早地寻找那个div（失败， Unable to find css ".panel" ）
• 添加一个调用find （以及page.find ）并将表单操作作为一个块传递（有和没有嵌套在find块中的within块）：

 Capybara.within_frame 'stripe_checkout_app' do page.find('.panel') do fill_in 'Email', with: '[e-mail]' ... end end 

我也和恶作剧家一起尝试过。

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

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

编辑

我还尝试在其中粘贴binding.pry并使用pry gem进行调试。 页面的HTML在模态加载的点上是几个元素，然后是脚本标签，动态地将JS插入到iframe的头部。 在命中binding.pry的位置查看DOM的此屏幕截图（在使用Stripe表单打开模式窗口之后）：

所以

显然在那里，但是page.has_selector?('.emailInput')在page.has_selector?('.emailInput')控制台中返回false。

这是一个GitHub的要点，当我从Capybara.within_frame 'stripe_checkout_app' do绑定打印page.html作为Capybara.within_frame 'stripe_checkout_app' do之后的下一行时会发生Capybara.within_frame 'stripe_checkout_app' do 。 也就是说，这是Capybara观点的标记，这与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

我无法在Stripe的演示结帐页面上重现此问题。

 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: '[e-mail]' # 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 

Answer 2

没有50个回复评论，但是，你试过在水豚上添加一些等待时间，所以模态有时间完全加载，我遇到类似的问题使用testcafe并给它2-3秒等待时间做了伎俩。

Answer 3

只是在这里抛出一个想法，因为我一直坚持这些小的特殊问题并且知道它们是多么令人沮丧……一旦我试图让Capybara点击Twitter Bootstrap模式对话框上的“关闭”按钮框。 事实certificate，为了让它工作，我不得不将Bootstrap模态html代码包含在“form”标签中，然后Capybara能够找到它。 我想知道这样的问题是不是你的问题？

Answer 4

Capybara fill_in使用css ID而不是类。 例

您可能还必须使用而不是

Answer 5

使用窗口切换方法尝试使用Poltergeist

https://github.com/jonleighton/poltergeist#window-switching

 stripe = page.driver.window_handles.last page.within_window stripe do fill_in "Email", :with => "[e-mail]" 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 

我在这个西class牙博客中找到了解决方案： numerica latina 。