Search code examples
drupalstripe-paymentsbehatmink

Behat- How do I test a credit card number on a Stripe order checkout form?

I'm using Behat with Mink and the Drupal extension to test my Drupal 8 website. I've got the tests running over Selenium server on Docker so I can watch them taking place.

My tests are pretty simple, just filling out forms and making sure the results match expectations, like this:

And I fill in "Sesame Street" for "Street address"
And I fill in "FamilyName" for "Last name"

However, I can't get it to work with the credit card field. Here is what I tried so far.

And I fill in "4242424242424242" for "The card number"
And I fill in "4242424242424242" for "edit-payment-information-add-payment-method-payment-details-card-number"
And I fill in "4242424242424242" for "card-number-element"

All of these give the same error:

 Form field with id|name|label|value|placeholder "The card number" not found. (Behat\Mink\Exception\ElementNotFoundException)

Note: This test site is configured to use the Stripe test gateway, and I am attempting to use a test credit card number. No real card numbers will ever touch this system.

I think this is because the credit card payment is handled using the Stripe library and this uses some special kind of HTML structure that I'm not famiiar with. Here is the HTML below:

<div data-drupal-selector="edit-payment-information-add-payment-method" class="form-group js-form-wrapper form-wrapper" id="edit-payment-information-add-payment-method"><div class="stripe-form form-group js-form-wrapper form-wrapper" data-drupal-selector="edit-payment-information-add-payment-method-payment-details" id="edit-payment-information-add-payment-method-payment-details"><div id="payment-errors"></div><input id="stripe_token" data-drupal-selector="edit-payment-information-add-payment-method-payment-details-stripe-token" type="hidden" name="payment_information[add_payment_method][payment_details][stripe_token]" value="" /><div id="edit-payment-information-add-payment-method-payment-details-card-number" class="form-item js-form-item form-type-item js-form-type-item form-item-payment-information-add-payment-method-payment-details-card-number js-form-item-payment-information-add-payment-method-payment-details-card-number form-group"><label class="js-form-required form-required control-label" for="edit-payment-information-add-payment-method-payment-details-card-number">The card number</label><div id="card-number-element" class="form-text"></div></div>

credit_card_field

How can I target the credit card input and fill in a test card number with Behat?

EDIT: Even if I wait, I get the same error:

And I wait 5 seconds
Solution

  • There are 2 things here:

    1. The stripe field is in an Iframe, search for the iFrame conatining the stripe field, switch to the Iframe then use the regular I fill in as you have used before.

      1. For use the test card with the Stripe field you have to switch to Stripe test mode: Stripe_test_mode