Capybara 填写 JS 模态的麻烦答案

【问题标题】：Capybara trouble filling in JS modalCapybara 填写 JS 模态的麻烦
【发布时间】：2014-04-15 15:50:29
【问题描述】：

让我首先确认这不是重复的（因为那里发布的答案没有解决我的问题）。 This post 本质上是我的确切问题：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"。

我尝试过的

这是按照建议here 用占位符文本填充字段的最新尝试
通过名称属性查找电子邮件字段（例如，fill_in 'email', with: 'example@example.com'）
describe 中有和没有 type: :feature 和 js: true 哈希
有和没有within_frame 调用Capybara
尝试通过 css 查找输入（例如，page.find('.emailInput input').set('example@example.com'）
在表单输入周围添加within 块：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: '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 是当我从 pry 绑定中打印 page.html 作为Capybara.within_frame 'stripe_checkout_app' do 之后的下一行时会发生什么的 GitHub 要点。 也就是说，这是从 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 }

【问题讨论】：

在这篇文章中，有一些调试水豚测试的技巧nofail.de/2013/10/debugging-rails-applications-in-development
您能告诉我您要填写的模型弹出表单的代码吗？
表单 HTML 由 Stripe 的 JS 动态生成，但可以查看表单right here 的完整标记截图。
假设您正在尝试填写 ...您是否尝试过 fill_in('email') [注意小写] ;您也可能需要指定 id="email"
nick，我有一个非常相似/相同的问题，但现在甚至无法让您的解决方案为我工作。你不会碰巧有任何其他建议吗？谢谢！ stackoverflow.com/questions/24081305/…

标签： ruby capybara stripe-payments

【解决方案1】：

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

【讨论】：

感谢您至少尝试。请参阅我使用sleep 3 尝试过的第 7 件事。除非你用另一种方式尝试过？
你试过page.find('.checkout') 吗？
刚刚做了。 Unable to find css ".checkout"。我也在sleep 3 之后尝试过。我注意到 Capybara 有一个 execute_script 方法，但我无法让它做任何事情。页面标记有多么不同，这让我感到困惑。（请参阅 HTML 的要点。）
@gimiarn1801 这里有一些代表可以帮助你达到 50。

【解决方案2】：

只是在这里抛出一个想法，因为我一直被这些小问题困扰并且知道它们会多么令人沮丧......曾经我只是想让 Capybara 在 Twitter 上单击“关闭”按钮引导模式对话框。事实证明，要让它工作，我必须将 Bootstrap 模态 html 代码包含在“表单”标签中，然后 Capybara 能够找到它。我想知道这样的事情是不是你的问题？

【讨论】：

这是一个有趣的想法。请参见上面的haml 标记。您是否建议将 script 标签包装在一个 div 中并执行类似 find('div.script-container') do 的操作？
啊，编辑回复说将负责生成模式的代码放在“表单”标签中。 SOverflow 隐藏了我答案的“
”部分。
嗯……所以你可以在我的haml中看到script标签在form标签中。和你的情况类似吗？是什么为您生成了模态？
我的模态代码是静态 HTML 并且类似于这篇文章中“黑客”部分下的代码：binarywebpark.com/… 你可以在模态中使用静态 HTML，看看会发生什么？您是否尝试过将 Capybara.default_wait_time 更改为超过 2 秒的时间？

【解决方案3】：

Capybara fill_in 使用 css id 而不是类。示例

<input autofocus="autofocus" class="center" id="user_login" name="user[login]" placeholder="Username/Email" type="text" >

您可能还必须使用<input> 而不是<div>

【讨论】：

fill_in 也可以使用 name 属性，我尝试过（请参阅“我尝试过的内容”，第 2 步）。
是的，但它仍在寻找 css id 对象而不是类。

【解决方案4】：

我无法针对 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

【讨论】：

Here 是 GitHub 上规范的链接。随时检查 repo 并运行规范。
顺便说一句，我认为赏金只剩下一个小时了。抱歉，如果它在您提供有效答案之前关闭。如果是这样的话，我会看看我是否可以开始另一个并奖励给你。
谢谢！刚刚评论了这个问题。
另外，我刚刚尝试了你的代码来重现，你是绝对正确的；该字段已填写！
我注意到这实例化了 Capybara::Session。我在任何地方的文档中都看不到这一点。我的spec_helper.rb 中的配置是否错误？

【解决方案5】：

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

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

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

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

【讨论】：