Working with Frames and iFrames in Playwright

July 04, 2025

In web automation testing, handling frames and iFrames is essential, as many websites embed external content like ads, videos, or forms using these elements. Playwright provides easy and reliable ways to interact with frames and iframes using its powerful selector and frame-handling capabilities.

🧩 What Are Frames and iFrames?

Frame/iFrame: An HTML document embedded within another HTML document.

Frames act like a separate browsing context, meaning elements inside them can't be accessed directly from the main page's DOM.

🚀 How to Work with Frames in Playwright

Playwright allows you to:

Locate frames by name, index, or selectors.

Switch context to a frame.

Interact with elements inside the frame.

✅ Basic Steps to Work with iFrames

1. Identify the iFrame

2. Access the Frame in Playwright

// TypeScript / JavaScript Example

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

test('Work with iframe', async ({ page }) => {

await page.goto('https://your-website.com');

// Wait for the iframe to load

const frame = await page.frame({ name: 'my-frame' });

// OR use selector-based approach

const elementHandle = await page.$('iframe#my-frame');

const frame2 = await elementHandle.contentFrame();

// Interact with an element inside the iframe

await frame2?.click('text=Login');

await frame2?.fill('#username', 'testuser');

});

3. Using frameLocator for Direct Access

Playwright provides frameLocator for simpler and more readable frame interactions.

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

await frame.locator('#username').fill('admin');

await frame.locator('#password').fill('12345');

await frame.locator('button[type="submit"]').click();

📌 Working with Nested Frames

If there are multiple layers of frames (nested frames), use:

const outerFrame = page.frameLocator('iframe#outer');

const innerFrame = outerFrame.frameLocator('iframe#inner');

await innerFrame.locator('text=Continue').click();

⚠️ Tips and Best Practices

Always wait for the frame to load before accessing it.

Use frame names or selectors wisely to avoid ambiguity.

For dynamic iFrames, use waitForSelector or frame.waitForSelector().

🧾 Conclusion

Frames and iFrames are common in modern web applications, and Playwright offers robust support for handling them. Whether you're testing login forms, embedded videos, or third-party widgets, understanding how to work with frames using frame(), frameLocator(), and contentFrame() is crucial for building reliable automation scripts.

Learn Playwright Training in Hyderabad

Playwright CLI Commands You Should Know

Capturing Screenshots in Playwright

Handling Alerts and Dialogs in Playwright

Recording Videos of Test Runs

Visit our IHub Talent Training Institute

Get Direction