How to handle Playwright IFrame ?

 Playwright – Handling Iframe

• An iFrame is commonly known as an inline frame which is nothing but an HTML document embedded inside another HTML document.
• iFrames are a simpler way to embed a web page inside another web page. 
• iFrames are mostly used to display external information on the webpage like displaying advertisements and videos from third party sources. 
• iFrame is basically a tag used in HTML5 like <iframe></iframe>.

 iFrame is a HTML document embedded inside an HTML document. iFrame is defined by an <iframe></iframe> tag in HTML. With this tag, you can identify an iFrame while inspecting the HTML tree.

How to Identify  iFrames on Web Page ?

 

There are some methods from which we can identify if there is any iframe present on the webpage or not.

Step 1: Search the iframe on the inspection box

Step 2: Right-click on that web element

Step 3: Through view page source

Playwright Method to Handling Frames ?

• Get frame using the frame’s name attribute
•     Frame frame = page.frame("frame-login");
• Get frame using frame"s URL
• Frame frame = page.frameByUrl(Pattern.compile(".*domain.*"));
• Locate element inside frame using frameLocator
•           Locator username = page.frameLocator(".frame-class").getByLabel("User Name");        

•  Interact with the frame   
• frame.fill("#username-input", "John");       
•  username.fill(“John”)

Sample Program for How to Handle Playwrigth IFrame?

package com.example;

import com.microsoft.playwright.*;

import java.util.List;

public class IframeHandle {

    public static void main(String[] args) {
        Playwright playwright = Playwright.create()  ;
        Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions()
                .setHeadless(false)
                /*.setChannel("chrome")*/);
        Page page = browser.newPage();

        String url = "https://demo.automationtesting.in/Frames.html";
        page.navigate(url);
        // Find out the list of frames on page and print
        List<Frame> listofFrames = page.frames();
        System.out.println(listofFrames.size());
        //find the Frame using locator's Attribute //name
          Frame frame1 = page.frame("SingleFrame");
        frame1.locator("input").fill("Hello Nageswar");
        page.navigate(url);
        // Find the frame using Frame Url
          Frame frame2 = page.frameByUrl("https://demo.automationtesting.in/SingleFrame.html");
         frame2.locator("input").fill("Hello Nageswar");
        page.navigate(url);
         // Find the frame using frameLocator method
         page.frameLocator("#singleframe").locator("input").fill("Hello Nageswar");

    }
}