Handling Nested Frames in Playwright

In Playwright, handling nested frames refers to the ability to access and interact with frames within a webpage that are nested within other frames. Nested frames are contained within different frames rather than directly within the webpage's main frame.

The Playwright provides several methods to handle and interact with frame or iframe elements. This article will discuss how we can handle nested frames.

• This is a herokuapp site that has nested frames.
• In this, we can see that frames are present within the frameset.
• Let us see how we can make our way through to the child frame.

const parentFrame = await page.frameLocator("//frame[@name='frame-top']");

• The parent frame is first isolated and stored inside a variable using a framelocator.

const childFrame = await parentFrame.frameLocator('frame[name="frame-middle"]').locator('body');

• Using the parentFrame variable, we again access the middle frame with the middle text.
• After using framelocator, we can specify the locator body to extract the text content.

await page.goto("https://the-internet.herokuapp.com/nested_frames");
const parentFrame = await page.frameLocator("//frame[@name='frame-top']");
const childFrame = await parentFrame.frameLocator('frame[name="frame-middle"]').locator('body');
const text = await childFrame.textContent();
console.log(text)

• Similarly, we can do this for the other frames present.