Tutorials123: Playwright Window Handling

Showing posts with label Playwright Window Handling. Show all posts

Open a New Tab in Playwright

What is a Tab in Playwright?

In browser automation, a tab is represented as a Page object in Playwright.
Each new tab is essentially a new Page instance, but it still belongs to the same BrowserContext.
This allows multiple tabs to run in parallel, isolated from each other’s states like cookies, local storage, and sessions (if contexts are separated).

How to Open a New Tab in Playwright?

(1) Start with a Browser and Context

When you launch a browser in Playwright, you typically work inside a BrowserContext.
A single context can represent one user session.

(2) Create a New Page (Tab)

To open a new tab, you create a new Page inside the same BrowserContext.
Each new Page = a new tab in that browser window.

(3) Switching Between Tabs

Each tab (Page) can be referenced independently.
You can perform actions like navigation, clicking, form filling, etc., on one Page while keeping the other Page open in the background.

(4) Running Multiple Tabs

Playwright allows multiple Page instances in parallel.
This is useful for scenarios like: Testing multi-tab workflows (e.g., clicking a link opens a new tab), Comparing data across tabs, Simulating multiple user journeys side by side.

(5) Closing Tabs

Once a tab (Page) is no longer needed, it can be closed independently without affecting other open tabs.

Example Use Cases in Testing

E-commerce: Add a product to the cart in one tab, check order history in another.
Authentication: Login in one tab, open a secure page in another tab to verify session sharing.
Social Media: Open multiple tabs to simulate different user feeds.

In Playwright Java, opening a new tab is done by creating a new Page from the existing BrowserContext. A tab in a browser corresponds to a Page object in Playwright. Here's how it works:

Steps to Open a New Tab in Playwright Java:

Launch the browser.
Create a browser context using browser.newContext().
Open the first tab using context.newPage().
Open a second tab (new page) using the same context.newPage().
Navigate both tabs to different websites or perform other actions.

Example Website Used:

We'll use https://example.com for the first tab and https://playwright.dev for the second.

Java Code to Open New Tab in Playwright:

import com.microsoft.playwright.*;

public class OpenNewTabExample {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            // Step 1: Launch browser
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));

            // Step 2: Create a new browser context
            BrowserContext context = browser.newContext();

            // Step 3: Open the first tab
            Page firstTab = context.newPage();
            firstTab.navigate("https://example.com");
            System.out.println("First tab title: " + firstTab.title());

            // Step 4: Open a new tab (second tab)
            Page secondTab = context.newPage();
            secondTab.navigate("https://playwright.dev");
            System.out.println("Second tab title: " + secondTab.title());

            // Wait so you can see the browser tabs before the program closes
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}

Code explanation:

(a) Launch the browser

(b) Open a Browser Context

(d) Open the second tab

(e) Wait time to see the execution

Important Points:

BrowserContext behaves like an incognito window — tabs (Pages) under the same context can share session data.
context.newPage() opens a new tab in the same browser window.
navigate(url) is used to open a website in that tab.
You can interact with both tabs using their respective Page objects.

In Playwright, maximizing the browser window means opening the browser in such a way that it occupies the full available screen space of the operating system, similar to when a user clicks the maximize button on a normal browser window.

By default, when Playwright launches a browser, it opens in a standard viewport size (often 1280×720 or as configured). If the viewport is not specified, Playwright automatically applies its default dimensions. However, maximizing is not automatically done because Playwright is designed to provide predictable, controlled environments for automation rather than adapting to the current screen resolution.

(a) Maximizing the window is useful in scenarios such as:

(b) When testing applications that behave differently on full-screen layouts versus smaller viewports.

(d) When ensuring that the UI is tested under real-world screen conditions, such as a user running the browser maximized.

Although there isn’t a direct "maximize" command in Playwright like in Selenium, the effect is usually achieved by setting the browser window size equal to the screen’s resolution. In essence, maximizing is about resizing the Playwright browser context to cover the full display area so that the tests replicate what an end user would see on a maximized browser.

In order to maximize window while using Playwright Java, you typically set the viewport size to match the screen size, since Playwright does not have a direct method like maximize() (as in Selenium). However, we can simulate maximization by:

Launching the browser in headful mode.
Fetching the screen dimensions.
Setting the viewport to full screen dimensions.

Steps to Maximize Browser Window in Playwright Java:

Launch Playwright.
Start browser in headful mode (not headless).
Use setViewportSize() to simulate maximized window.

Java Code Example to Maximize Window in Playwright

import com.microsoft.playwright.*;

public class MaximizeWindowExample {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            // Launch the browser in headful mode (so we can see the window)
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));

            // Create a new browser context without a specified viewport size (will use system default)
            BrowserContext context = browser.newContext(new Browser.NewContextOptions().setViewportSize(null));

            // Create a new page
            Page page = context.newPage();

            // Navigate to a website
            page.navigate("https://example.com");

            // Optional: log current viewport size
            System.out.println("Viewport size: " + page.viewportSize());

            // Wait to see the maximized window
            page.waitForTimeout(5000); // 5 seconds

            // Close browser
            browser.close();
        }
    }
}

Explanation:

.setHeadless(false): Launches the browser in visible mode.
.setViewportSize(null): Instructs Playwright to use the full available screen size, which mimics maximizing.
page.waitForTimeout(5000): Allows you to see the effect before closing the browser.

Below is the difference between headed mode and headless mode

Headed Mode (UI Visible)

In this mode, the browser actually opens on your screen.

If you want a maximized effect, you need to set the window size equal to the system’s screen resolution (e.g., 1920×1080).

Since the browser is visible, you can truly replicate what happens when a real user clicks the maximize button.

This is often used for manual debugging, visual checks, or when testing UI behavior at full resolution.

Headless Mode (UI Hidden)

In headless mode, there’s no actual "window" being drawn on the screen.

The concept of "maximization" doesn’t really exist, since nothing is visible.

Instead, Playwright just renders pages in whatever viewport size you specify.

If you want the same conditions as a maximized window, you simply configure the viewport to match a full HD resolution (e.g., 1920×1080).