Stripe CardElement 在 Playwright 测试中无法呈现

如何解决Stripe CardElement 在 Playwright 测试中无法呈现

我有一个 React 应用程序，其中包含一个使用 Stripe Elements 的简单信用卡表单，如下所示：

import { Elements,CardElement } from '@stripe/react-stripe-js';

function CardForm() {
  const [stripe,setStripe] = useState(null);

  useEffect(() => {
    setStripe(Stripe(<stripe_key>));
  });

  return (
    <div>
      <script src="https://js.stripe.com/v3/" />
      <Elements stripe={stripe}>
        <CardElement />
      </Elements>
    </div>
  );
}

我还使用 Playwright 在无头 Chromium 浏览器中对我的应用程序运行 e2e 测试。其中一项测试填写信用卡表格。部分测试如下所示：

const frames = page.frames();

// Find the stripe credit card iframe
const cardFrame = find(f => f._name.startsWith('__privateStripeFrame')(frames);

await cardFrame.fill(
  '[data-elements-stable-field-name="cardNumber"]',card.number
);
await cardFrame.fill(
  '[data-elements-stable-field-name="cardExpiry"]',`${card.exp_month}/${card.exp_year}`
);
await cardFrame.fill(
  '[data-elements-stable-field-name="cardCvc"]',card.cvc
);
await cardFrame.fill(
  '[data-elements-stable-field-name="postalCode"]','12345'
);

当我在本地（在无头模式下）运行我的测试时，一切正常，并且 Stripe CardElement iframe 加载并成功填充。但是，当我在 Github Actions 中将测试作为工作流运行时，iframe 无法呈现。即使我等待 10 秒以上，iframe 也永远不会加载。我在调用 useEffect 的 setStripe 中遇到某种错误，但所有日志都是 JSHandle@error。我认为从不同的域加载 Stripe 脚本可能是一个问题，所以我在浏览器设置中添加了一堆参数，正如一些类似的帖子所建议的那样：

browser = await chromium.launch({
  headless: IS_HEADLESS,chromiumSandBox: false,args: [
    '--no-sandBox','--disable-setuid-sandBox','--disable-web-security','--disable-features=IsolateOrigins,site-per-process','--disable-site-isolation-trials','--allow-running-insecure-content','--ignore-certificate-errors','--allow-insecure-localhost'
  ]
});

但是这些都没有解决问题。同样，这只发生在 CI 中，永远不会在本地重现。我为 CI 测试启用了屏幕录制，以准确查看正在发生的事情，而 CardElement iframe 从不呈现。

编辑：

我还尝试将 stripe 作为模块包含，而不是使用 loadStripe 将其作为脚本包含。当我这样做时，CardElement 确实成功加载，但是当我尝试使用成功输入的卡片信息创建令牌时，createtoken 函数永远挂起。这是我的基本功能：

import { loadStripe } from '@stripe/stripe-js';

const stripe = loadStripe(<stripe_pk>);

async function generateCardToken(card) {
  const res = await (await stripe).createtoken(card);

  return res;
};

同样，这个函数在本地运行没有任何问题，在 Playwright 测试中也没有任何问题，所以我认为 generateCardToken 函数没有问题。它只是在 Github Actions 中运行 Playwright 测试时挂起。在这种情况下，createtoken 调用也不会抛出错误，它只是永远挂起等待返回响应。

请在这里提供任何帮助，我们将不胜感激。