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 class="CardNumberField-input-wrapper">
<span class="InputContainer" data-max="4242 4242 4242 4242 4240">
<input class="InputElement is-empty Input Input--empty" 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?
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