Content ITV PRO
This is Itvedant Content department
Handling WebElements
Frames
Learning Outcome
5
Handle nested frames
4
Switch between the main page and frames
3
Locate and interact with elements inside frames
2
Identify Frame and iFrame elements
1
Understand the concept and purpose of frames
Recall
Playwright Basics → Browser, Context, Page
Locators → CSS, XPath, Text
Web Elements → Click, Fill, Select, Check
Page Navigation → URLs, Multiple Pages
Assertions → Text, Visibility, State
DOM Structure → Elements, Hierarchy
CSS Selectors → Pages, Frames
Frame
the payment form
may be displayed inside an iframe embedded
When you enter card details
on an online shopping website
within the main checkout page.
Online Shopping Payment Page
Main Page
Payment Frame (iFrame)
The shopping website where you select products and proceed to checkout
The payment gateway is embedded inside the checkout page.
Payment Fields
Separate Document
Card number, expiry date, CVV, and other payment details are located inside the frame
The content inside the frame belongs to a separate webpage/document.
Interaction
To automate these fields, Playwright needs to target the specific frame.
Playwright
frameLocator() can be used to locate and interact with elements inside the frame.
Why Frames need to be handled ?
Separate Document
Frame content is loaded as a separate HTML document.
1
Access Elements
Elements inside a frame need to be accessed through that specific frame
2
Frame Identification
The required frame must be identified before interacting with its elements.
3
Element Interaction
Enables actions such as click, fill, select, and validation inside the frame.
4
Nested Frames
Allows interaction with frames that are placed inside other frames.
5
Reliable Automation
Ensures Playwright interacts with the correct elements without locator failures.
6
What is Frame ?
A Frame is a section of a webpage that contains a separate HTML document within the main webpage.
It is commonly created using the <iframe> HTML element
The frame can contain its own buttons, text fields, links, images, and other elements.
Elements inside a frame are handled separately from elements on the main page.
In Playwright, frames can be accessed using frameLocator() or the Frame object.
How Are Frames Handled in Playwright ?
Validate Elements
Handle Nested Frames
Interact with Elements
Use frameLocator()
Identify the Frame
Locate the required frame using its name, URL, or selector.
Directly locate elements inside the frame.
Perform actions such as click(), fill(), and check().
Use the appropriate frame hierarchy when frames are inside other frames.
Use assertions to verify elements and content inside the frame.
Playwright provides Methods
page.frameLocator("iframe").locator("button").click()Frame frame = page.frame("frameName");frame()
frameLocator() (Recommended)
page.frameLocator("#paymentFrame")
.locator("#cardNumber")
.fill("1234567890123456");Here, frameLocator() identifies the frame, and locator() accesses the element inside it
EXAMPLE
Handling Nested Frames in Playwright
A nested frame is a frame that is placed inside another frame.
To interact with an element inside a nested frame, Playwright must first identify the outer frame, then the inner frame, and finally the required element.
Example
<!-- Main Page -->
<iframe id="outerFrame">
<!-- Outer Frame -->
<iframe id="innerFrame">
<!-- Inner Frame -->
<input id="username">
<button id="loginBtn">Login</button>
</iframe>
</iframe>The structure is:
Main Page
Outer Frame
Inner Frame
Element
Handling Nested Frame
Playwright allows us to handle this using chained frameLocator().
page.frameLocator("#outerFrame")
.frameLocator("#innerFrame")
.locator("#username")
.fill("admin");#outerFrame
#innerFrame
#username
fill("admin")
Identifies the outer frame.
Identifies the outer frame.
Identifies the frame inside the outer frame.
Enters the value.
page.frameLocator("#outerFrame")
.frameLocator("#innerFrame")
.locator("#loginBtn")
.click();Clicking an Element
Why are Frames Important?
Many real-world applications use frames for
Payment gateways
Advertisements
Chat widgets
Embedded forms
Maps
Third-party integrations
EXAMPLES
Payment forms (Stripe)
Google Maps
Chat Support Windows
Embedded Videos
Without handling frames correctly,
Playwright will not find the elements.
Summary
5
Handles nested frames without Selenium-style switching.
4
Supports locating, actions, and validations.
3
Use frameLocator() or the Frame object.
2
Playwright can interact with elements inside frames.
1
Frames contain a separate HTML document.
Quiz
Which method is commonly used to access elements inside a frame in Playwright?
A. switchToFrame()
B. frameLocator()
C. getFrame()
D. selectFrame()
Quiz-Answer
Which method is commonly used to access elements inside a frame in Playwright?
A. switchToFrame()
B. frameLocator()
C. getFrame()
D. selectFrame()
5.2 Frames
By Content ITV
