水豚麻烦填写JS模式 [英] Capybara trouble filling in JS modal

问题描述

让我首先确认这不是重复的内容（因为在那里发布的答案不能解决我的问题）。 是GitHub当我在 Capybara.within_frame'stripe_checkout_app'执行 page.html 作为下一行的打印内容时的要点c>。 这是从Capybara的角度来看的标记，与DOM截然不同，如实际的DOM的屏幕截图显示在屏幕上，如上图所示。 ，在Capybara看到的标记中没有任何输入或任何可用的东西。

更新

这里是包含以下内容的表单的标记执行模式的JS。 （标记以haml为单位）。

 ％form {操作： / charge？amount = 1400，方法： post，类： 'payment'，id：'十四'} 
％商品
％label.amount 
％span金额：$ 14.00 
 
 .stripejs＃button-one 
％script {src：'https://checkout.stripe.com/checkout.js'，类：'stripe-button'，：''data-key'=> settings.publishable_key ，：数据名称 => 慢咖啡，：数据描述 => ’2 8盎司。包（每2个月），：：数据运输地址 => true} 
  

解决方案

我无法针对< a href = https://stripe.com/docs/checkout rel = nofollow>条纹的演示结帐页面。

  require capybara 
 
 sess = Capybara :: Session.new（：selenium）
 sess.visit（ https://stripe.com/docs/checkout ）
 sess.click_button（'用卡付款'）
 sess.within_frame（'stripe_checkout_app'）做
 sess.fill_in'电子邮件'，其中：'[e-mail]'＃是可见该字段被填充为
 sleep 3＃只是为了检查手动
结束
  

您描述的问题是因为有两个名为 stripe_checkout_app 的iframe。 within_frame 查找其中第一个不包含计费字段的对象。要查找第二个iframe，您可以执行以下操作：

  stripe_iframe = all（'iframe [name = stripe_checkout_app]'）。last 
 inside_frame stripe_iframe做
＃您的代码在这里
结束
  

Let me start by confirming that this isn't a duplicate (in that the answers posted there didn't fix my problem). This post is essentially my exact problem: Capybara can't find the form fields in the Stripe modal to fill them in.

Here's my Capybara spec:

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

The text in that spec is my most recent attempt. The Capybara error is Unable to find field "Email".

What I've tried

• This most recent attempt at filling in the field by placeholder text as suggested here
• Finding the email field by the name attribute (e.g., fill_in 'email', with: '[e-mail]')
• With and without the type: :feature and js: true hashes in the describe
• With and without the within_frame call on Capybara
• Trying to find the input by css (e.g., page.find('.emailInput input').set('[e-mail]')
• Adding a within block: within('.panel') do around the form inputs (fails with Unable to find css ".panel")
• Adding a sleep 3 before the previous step in case it's looking for that div too early (fails with Unable to find css ".panel")
• Adding a call to find (and also page.find) and passing the form manipulation as a block (with and without a within block nested in the find block):

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

I've also tried this with poltergeist.

What's maddening about this is that I've changed the Capybara driver from poltergeist back to selenium/Firefox and I can physically see the driver opening the page, clicking the button and bringing up the modal.

Any thoughts on how to get Capybara to interact with this form?

Edit

I also tried sticking a binding.pry in there and debugging with the pry gem. The page's HTML at the point that the modal loads is a few elements, and then script tags that dynamically insert JS into the head of the iframe. See this screenshot of the DOM at the point where the binding.pry is hit (after the modal window opens with the Stripe form):

So that <div class="emailInput"> is clearly in there, but page.has_selector?('.emailInput') returns false in the pry console.

Here is a GitHub gist of what happens when I print page.html from the pry binding as the next line after Capybara.within_frame 'stripe_checkout_app' do. That is, this is the markup from Capybara's perspective, and this varies wildly from the DOM as shown in the screenshot of the DOM of the actual form when it appears on screen, shown above. As you can see, there are no inputs or anything to work with in the markup that Capybara sees.

Update

Here is the markup for the form that contains the JS that executes the modal. (Markup is in 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 }

解决方案

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

这篇关于水豚麻烦填写JS模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！