Handling Multiple Frames in Playwright

The playwright provides several methods to handle and interact with frame or iframe elements.  This article will discuss how to handle multiple frames.

For this, we will use the Heroku site. Although it is a nested frame, we will see how we can navigate between multiple frames within this.

For an article about nest frames using playwright, click here.

await page.goto("https://the-internet.herokuapp.com/nested_frames");
const parentFrame = await page.frameLocator("//frame[@name='frame-top']");

Up to this point, we have entered the internal frame from the external frame. Ignore the nested concept from here. We shall see how we can handle multiple frames.

Let us print text from the middle, left, and right frames.

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

const rtext = await rightFrame.textContent();
console.log(rtext)
const leftFrame = await parentFrame.frameLocator('frame[name="frame-left"]').locator('body')

const ltext = await leftFrame.textContent()
console.log(ltext)

Using the locator of the frame, we can navigate multiple frames and do the necessary operations.