How to Use AI to Generate Playwright Tests for Iframe and

Testing iframes and cross-origin content presents unique challenges in automated browser testing. Playwright handles these scenarios well, but writing tests manually takes time. AI coding assistants can accelerate this process significantly by generating the boilerplate code and handling the nuanced differences between same-origin and cross-origin iframe interactions.

Understanding Iframe Testing in Playwright

Playwright provides methods for working with iframes. The key methods include frameLocator(), frame(), and the ability to wait for iframe elements to become ready. When dealing with cross-origin iframes, additional considerations apply because of browser security policies that prevent direct access to the iframe’s content from the parent page.

The fundamental approach involves first locating the iframe, then performing operations within its context. For same-origin iframes, you can access the iframe content directly. For cross-origin iframes, you interact with them through the parent page, though with limited visibility into the iframe’s internal state.

AI-Prompting Strategies for Iframe Tests

When asking an AI to generate Playwright tests for iframe scenarios, specificity matters. Provide the AI with the HTML structure showing the iframe element, the URL or source of the iframe content, and the actions you want to test. Include details about whether the iframe is same-origin or cross-origin, as this affects the available testing methods.

An effective prompt includes the iframe element’s identifying attributes, the expected behavior of the content inside, and any state changes that should occur after user interactions. For example, if clicking a button inside an iframe should update a counter on the parent page, specify this interaction pattern clearly.

Code Examples for Common Iframe Scenarios

Same-Origin Iframe Testing

When the iframe loads content from the same domain, you have full access to its internal elements:

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

test('interact with same-origin iframe', async ({ page }) => {
  await page.goto('https://example.com/dashboard');

  // Locate the iframe by name or ID
  const iframe = page.frameLocator('#embedded-content');

  // Interact with elements inside the iframe
  const submitButton = iframe.getByRole('button', { name: 'Submit' });
  await expect(submitButton).toBeVisible();
  await submitButton.click();

  // Verify result on parent page
  await expect(page.locator('.success-message')).toContainText('Submitted');
});

Cross-Origin Iframe Handling

Cross-origin iframes require a different approach since direct access to the iframe’s DOM is restricted:

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

test('handle cross-origin iframe', async ({ page }) => {
  await page.goto('https://parent.example.com/page');

  // Use frameLocator for cross-origin iframes
  const iframe = page.frameLocator('iframe[src*="external-service.com"]');

  // Wait for iframe to load
  await iframe.waitForLoadState('domcontentloaded');

  // Interact with elements visible from parent context
  // Note: limited access to iframe internals for cross-origin
  const iframeElement = page.locator('iframe[src*="external-service.com"]');
  await expect(iframeElement).toBeVisible();

  // Verify iframe dimensions and attributes
  await expect(iframeElement).toHaveAttribute('loading', 'lazy');
});

Waiting for Iframe Content

Proper waiting is crucial for reliable tests:

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

test('wait for iframe content to load', async ({ page }) => {
  await page.goto('https://example.com/page-with-iframe');

  const iframe = page.frameLocator('#content-frame');

  // Wait for specific element inside iframe
  await iframe.locator('.loaded-content').waitFor({ state: 'visible' });

  // Alternative: wait for load state
  await iframe.waitForLoadState('networkidle');

  // Now interact with loaded content
  const inputField = iframe.getByLabel('Username');
  await inputField.fill('testuser');
});

Handling Dynamic Iframe Loading

Many modern applications load iframes dynamically, particularly for advertising, embedded content, and third-party widgets. Your AI-generated tests should account for these scenarios by including appropriate wait strategies.

When an iframe loads after user interaction, such as clicking a “Load Comments” button that injects a Disqus or similar widget, the test needs to wait for that interaction to complete and the iframe to become available:

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

