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:
- Using frame() method
- Using frameLocator() method
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.
We can inspect on the frame to reveal its DOM.
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: CodeKruYou 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.