Test your checkout, every day

The test it wrote

22await test.step('Check out and pay with test card', async () => {
23  await page.getByRole('link', { name: 'Check out' }).click();
24
25  await page.getByRole('textbox', { name: 'Street address' }).fill('123 Main St');
26  await page.getByRole('textbox', { name: 'City' }).fill('Anytown');
27  await page.getByRole('textbox', { name: 'Postcode' }).fill('12345');
28
29  const paymentFrame = page.locator('iframe[title="Secure card payment input frame"]').contentFrame();
30  await paymentFrame.getByRole('textbox', { name: 'Card number' }).fill('4242 4242 4242 4242');
31  await paymentFrame.getByRole('textbox', { name: 'Expiration (MM / YY)' }).fill('12/28');
32  await paymentFrame.getByRole('textbox', { name: 'CVC' }).fill('123');
33
34  await page.getByTestId('place-order').click();
35});
36
37await test.step('Verify order confirmation and total', async () => {
38  await expect(page.getByText('Thanks! Your order has been placed.')).toBeVisible();
39  await expect(page.getByTestId('order-total')).toHaveText('$21.00');
40});

The card form lives in an iframe, like Stripe’s; the test reaches into it with contentFrame(). The last line checks the exact total, product plus shipping.