test('dynamic iframe loading after interaction', async ({ page }) => {
  await page.goto('https://example.com/article');

  // Trigger the action that loads the iframe
  await page.getByRole('button', { name: 'Load Comments' }).click();

  // Wait for iframe to appear in DOM
  const iframe = page.frameLocator('iframe[title="Comments"]');

  // Wait for content to be ready
  await iframe.locator('.comment-section').waitFor({ state: 'visible' });

  // Verify iframe is properly sized
  const iframeElement = page.locator('iframe[title="Comments"]');
  await expect(iframeElement).toBeVisible();
});

Testing Iframe Communication

PostMessage communication between parent pages and iframes is common in modern web applications. Playwright can intercept and verify these messages:

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

test('verify postMessage communication', async ({ page }) => {
  await page.goto('https://example.com/iframe-communication');

  // Set up listener for messages from iframe
  const messages: string[] = [];
  page.on('console', msg => {
    if (msg.type() === 'log') {
      messages.push(msg.text());
    }
  });

  // Interact with parent page that sends message to iframe
  await page.getByRole('button', { name: 'Send to Iframe' }).click();

  // Verify message was sent (check console or DOM state)
  await expect(page.locator('.message-sent')).toHaveCount(1);
});

Best Practices for AI-Generated Iframe Tests

When using AI to generate iframe tests, include these elements in your prompts:

Exact iframe selectors and attributes from your application
Whether the iframe content is same-origin or cross-origin
Expected load times and appropriate wait strategies
Any authentication or session requirements
Verification steps for both success and error scenarios

AI can generate solid starting points for iframe tests, but always review the generated code for security implications, especially when testing cross-origin scenarios. Ensure your tests don’t inadvertently expose sensitive information and follow your application’s security policies.

Building reliable iframe tests requires understanding the loading patterns of embedded content in your specific application. AI accelerates the initial code generation, while your domain knowledge ensures the tests cover the actual user interactions that matter.

Advanced Iframe Testing Patterns

Testing iframes with Form Data Submission

Many iframes contain payment forms or signup forms. Here’s how to test form interactions across iframe boundaries:

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

test('submit form in payment iframe', async ({ page }) => {
  await page.goto('https://example.com/checkout');

  // Locate the payment iframe
  const paymentFrame = page.frameLocator('iframe[title="payment-form"]');

  // Fill form fields inside iframe
  await paymentFrame.locator('input[name="cardNumber"]').fill('4111111111111111');
  await paymentFrame.locator('input[name="expiry"]').fill('12/25');
  await paymentFrame.locator('input[name="cvc"]').fill('123');

  // Click submit button (within iframe context)
  const submitButton = paymentFrame.getByRole('button', { name: 'Pay' });
  await submitButton.click();

  // Wait for success message on parent page
  await expect(page.locator('.order-confirmation')).toBeVisible();
  await expect(page.locator('.order-number')).toContainText(/ORD-\d+/);
});

When prompting AI for iframe form tests, explicitly mention the form fields and expected outcomes on the parent page.

Handling Third-Party Analytics Iframes

Analytics services (Google Analytics, Hotjar, Segment) inject iframes. Test that they load without blocking user interactions:

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

test('page loads correctly with analytics iframe', async ({ page }) => {
  // Listen for analytics network requests
  const analyticsRequests = [];
  page.on('request', (request) => {
    if (request.url().includes('analytics') || request.url().includes('gtag')) {
      analyticsRequests.push(request.url());
    }
  });

  await page.goto('https://example.com');

  // Verify main content loads even if analytics is slow
  await expect(page.locator('main')).toBeVisible();
  await expect(page.locator('nav')).toBeVisible();

  // Wait for analytics to fire (but don't block if it fails)
  await page.waitForTimeout(2000);
  console.log(`Analytics requests: ${analyticsRequests.length}`);

  // Verify page is still interactive
  await page.getByRole('link', { name: /products/i }).click();
  await expect(page).toHaveURL(/products/);
});

This pattern prevents analytics iframe issues from breaking your tests.

Tool Comparison for Iframe Testing

