Playwright で React Stripe.js の CardElement にカード情報を入力させたい

調べるのに、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");
  
  //....(略)....
  
});