1test('fills a payment form inside an iframe', async ({ page }) => {
2  await page.goto('/checkout');
3
4  // frameLocator() switches the locator context into the iframe's DOM
5  const frame = page.frameLocator('[data-testid="payment-iframe"]');
6
7  // All commands inside the frame use the same Playwright locator API
8  await frame.locator('[placeholder="Card number"]').fill('4242 4242 4242 4242');
9  await frame.locator('[placeholder="MM / YY"]').fill('12 / 28');
10  await frame.locator('[placeholder="CVC"]').fill('123');
11
12  await page.getByRole('button', { name: 'Pay now' }).click();
13  await expect(page.getByText('Payment successful')).toBeVisible();
14});