Playwright で React Stripe.js の CardElement にカード情報を入力させたい
6784 ワード
調べるのに、10時間ぐらいかかったので、メモ。
前提
React 上では、React stripe.js の CardElement
が実装されているものとする(公式からコピペしたのを Edit した)
import {useStripe, useElements, CardElement} from '@stripe/react-stripe-js';
const CheckoutForm = () => {
const stripe = useStripe();
// ....(略)....
return (
<form>
<CardElement id="test-stripe-field" /> // 必ず id をつける
<button disabled={!stripe}>Submit</button>
</form>
)
};
Playwright でテストを書く
今回は、CardElement
にカード情報を入力するところだけ記載する。
test("Stripe Test", ({ page }) => {
//....(略)....
await page.click("#test-stripe-field");
await sleep(5000);
const frames = page.frames();
const cardFrame = frames.find((f) =>
f._name.startsWith("__privateStripeFrame"),
);
await cardFrame.fill(
'[data-elements-stable-field-name="cardNumber"]',
"4242424242424242",
);
await cardFrame.fill(
'[data-elements-stable-field-name="cardExpiry"]',
"04/41",
);
await cardFrame.fill('[data-elements-stable-field-name="cardCvc"]', "333");
//....(略)....
});
Author And Source
この問題について(Playwright で React Stripe.js の CardElement にカード情報を入力させたい), 我々は、より多くの情報をここで見つけました https://zenn.dev/nappa/articles/7e843aee77a0be著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol