Fill Stripe Elements Card with Playwright

Question

I want to fill in a Stripe Card Element using Playwright.

The regular locators don't seem to work. The following for example does nothing:

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

How can I fill the card inputs (number, CVC, expiry date, postal code) with Playwright?

Answer 1

Here's the newest way to achieve this using Playwright's FrameLocator API which was added to v.1.17.

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');