Stripe checkout fill in form in Capybara-webkit

Question

I'm using capybara-webkit driver for my JS enabled tests. However when I try to fill in the form fields for the stripe checkout iframe, I'm not able to do it using the capybara fill_in helper in both the drivers. Selenium driver provides methods that facilitates in achieving this task though.

4.times {page.driver.browser.find_element(:id, 'card_number').send_keys('4242')}         
page.driver.browser.find_element(:id, 'cc-exp').send_keys '5'
page.driver.browser.find_element(:id, 'cc-exp').send_keys '18'
page.driver.browser.find_element(:id, 'cc-csc').send_keys '123'
page.driver.browser.find_element(:id,'billing-zip').send_keys '600004'

If I use the fill_in helper, I'm not able to input the details fully. For example for a 16 digit card number, the input field gets filled only with 4 digits & in the date field I'm able to input only the month and not the year.

I want to know if there are helpers in the webkit driver that would enable me to fill in forms in the Stripe checkout form. Any heads up on this would be great! Thanks in advance.

Answer 1

I was having similar problems with Selenium that both

find(:css, "input[id$='card_number']").set("4242 4242 4242 4242")
fill_in('card_number', with: "4242 4242 4242 4242")

stopped working. I had find(:css, ...) earlier, which still worked a few months ago, but I guess changes in checkout.js made it so that it didn't work any more. With the help of Capybara cannot fill Stripe Checkout.js fields I managed to get it working. It's not a pretty (or really behavior-driven) solution, but it does the job:

stripe_iframe = all('iframe[name=stripe_checkout_app]').last
Capybara.within_frame stripe_iframe do
  page.execute_script(%Q{ $('input#card_number').val('4242 4242 4242 4242'); })
  page.execute_script(%Q{ $('input#cc-exp').val('12/16'); })
  #rest of the Stripe-capybara
end

I am not sure if it works with Webkit though.

Answer 2

It looks like Stripe has changed the IDs on the checkout elements. Many have dynamic IDs that aren't matched by some of the other examples here.

What worked for me is matching elements by the placeholder text. Here's a working snippet as of 12/06/16:

stripe_card_number = '4242424242424242'

within_frame 'stripe_checkout_app' do
  find_field('Card number').send_keys(stripe_card_number)
  find_field('MM / YY').send_keys "01#{DateTime.now.year + 1}"
  find_field('CVC').send_keys '123'

  find('button[type="submit"]').click
end

page.has_content?('Success!', wait: 30)

Answer 3

For completeness, here's working code.

    Capybara.within_frame stripe_iframe do
      page.find_field('Email').set '[email protected]'
      page.find_field('Card number').set '4242 4242 4242 4242'
      page.find_field('MM / YY').set '12/42'
      page.find_field('CVC').set '123'
      find('button[type="submit"]').click
    end

You can always find the latest working version in https://github.com/dblock/slack-gamebot/blob/master/spec/integration/update_cc_spec.rb