Switching to a frame Using Playwright Java

Frames are commonly used in modern web applications to embed content from different sources, and being able to interact with them is crucial for accurate testing and data extraction.

This post will focus on interacting with frames and extracting important information from them. The following points will be discussed.

Switching to a child frame

There are several methods to switch to a frame, as outlined below:

Let’s look at them one by one.

For simplicity, we will choose the below-highlighted frame and try switching to it using our methods. You can find the below element on our playground website – https://testkru.com/Interactions/Frames.

Frame

We can inspect on the frame to reveal its DOM.

DOM of a frame
Using frame() method

In Playwright, we can use the frame() method to switch to a child frame. This method uses the name of the frame or its URL as its argument.

We can see in the above image that the frame’s name is “singleFrame“. We can use it to switch to the frame and perform various actions.

Frame frame = page.frame("singleFrame");

After switching to a frame, we can perform any action. Like we can fetch the text that is written inside the frame.

Locator locator = frame.locator("h1");
locator.innerText()
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Frame;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

public class CodekruTest {

	public static void main(String[] args) {

		Playwright playwright = Playwright.create();
		Browser browser = playwright.chromium().launch();

		// creating a BrowserContext
		BrowserContext browserContext = browser.newContext();

		Page page = browserContext.newPage();

		// Navigating to the URL
		page.navigate("https://testkru.com/Interactions/Frames");

		Frame frame = page.frame("singleFrame");

		Locator locator = frame.locator("h1");
		System.out.println("Text written inside the frame: " + locator.innerText());

		// closing the instances
		browser.close();
		playwright.close();

	}

}

Output –

Text written inside the frame: CodeKru

You can see that we have switched to the frame and successfully fetched the text written inside it.

In some cases, a frame may not have a name or URL. In these situations, how can we switch to it? The solution is to use the frameLocator() method.

Using frameLocator() method
  • Method declaration – FrameLocator frameLocator(String selector)
  • What does it do? The function allows selecting a specific frame by passing a matching selector string as a parameter. This can be in the form of an Xpath or any other appropriate selector string.
  • What does it return? It returns a FrameLocator object using which we can interact with elements in a frame.

If you look at the DOM of our frame, you’ll notice that the id of the frame is “frame1“. We can use this to locate the frame and retrieve the text written inside it.

Locating the frame

FrameLocator frameLocator = page.frameLocator("#frame1").first();

first() method retrieves the first element if multiple elements are satisfying the selector string.

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.FrameLocator;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

public class CodekruTest {

	public static void main(String[] args) {

		Playwright playwright = Playwright.create();
		Browser browser = playwright.chromium().launch();

		// creating a BrowserContext
		BrowserContext browserContext = browser.newContext();

		Page page = browserContext.newPage();

		// Navigating to the URL
		page.navigate("https://testkru.com/Interactions/Frames");

		FrameLocator frameLocator = page.frameLocator("#frame1").first();

		Locator locator = frameLocator.locator("h1");
		System.out.println("Text written inside the frame: " + locator.innerText());

		// closing the instances
		browser.close();
		playwright.close();

	}

}

Output –

Text written inside the frame: CodeKru
Switching back to the parent frame

Earlier, we discussed how to switch to a child frame. However, there may be instances where we need to switch back to the parent frame.

We can use the parentFrame() method to switch back to the parent frame.

Frame parentFrame = childFrame.parentFrame();
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Frame;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

public class CodekruTest {

	public static void main(String[] args) {

		Playwright playwright = Playwright.create();
		Browser browser = playwright.chromium().launch();

		// creating a BrowserContext
		BrowserContext browserContext = browser.newContext();

		Page page = browserContext.newPage();

		// Navigating to the URL
		page.navigate("https://testkru.com/Interactions/Frames");

		// switching to the child frame
		Frame childFrame = page.frame("singleFrame");

		Locator locator = childFrame.locator("h1");
		System.out.println("Text written inside the frame: " + locator.innerText());
		
		// switching back to parent frame
		Frame parentFrame = childFrame.parentFrame();

		// closing the instances
		browser.close();
		playwright.close();

	}

}

We hope that you have liked the article. If you have any doubts or concerns, please write to us in the comments or mail us at admin@codekru.com.

Liked the article? Share this on

Leave a Comment

Your email address will not be published. Required fields are marked *