Skip to main content

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");

    }
}




Comments

Post a Comment

Popular posts from this blog

Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript)

🎥 Setup Browser, Context, Page & Run Config Test Scripts with package.json & playwright.config.js Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript) 1. Install Playwright You can install Playwright using the following command: npm init playwright@latest 2. Create a Basic Test Script Understand the core Playwright architecture: Element Description browser Controls the browser instance (like Chrome, Firefox, etc.) context Acts like a separate browser profile (cookies, localStorage are isolated) page A single browser tab where interaction happens 3. Run the Test npx playwright test example.spec.js Ways to Run TypeScript Tests Way Command Notes 🟢 Via npx npx playwright test Uses built-in TypeScript support 🟢 With s...
Post a Comment
Read more

Playwright Test Structure in Details -Session-02

🎥 Playwright: test.only, Hooks & Grouping with test.describe Explained Let’s go step-by-step , showing how to build from a single test , to using beforeEach / afterEach , and then organizing things with test.describe . ✅ Step 1: Basic Single Test with test.only import { test, expect } from '@playwright/test' ; test. only ( '🚀 Basic test - check title' , async ({ page }) => { await page. goto ( 'https://example.com' ); await expect (page). toHaveTitle ( /Example Domain/ ); }); test.only ensures only this test runs — great for debugging. ✅ Step 2: Add beforeEach and afterEach import { test, expect } from '@playwright/test' ; test. beforeEach ( async ({ page }) => { console . log ( '🔄 Setting up before each test' ); await page. goto ( 'https://example.com' ); }); test. afterEach ( async ({ page }, testInfo) => { console . log ( `📦 Finished test: ${testInfo.title} `); }); test. only ( ...
Post a Comment
Read more

How to Maximize a Browser window using Playwright Java

  Playwright itself does not have a direct maximize () method like some other browser automation tools, but you can achieve the effect by setting the viewport to the screen size of your display. Below are ways to handle Maximize a browser in Playwright Java  Ø   Setting the viewport to the screen size  o    setViewportSize(1920, 1080): This sets the browser window to a full HD resolution, effectively maximizing it. o    setHeadless(false): Ensures the browser runs in a visible mode so you can see the window being maximized.  Code Snapshot  Playwright playwright = Playwright. create ()   ;   Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));     // Create a new browser context   BrowserContext context = browser.newContext(new Browser.NewContextOptions()          .setViewportSize(1920, 1080));     ...
Post a Comment
Read more