Insert stripe credit card number using casperjs in magento2

Question

I am trying to do a functional test using casperjs in magento 2 at the one step checkout.

In this case I have Stripe as a payment gateway and has an iframe with out id or name.

(the class name change with js in different scenarios).

This is the html output:

<div class="fieldset ccard" data-bind="visible: showNewCardSection">

  <div data-bind="if: (securityMethod == 2)">
    <div class="stripe-payments-elements">
      <label for="card-number" id="card-details-label">
        <span><!-- ko i18n: 'Enter your card details:'--><span>Enter your card details:</span><!-- /ko --></span>
      </label>
    </div>
    <div class="stripe-payments-elements no-wrap">
      <div id="stripe-payments-card-number" class="stripe-elements-field StripeElement StripeElement--empty"><div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;"><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame10" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-4ddaf8215aa13f7545fd7df3422daa20.html#style[base][fontSize]=16px&amp;locale=en&amp;componentName=cardNumber&amp;wait=false&amp;rtl=false&amp;keyMode=test&amp;apiKey=pk_test_lBvNHMoc8dAS4yfgp2cQHW48&amp;origin=https%3A%2F%2Fdemo.sample.dev&amp;referrer=https%3A%2F%2Fdemo.sample.dev%2Fonestepcheckout%2F&amp;controllerId=__privateStripeController1" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; height: 19.2px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div></div>
      <div class="stripe-payments-brand"><i class="pf pf-credit-card" id="stripe-payments-brand-icon"></i></div>
    </div>
    <div class="stripe-payments-elements no-wrap">
      <div id="stripe-payments-card-expiry" class="stripe-elements-field StripeElement StripeElement--complete"><div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;"><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame11" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-4ddaf8215aa13f7545fd7df3422daa20.html#style[base][fontSize]=16px&amp;locale=en&amp;componentName=cardExpiry&amp;wait=false&amp;rtl=false&amp;keyMode=test&amp;apiKey=pk_test_lBvNHMoc8dAS4yfgp2cQHW48&amp;origin=https%3A%2F%2Fdemo.sample.dev&amp;referrer=https%3A%2F%2Fdemo.sample.dev%2Fonestepcheckout%2F&amp;controllerId=__privateStripeController1" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; height: 19.2px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div></div>
      <div id="stripe-payments-card-cvc" class="stripe-elements-field StripeElement StripeElement--complete"><div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;"><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame12" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-4ddaf8215aa13f7545fd7df3422daa20.html#style[base][fontSize]=16px&amp;locale=en&amp;componentName=cardCvc&amp;wait=false&amp;rtl=false&amp;keyMode=test&amp;apiKey=pk_test_lBvNHMoc8dAS4yfgp2cQHW48&amp;origin=https%3A%2F%2Fdemo.sample.dev&amp;referrer=https%3A%2F%2Fdemo.sample.dev%2Fonestepcheckout%2F&amp;controllerId=__privateStripeController1" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; height: 19.2px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div></div>
    </div>
    <div class="stripe-payments-elements">
      <div class="pci-dss-info-block">
        <svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24" id="pci-svg">
          <path d="m18,8l-1,0l0,-2c0,-2.76 -2.24,-5 -5,-5s-5,2.24 -5,5l0,2l-1,0c-1.1,0 -2,0.9 -2,2l0,10c0,1.1 0.9,2 2,2l12,0c1.1,0 2,-0.9 2,-2l0,-10c0,-1.1 -0.9,-2 -2,-2zm-6,9c-1.1,0 -2,-0.9 -2,-2s0.9,-2 2,-2s2,0.9 2,2s-0.9,2 -2,2zm3.1,-9l-6.2,0l0,-2c0,-1.71 1.39,-3.1 3.1,-3.1c1.71,0 3.1,0.92125 3.1,2.84372l0,-0.78122l0,3.0375z"></path>
        </svg>
        <div class="pci-dss-info-text">
          <span><!-- ko i18n: 'Your card details are protected using PCI DSS v3.2 security standards.'--><span>Your card details are protected using PCI DSS v3.2 security standards.</span><!-- /ko --></span>
        </div>
      </div>
    </div>

    <div id="stripe-payments-card-errors" class=""></div>
  </div>

  <div data-bind="
      if: (securityMethod <= 1),
      attr: {
        id: getCode() + '_cc_owner_div'
      }
    " class="field required" id="stripe_payments_cc_owner_div"></div>

  <div data-bind="
      if: (securityMethod <= 1),
      attr: {
        id: getCode() + '_cc_number_div'
      }
    " class="field number required" id="stripe_payments_cc_number_div"></div>

  <div data-bind="
      if: (securityMethod <= 1),
      attr: {
        id: getCode() + '_cc_expiration_div'
      }
    " class="field date required" id="stripe_payments_cc_expiration_div"></div>

  <div data-bind="
      if: (securityMethod <= 1),
      attr: {
        id: getCode() + '_cc_cid_div'
      }
    " class="field cvv required" id="stripe_payments_cc_cid_div"></div>

</div>

If I try to inspect the element of the credit card number for example I get:

#root > form > span:nth-child(4) > div > div.CardNumberField-input-wrapper > span 

I try with:

        /* Credit card step */
     casper.then(function () {
         this.echo('### Filling Credit Card ###', 'INFO_BAR');
         casper.waitForSelector('#stripe-payments-card-number',
             function success() {
                 document.querySelector("#root > form > span:nth-child(4) > div > div.CardNumberField-input-wrapper > span > input")
                 this.sendKeys("#root > form > span:nth-child(4) > div > div.CardNumberField-input-wrapper > span > input[name='cardnumber']", "4242424242424242");
                 casper.test.pass('Credit card form completed');
             },
             function fail() {
                 casper.test.fail('Problems filling credit card form');
             });
     });

but I get:

FAIL Cannot get informations from #root > form > span:nth-child(4) > div > div.CardNumberField-input-wrapper > span > input[name='cardnumber']: element not found.

Answer 1

I found out that the 3 iframes that the Magento official Stripe module are created using fix names.

So I manage to move casper to the iframes and populate the form.

      casper.then(function () {
        casper.waitForSelector('#stripe-payments-card-number',
            function success() {
                this.page.switchToFrame('__privateStripeFrame10');
                 this.fill('form.ElementsApp', {
                     'cardnumber': '4242424242424242'
                 }, false);
                this.echo('cardnumber: 4242424242424242');
                this.page.switchToMainFrame();
                this.page.switchToFrame('__privateStripeFrame11');
                this.fill('form.ElementsApp', {
                    'exp-date': '12/25'
                }, false);
                this.echo('exp-date: 12/25');
                this.page.switchToMainFrame();
                this.page.switchToFrame('__privateStripeFrame12');
                this.fill('form.ElementsApp', {
                    'cvc': '123'
                }, false);
                this.echo('cvc: 123');
                this.page.switchToMainFrame();
                test.pass('Using Credit card as payment method');
            },
            function fail() {
                casper.test.fail('Problems filling credit card form');
            }
        );
    });