用剧作家填充条纹元素卡

Question

我想使用 Playwright 填写 Stripe Card Element。

常规定位器似乎不起作用。以下示例不执行任何操作：

await page.fill('iframe input[name="cardnumber"]', '4242424242424242')

如何使用 Playwright 填写卡片输入（卡号、CVC、有效期、邮政编码）？

Answer 1

Stripe Card Elements 在 iframe 中呈现这些字段，因此我们需要获取 contentFrame 并从那里继续：

// probably need to use a more specific selector here
const stripeIframe = await page.waitForSelector('iframe')
const stripeFrame = await stripeIframe.contentFrame()

const cardNumInput = await stripeFrame.waitForSelector('input[name="cardnumber"]')

// @NOTE card no must be filled for rest of input fields to appear with
// appropriate [name] attributes.
await cardNumInput.fill('4242424242424242')

const cardExpInput = await stripeFrame.waitForSelector('input[name="exp-date"]')
const cardCVCInput = await stripeFrame.waitForSelector('input[name="cvc"]')
const cardZipInput = await stripeFrame.waitForSelector('input[name="postal"]')

await cardExpInput.fill('12/50')
await cardCVCInput.fill('123')
await cardZipInput.fill('99999')

Answer 2

这是使用添加到 v.1.17 的 Playwright FrameLocator API 实现此目的的最新方法。

const stripeFrame = page.frameLocator('iframe').first();
await stripeFrame.locator('[placeholder="Card number"]').fill('4242424242424242');
await stripeFrame.locator('[placeholder="MM / YY"]').fill('04/30');
await stripeFrame.locator('[placeholder="CVC"]').fill('242');

用剧作家填充条纹元素卡

Fill Stripe Elements Card with Playwright

stripe-payments

playwright