[英]Insert stripe credit card number using casperjs in magento2
我正在嘗試在一步結帳時使用 magento 2 中的 casperjs 進行功能測試。
在這種情況下,我將 Stripe 作為支付網關,並且有一個沒有 ID 或名稱的 iframe。
(class 名稱在不同場景下隨js變化)。
這是 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&locale=en&componentName=cardNumber&wait=false&rtl=false&keyMode=test&apiKey=pk_test_lBvNHMoc8dAS4yfgp2cQHW48&origin=https%3A%2F%2Fdemo.sample.dev&referrer=https%3A%2F%2Fdemo.sample.dev%2Fonestepcheckout%2F&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&locale=en&componentName=cardExpiry&wait=false&rtl=false&keyMode=test&apiKey=pk_test_lBvNHMoc8dAS4yfgp2cQHW48&origin=https%3A%2F%2Fdemo.sample.dev&referrer=https%3A%2F%2Fdemo.sample.dev%2Fonestepcheckout%2F&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&locale=en&componentName=cardCvc&wait=false&rtl=false&keyMode=test&apiKey=pk_test_lBvNHMoc8dAS4yfgp2cQHW48&origin=https%3A%2F%2Fdemo.sample.dev&referrer=https%3A%2F%2Fdemo.sample.dev%2Fonestepcheckout%2F&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>
例如,如果我嘗試檢查信用卡號的元素,我會得到:
#root > form > span:nth-child(4) > div > div.CardNumberField-input-wrapper > span
我嘗試:
/* 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');
});
});
但我得到:
失敗 無法從#root > form > span:nth-child(4) > div > div.CardNumberField-input-wrapper > span > input[name='cardnumber'] 獲取信息:找不到元素。
我發現 Magento 官方 Stripe 模塊的 3 個 iframe 是使用修復名稱創建的。
所以我設法將 casper 移動到 iframe 並填充表單。
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');
}
);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.