我想在Magento 2中使用casperjs对一步结账进行功能测试。
在这种情况下,我有Stripe作为支付网关,并有一个iframe,没有id或名称。
(在不同的场景下,类名会随着js而改变)。
这是html的输出。
<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');
});
});
但我得到的是:
FAIL Cannot get informations from #root > form > span:nth-child(4) > div > div.CardNumberField-input-wrapper > span > input[name='cardnumber']: element not found.
我发现,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');
}
);
});