Tool	Iframe Support	Cross-Origin	Code Completion
Claude Code	Excellent	Excellent	Good
GitHub Copilot	Good	Limited	Excellent
Cursor	Excellent	Excellent	Very Good
Windsurf	Good	Good	Good

Claude Code and Cursor understand cross-origin iframe limitations better. GitHub Copilot excels at code completion for common same-origin scenarios.

Debugging Iframe Test Failures

When AI-generated iframe tests fail, use these debugging techniques:

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

async function debugFrameLocator(page: Page, iframeSelector: string) {
  // 1. Verify iframe exists in DOM
  const iframeElement = page.locator(iframeSelector);
  console.log(`iframe found: ${await iframeElement.count()}`);

  // 2. Check iframe attributes
  if (await iframeElement.count() > 0) {
    const src = await iframeElement.getAttribute('src');
    const title = await iframeElement.getAttribute('title');
    console.log(`src: ${src}, title: ${title}`);
  }

  // 3. Wait for iframe to be ready
  const frameLocator = page.frameLocator(iframeSelector);

  // 4. Try to locate a test element inside
  const testElement = frameLocator.locator('body');
  try {
    await testElement.waitFor({ timeout: 5000 });
    console.log('iframe content loaded');
  } catch (e) {
    console.log('iframe content failed to load or is cross-origin');
  }

  // 5. Check browser console for iframe errors
  page.on('console', msg => {
    if (msg.type() === 'error') {
      console.log(`Browser error: ${msg.text()}`);
    }
  });
}

test('debug iframe loading', async ({ page }) => {
  await page.goto('https://example.com');
  await debugFrameLocator(page, 'iframe[title="content"]');
});

This debugging template helps identify whether failures are timing, selector, or cross-origin issues.

Best Practices for AI-Generated Iframe Tests

When requesting iframe test generation from AI, include:

Exact iframe identifiers - Show the HTML: <iframe id="payment" src="...">
Cross-origin status - Specify: “This is a same-origin iframe” or “This loads from a different domain”
Expected interactions - Describe what users do: “Click submit button and wait for success message”
Verification points - Specify what you’re testing for: “Verify success message appears on parent page”
Timeout expectations - Mention: “iframe typically loads in 2-3 seconds”

Providing this context produces more reliable test code that passes on first run.

Common Iframe Test Antipatterns

Avoid these patterns when reviewing AI-generated code:

// BAD: Assuming iframe content is always accessible
const button = page.locator('#payment-button'); // Works same-origin only

// GOOD: Use frameLocator for any iframe
const button = page.frameLocator('iframe').locator('#payment-button');

// BAD: Not waiting for iframe to load
await page.goto('https://example.com');
await page.frameLocator('iframe').locator('button').click();

// GOOD: Wait for iframe content explicitly
const iframe = page.frameLocator('iframe');
await iframe.waitForLoadState('domcontentloaded');
await iframe.locator('button').click();

// BAD: Ignoring cross-origin restrictions
await page.evaluate(() => {
  // Can't access cross-origin iframe from here
  document.querySelector('iframe').contentDocument;
});

// GOOD: Work with cross-origin iframes through page interactions
await page.frameLocator('iframe').getByRole('button').click();

Built by theluckystrike — More at zovo.one

Understanding Iframe Testing in Playwright

AI-Prompting Strategies for Iframe Tests

Code Examples for Common Iframe Scenarios

Same-Origin Iframe Testing

Cross-Origin Iframe Handling

Waiting for Iframe Content

Handling Dynamic Iframe Loading

Testing Iframe Communication

Best Practices for AI-Generated Iframe Tests

Advanced Iframe Testing Patterns

Testing iframes with Form Data Submission

Handling Third-Party Analytics Iframes

Tool Comparison for Iframe Testing

Debugging Iframe Test Failures

Best Practices for AI-Generated Iframe Tests

Common Iframe Test Antipatterns

Related Articles