Capybara difficulté à remplir JS modal

permettez-moi de commencer par confirmer qu'il ne s'agit pas d'un double (en ce sens que les réponses qui y sont affichées n'ont pas corrigé mon problème). Ce post est essentiellement mon problème exact: Capybara ne peut pas trouver les champs de formulaire dans le modal de bande pour les remplir.

Voici mon Capybara spec:

describe 'checkout', type: :feature, js: true do
  it 'checks out correctly' do
    visit '/'
    page.should have_content 'Amount: .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

Le texte de cette spécification est ma plus récente tentative. l'erreur Capybara est Unable to find field "Email".

Ce que j'ai essayé

• ce tentative la plus récente de remplir le champ par un texte de remplacement comme suggéré ici
• trouver le champ email par l'attribut name (e.g.,fill_in 'email', with: 'example@example.com')
• Avec et sans le type: :feature et js: true hachages dans le describe
• Avec et sans le within_frame appeler Capybara
• en Essayant de trouver l'entrée par css (par exemple, page.find('.emailInput input').set('example@example.com')
• Ajouter un within bloc: within('.panel') do autour du formulaire inputs (ne fonctionne pas avec Unable to find css ".panel")
• Ajouter un sleep 3 avant l'étape précédente dans le cas où il est à la recherche de cette div trop tôt (échoue avec Unable to find css ".panel")
• Ajouter un appel à find (et page.find) et passer la manipulation de forme comme un bloc (avec et sans within bloc niché dans le find bloc):

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

j'ai aussi essayé avec poltergeist.

ce qui est énervant à ce sujet est que j'ai changé le Capybara pilote de lutin de retour pour le sélénium/Firefox et je peux voir physiquement le pilote de l'ouverture de la page, en cliquant sur le bouton et l'éducation de l'modal.

des idées sur la façon D'amener Capybara à interagir avec cette forme?

Modifier

j'ai aussi essayé de coller un binding.pry y, et le débogage avec le levier gem. Le HTML de la page au point que les charges modales est un peu d'éléments, et puis script tags qui insèrent dynamiquement JS dans le à la tête de l'iframe. Voir cette capture d'écran du DOM au point où le binding.pry est frappé (après la fenêtre modale s'ouvre avec la Bande de la forme):

Alors que <div class="emailInput"> est clairement là, mais page.has_selector?('.emailInput') renvoie false dans la console.

Ici est un GitHub essentiel de ce qui se passe quand j'print page.html dans le levier de liaison de la ligne suivante après Capybara.within_frame 'stripe_checkout_app' do. C'est-à-dire, c'est le markup de Capybara perspective, et cela varie énormément du DOM comme montré dans la capture d'écran du DOM de la forme réelle quand il apparaît à l'écran, montré ci-dessus. comme vous pouvez le voir, il n'y a pas d'entrées ou quoi que ce soit avec quoi travailler dans le markup que Capybara voit.

mise à Jour

voici le markup pour la forme qui contient le JS qui exécute le modal. (Le Markup est en haml).

  %form{ action: "/charge?amount=1400", method: 'post', class: 'payment', id: 'fourteen' }
    %article
      %label.amount
        %span Amount: .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 }