ruby - ventana - vue-js-modal

Problemas de capibara rellenando JS modal

Question

Permítanme comenzar confirmando que esto no es un duplicado (en el sentido de que las respuestas publicadas allí no solucionaron mi problema). Esta publicación es esencialmente mi problema exacto: Capybara no puede encontrar los campos del formulario en el modo de banda para completarlos.

Aquí está mi especificación Capibara:

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: ''[email protected]''
      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

El texto en esa especificación es mi intento más reciente. El error de Capibara es Unable to find field "Email" .

Lo que he intentado

• Este intento más reciente de completar el campo con el texto del marcador de posición como se sugiere here
• Encontrar el campo de correo electrónico por el atributo de nombre (por ejemplo, fill_in ''email'', with: ''[email protected]'' )
• Con y sin el type: :feature y js: true hashes en el describe
• Con y sin la llamada within_frame en Capybara
• Intentando encontrar la entrada por css (por ejemplo, page.find(''.emailInput input'').set(''[email protected]'' )
• Agregar un bloque within : within(''.panel'') do alrededor de las entradas del formulario (falla con Unable to find css ".panel" )
• Agregar un sleep 3 antes del paso anterior en caso de que busque ese div demasiado pronto (falla con Unable to find css ".panel" )
• Agregar una llamada para find (y también page.find ) y pasar la manipulación de formularios como un bloque (con y sin un bloque within anidado en el bloque de find ):

Capybara.within_frame ''stripe_checkout_app'' do
  page.find(''.panel'') do
    fill_in ''Email'', with: ''[email protected]''
    ...
  end
end

También he intentado esto con poltergeist.

Lo que es enloquecedor de esto es que cambié el controlador de Capybara de poltergeist de nuevo a selenio / Firefox y puedo ver físicamente el controlador abriendo la página, haciendo clic en el botón y abriendo el modo.

¿Alguna idea sobre cómo hacer que Capybara interactúe con este formulario?

Editar

También intenté pegar una binding.pry de binding.pry allí y depurar con la gema de palanca . El código HTML de la página en el punto en que se carga el modal son algunos elementos, y luego las etiquetas de script que insertan dinámicamente JS en la cabeza del iframe. Vea esta captura de pantalla del DOM en el punto donde se encuentra el binding.pry (después de que se abra la ventana modal con el formulario Raya):

Entonces, <div class="emailInput"> está claramente allí, pero page.has_selector?(''.emailInput'') devuelve false en la consola de palanca.

Here hay una lista de GitHub de lo que sucede cuando page.html desde el enlace de palanca como la siguiente línea después de Capybara.within_frame ''stripe_checkout_app'' do . Es decir, este es el marcado desde la perspectiva de Capybara, y varía enormemente desde el DOM como se muestra en la captura de pantalla del DOM de la forma real cuando aparece en la pantalla, como se muestra arriba. Como puede ver, no hay entradas ni nada con qué trabajar en el marcado que ve Capybara.

Actualizar

Aquí está el marcado para el formulario que contiene el JS que ejecuta el modal. (El marcado está en 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

Capybara fill_in utiliza ids de css no clases. Ejemplo

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

También es posible que tenga que usar <input> lugar de <div>

Answer 2

No puedo reproducir este problema en la página de verificación de demostración de 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: ''[email protected]'' # it''s visible that field becomes filled in
  sleep 3 # just to inspect that manually
end

El problema descrito por usted es porque hay dos iframes con el nombre stripe_checkout_app . within_frame encuentra el primero de ellos que no contiene campos de facturación. Para encontrar el segundo iframe puedes hacer, por ejemplo:

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

Answer 3

No tengo 50 representantes para comentar, pero, ¿has intentado agregar un poco de tiempo de espera en capybara para que el modal tenga tiempo de cargarse por completo? Encontré un problema similar al usar testcafe y darle 2-3 segundos de tiempo de espera funcionó.

Answer 4

Pruebe con Poltergeist, usando los métodos de cambio de ventana

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

stripe = page.driver.window_handles.last

page.within_window stripe do
  fill_in "Email", :with => "[email protected]"

  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

Encontré la solución en este blog español: numerica latina .

Answer 5

Solo estoy lanzando una idea aquí, ya que me he quedado atascado en estos pequeños problemas idiosincrásicos y sé lo frustrantes que pueden ser ... Una vez que intentaba que Capybara hiciera clic en el botón "Cerrar" en un diálogo modal de Twitter Bootstrap caja. Resulta que para que funcionara, tuve que incluir el código html modal de Bootstrap en una etiqueta "formulario" y luego Capybara pudo encontrarlo. Me pregunto si algo así es tu problema.