Monitoring iframes (Stripe, Intercom, and More)

Many modern SaaS applications rely on iframes for secure data entry (like Stripe or Braintree) or third-party widgets (like Intercom or Zendesk). Traditional automation tools often struggle with iframes, but Playwright makes them first-class citizens.

The frameLocator API

The page.frameLocator() method allows you to enter the context of an iframe and interact with its elements just as you would on the main page.

// 1. Locate the frame (usually via a selector or title)
const paymentFrame = page.frameLocator('iframe[title="Secure payment input"]');

// 2. Interact with elements inside the frame
await paymentFrame.getByLabel('Card number').fill('4242 4242 4242 4242');

Common Use Case: Stripe Elements

Stripe uses highly secure iframes for its credit card fields. To monitor a checkout flow, you must "enter" these frames.

import { test, expect } from '@playwright/test';

test('complete stripe checkout', async ({ page }) => {
  await page.goto('/checkout');

  // Stripe usually has multiple iframes for Number, Expiry, and CVC
  const cardFrame = page.frameLocator('iframe[name*="__privateStripeFrame"]');
  
  await cardFrame.getByPlaceholder('Card number').fill('4242 4242 4242 4242');
  await cardFrame.getByPlaceholder('MM / YY').fill('12/25');
  await cardFrame.getByPlaceholder('CVC').fill('123');

  await page.getByRole('button', { name: 'Pay Now' }).click();
});

Monitoring Support Widgets

If you want to ensure your help desk (e.g., Intercom) is loading correctly for your users:

test('support widget is active', async ({ page }) => {
  await page.goto('/');
  
  // Locate the Intercom launcher frame
  const intercomFrame = page.frameLocator('iframe[name="intercom-launcher-frame"]');
  
  // Verify it is visible and clickable
  await expect(intercomFrame.locator('button')).toBeVisible();
});

Best Practices for frames

1. Avoid Index-based Selection: Don't use page.frames()[1]. If a third-party script adds another frame, your test will break. Always use a descriptive selector for frameLocator.
2. Auto-Waiting: frameLocator automatically waits for the iframe to appear in the DOM. You don't need to add manual waitForTimeout calls.
3. Cross-Origin is Supported: Playwright natively handles frames from different domains, which is why it works perfectly for payment gateways.

Next Steps

• Resilient Locators
• Network Mocking