Handling Frames in playwright

 Handling frames in Playwright can be a bit tricky at first, but once you understand how it works, it's actually pretty straightforward. Here’s a breakdown on how to deal with iframes in Playwright using JavaScript. 

Understanding Frames and Iframes

Frames are sections of a webpage that can load separate HTML documents. Iframes (inline frames) are a specific type of frame used to embed another document within the current document. When dealing with frames in Playwright, it’s essential to switch context to the frame before interacting with its elements.

✅ Wait for the Frame to Load

Playwright automatically handles most frame loading scenarios, but you can explicitly wait for a frame if needed:

const frame = await page.frame({ name: 'frameName' }); // By name
// OR by URL
const frame = await page.frame({ url: /.*example.*/ });

✅ Interact with Elements Inside the Frame

Once you’ve got the frame reference, you can treat it like a page object:

await frame.click('button#submit');
await frame.fill('input#username', 'myuser');

✅ Interact with Elements Inside the Frame and frame object

If the frame is dynamically added:

await page.waitForSelector('iframe'); // Wait for iframe in DOM
const elementHandle = await page.$('iframe');
const frame = await elementHandle.contentFrame(); // Get the frame object

✅ Handling Nested Frames

You may need to walk through multiple frames:

const outerFrame = await page.frame({ name: 'outer' });
const innerFrame = outerFrame.childFrames().find(f => f.name() === 'inner');
await innerFrame.click('button#doSomething');

1. Using Frame by URL

In this example, we navigate to a page containing frames and access a specific frame using its URL. Here’s how it works:

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

test("Interacting with frame using URL", async ({ page }) => {
    await page.goto("https://ui.vision/demo/webtest/frames/");
  
    // Get frame using frame's URL
    const frame = page.frame({ url: "https://ui.vision/demo/webtest/frames/frame_1.html"});
  
    await frame.fill("input[name='mytext1']", "Hello");  
    
});

2. Using Frame by contentFrame

In this example, we navigate to a page containing frames and access a specific frame using contentFrame. Here’s how it works:

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

test("Interacting with frame using frame object", async ({ page }) => {
    await page.goto("https://ui.vision/demo/webtest/frames/");
  
    // Get frame using selector
    const elementHandle = await page.waitForSelector('[src="frame_1.html"]');
    const frame = await elementHandle.contentFrame();
  
    await frame.fill("input[name='mytext1']", "Hello");  
   
});

3. Using Frame by Frame Locator

In this example, we navigate to a page containing frames and access a specific frame using Frame locator. Here’s how it works:

test("Interacting with frame using Frame locator", async ({ page }) => {
    await page.goto("https://ui.vision/demo/webtest/frames/");
  
    // Using frameLocator
    const name = await page.frameLocator('frame[src="frame_1.html"]').locator("input[name='mytext1']");
  
    await name.fill("Hello");    
});