CODEWITHSUNDEEP
stripe-paymentse2e-testingbehatmink
Patrick Kenny
Patrick Kenny

Reputation: 6497

How to use Behat/Mink to fill out a test Stripe checkout form?

I'm trying to test my checkout flow that integrates Drupal 9 with Stripe checkout.

I use Behat for testing Drupal, but I'm having trouble getting it to work on the Stripe checkout page.

An example of the Stripe checkout page I am trying to work with can be accessed by going to the Stripe docs and clicking the Checkout button.

Here's my behat step:

  /**
   * Enter a Stripe Visa credit card.
   *
   * @Then I fill in a valid card on Stripe
   */
  public function fillInCardOnStripe(): void {
    $selector_card_number = 'cardNumber';
    $selector_card_expiry = 'cardExpiry';
    $selector_cvc = 'cardCVC';
    $selector_billing_name = 'billingName';

    $test_card_number = '4242424242424242';
    $test_card_expiry = '11/25';
    $test_cvc = '123';
    $test_billing_name = 'Marcus Aurelius';

    $this->assertEnterField($selector_card_number, $test_card_number);
    $this->assertEnterField($selector_card_expiry, $test_card_expiry);
    $this->assertEnterField($selector_cvc, $test_cvc);
    $this->assertEnterField($selector_billing_name, $test_billing_name);
  }

However, when my test navigates to the Stripe checkout page, I get the following error:

And I fill in a valid card on Stripe                                                                                # DrupalMinkContext::fillInCardOnStripe()
  Form field with id|name|label|value|placeholder "cardNumber" not found.

I don't understand why because when I open the browser dev tools, the name of the Stripe card number input element is cardNumber.

How can I fill out the card number fields on the Stripe checkout page?

Upvotes: 0

Views: 65

Answers (1)

Barry
Barry

Reputation: 3328

Sometimes forms can obfuscate inputs to prevent automated entry - payment forms are an excellent example of this. there are multiple solutions to this problem:

  1. Use selenium more directly. Mink is a wrapper for the selenium functions to find inputs and type into them - in this case you'll need to find the form field with some custom CSS selector and then to type... so either use different Mink functions or selenium functions to access/fill the form input.

  2. As above but using selenium to use JavaScript directly to update the input value.

  3. As above but use keyboard navigation to "tab" into the field and then type.

  4. As above but using AutoHotKey to send keys to that window (i.e. behat writes a script from a template and shell execs it during step). Note I have used this for windows applications that are part of the scenario I'm testing. Provided this is a windows problem.

Upvotes: 1

Related Questions