Rails, Inputing test data into stripe-element in Capybara Systemtest-CodePudding

I am trying to test the stripe part of a checkout process with a Capybara/Minitest Systemtest and do not know how to input the test card data into the stripe element.

This is one of the input fields:

<div >
  <span  data-max="4242 4242 4242 4242 4240">
    <input  autocomplete="cc-number" autocorrect="off" spellcheck="false" type="tel" name="cardnumber" data-elements-stable-field-name="cardNumber" aria-label="Credit or debit card number" placeholder="Card number" aria-invalid="false" value=""></span></div>
  ..

The closest I got was with a simple:

fill_in('Card number', with: '4242424242424242')

which caused:

Capybara::ElementNotFound: Unable to find field "Card number" that is not disabled

I suspect, that it might not be enough to target a field, but that you have to click the input field bevor.

When I try to target the CSS class:

find(class: 'CardNumberField-input-wrapper').fill_in('Card number', with: '4242424242424242')

I get:

Capybara::ElementNotFound: Unable to find css nil with classes [CardNumberField-input-wrapper]

How can I enable the disabled field? Is there another way to do it?

CodePudding user response：

Try finding the input element by name:

find('input["cardnumber"]')

CodePudding user response：

Thanks to Thomas Van Holder's hint to work on the selector, I got it working with Xpath in the following way.

within_frame(find(:xpath, '//*[@id="card-element"]/div/iframe')) do
  find(:xpath, '//*[@id="root"]/form/div/div[2]/span[1]/span[2]/div/div[2]/span/input').fill_in with: '................'
  find(:xpath, '//*[@id="root"]/form/div/div[2]/span[2]/span/span/input').fill_in with: '....'
  find(:xpath, '//*[@id="root"]/form/div/div[2]/span[3]/span/span/input').fill_in with: '...'
  find(:xpath, '//*[@id="root"]/form/div/div[2]/span[4]/span/span/input').fill_in with: '.....'
end