Playwright Handle Frame

The playwright provides several methods to handle and interact with frame or iframe elements. This article will discuss frame() and frameLocator() methods to interact with iframe elements.

Table of Contents

1. Demo Website
2. frame() method
3. frameLocator() method
4. Video Tutorial

Demo Website

To practice visit autopract selenium iframe page. Here Registration form is inside iFrame. Let's fill in UserName and Email using frame() and frameLocator() methods.

Handle iFrame Elements using the frame() method

To get the frame, you can use a name attribute, URL, or partial URL of the iFrame. URL is given in the iFrame src attribute. To perform actions on frame elements, you can use several methods like fill() or Locator().

Method Signature / Syntax

(method) Page.frame(frameSelector: string | {
    name?: string | undefined;
    url?: string | RegExp | ((url: URL) => boolean) | undefined;
}): Frame | null

Get Frame using Name FrameSelector

const myFrame = page.frame("testframe")

Here we have used name of the frame.

Get Frame using Name Option

const myFrame = page.frame({name: "testframe"})

Get Frame using URL option

const myFrame = page.frame({url: "http://autopract.com/selenium/form1/"})

Note: URL is value for iFrame src attribute.

Get Frame using Partial URL

const myFrame = page.frame({url: /form1/})

Fill in Textbox using locator and type

await myFrame.locator('.form-control').nth(0).type('Ram');

Fill in Textbox using fill method

await myFrame.fill("(//input[@class='form-control'])[2]",'test@example.com')

Handle IFrame Elements using the frameLocator() method

To locate the frame using the selector, you can use the frameLocator method. It provides different methods than the frame(). For example, you won't be able to use the fill() method with frameLocator().

Method Signature / Syntax

(method) Page.frameLocator(selector: string): FrameLocator

Get Frame using Selector

const myFrame = page.frameLocator("iframe[name='testframe']")

Fill in Input using locator method

await myFrame.locator("(//input[@class='form-control'])[2]").type('test@example.com')