[Feature] create context in fullscreen mode

How to launch browser.newContext() or browser.newPage() in fullscreen ? There is no way to pass full-screen via options while calling browser.newContext(options).

I'm not sure what you mean. Currently the default is:

browser.newConext({
  viewport: {
    width: 800, // 1280 in commit 1ee6578
    height: 600, // 720 in commit 1ee6578
  }
})

If I understood correctly, you were expecting that viewport width and height will automatically be set to your current desktop/laptop's viewport?

I am talking about this new cognito window size, which I am launching by context.newPage(). Viewport is visible area which is visible on device, however browser window size is different. Opening new browser window in full screen size is my concern. How to launch it in full screen. Passing viewport do not help.

I know that the user can maximize the browser window and I know that the page can request full screen mode via the web api. But I'm not sure user can create a new full screen page.

Could you share more about your use case?

Sorry, my bad. My point is user maximize browser window. How can we get it done ? Before context.newPage(), I am getting context by browser.newContext(). Can we get new context in fullscreen mode ?

My point is user maximize browser window

If you call browser.newContext({ viewport: null }), it would tell Playwright to not emulate certain device size and will follow the browser size when maximized. Is that what you are looking for?

Before the viewport: null I'm getting:

width: 800 height: 600

which is expected of course, since that is the default. I tried the browser.newContext({ viewport: null }) and now I'm getting:

width: 1200 height: 610

Which does take the whole size of the browser, but the browser itself is not full screen. For reference, my full screen browser should measure:

{width: 1280, height: 721}

Side Note: not sure why there is an extra 1 pixel height, I used this method on an about:blank page:

{
  width: document.documentElement.clientWidth,
  height: document.documentElement.clientHeight
}

arjun27

arjun27 What do you think here ?

star-kashyap

Synced offline with star-kashyap to understand this better. Due to DRM constraints, the tests are executed in headful mode. A small browser window impacts verifiability of execution, and looks suboptimal to an observer.

While it is possible to use something like --start-fullscreen or --window-size as args to launch a browser, it is not possible to enlarge the size of a new window launched with newContext. Combination of enlarged window size and viewport: null would fix this.

I think launching with args: ['--window-size=1280,720'] and using viewport: null should bring you close to where you want to be. But that would be Chromium-specific solution. Non-chromium you should run with viewport: { width: 1280, height: 720 }.

Please feel free to reopen if there is something else we can do for you here!

Reopening as a feature request.

I've solved this problem (in Python) by using launch_persistent_context() instead of launch() and tweaking the arguments a little but. This change prevents opening pages in new windows.

from playwright.sync_api import sync_playwright as spl

pwt = spl().start()
browser = pwt.chromium.launch_persistent_context(
    # Required (emtpy string means a temporary profile)
    user_data_dir="",
    headless=False,
    # This hides the annoying infobar "Chrome is being controlled by automated test software",
    # but it may break some functionality of playwright
    ignore_default_args=["--enable-automation", "--no-startup-window"],
    # Also possible: --start-fullscreen
    args=["--kiosk"],
    no_viewport=True
)
page = browser.new_page()
page.goto("https://google.com/")

# Check that JavaScript can be evaluated despite removing --enable-automation
print(page.evaluate("location.href"))
print(page.evaluate("document.body.textContent = 'Hello world!'"))
dimensions = page.evaluate('''() => {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight,
            deviceScaleFactor: window.devicePixelRatio,
        }
    }''')
print(dimensions)

I've removed the default flag --enable-automation in order to hide the annoying infobar "Chrome is being controlled by automated test software". This is likely to break some features of playwright, but for me all that is important is to communicate with the page using JavaScript, which seems fine.

Cons:

I don't know if this code works with other browsers as well.
You cannot change the context in which pages are opened.

+1, I find this feature very useful.

+1 => absolutely required

do we have some solution for firefox apart from hardcoding the size? willing to see one!

Pavel Feldman (@pavelfeldman)

This worked for me:
from playwright.sync_api import sync_playwright
import time

p = sync_playwright().start()
browser = p.chromium.launch(args=['--start-maximized'], headless=False)
page = browser.new_page(no_viewport=True)
page.goto('https://www.google.com')
time.sleep(3600)
Upvoted this issue aswell 👍

Credits/thanks to Pavel Feldman (@pavelfeldman) (https://giters.com/microsoft/playwright-python/issues/585)

This solution in working good for me, thanks!

For some tests we needed fullscreen mode but I was not able to get it working.
After embarrasing count of hours I figured out that Playwright exposes the underlying CDP Session and we can use it to make the window fullscreen.
This works in chromium

  const client = await page.context().newCDPSession(page);
  // get window id from CDP session
  const { windowId } = await client.send("Browser.getWindowForTarget");
  await client.send("Browser.setWindowBounds", {
    windowId: windowId,
    bounds: { windowState: "fullscreen" },
  });

I don't know of any side effects this might cause, will update here if found any.

Bharat D Bhadresha (@imbdb)

Bharat D Bhadresha (@imbdb) You know your way around! Nice of you to share.

For some tests we needed fullscreen mode but I was not able to get it working. After embarrasing count of hours I figured out that Playwright exposes the underlying CDP Session and we can use it to make the window fullscreen. This works in chromium
  const client = await page.context().newCDPSession(page);
  // get window id from CDP session
  const { windowId } = await client.send("Browser.getWindowForTarget");
  await client.send("Browser.setWindowBounds", {
    windowId: windowId,
    bounds: { windowState: "fullscreen" },
  });
I don't know of any side effects this might cause, will update here if found any.

Yeah, I needed to test the full screen button on a web app but apparently playwright does not allow full screen to be triggered through events as it might interfere with accessibility of elements while the browser is full screen. You code snippet was the only way that allowed me to force full screen after the button was clicked.

For some tests we needed fullscreen mode but I was not able to get it working. After embarrasing count of hours I figured out that Playwright exposes the underlying CDP Session and we can use it to make the window fullscreen. This works in chromium
  const client = await page.context().newCDPSession(page);
  // get window id from CDP session
  const { windowId } = await client.send("Browser.getWindowForTarget");
  await client.send("Browser.setWindowBounds", {
    windowId: windowId,
    bounds: { windowState: "fullscreen" },
  });
I don't know of any side effects this might cause, will update here if found any.

I just made a little change to this configuration and this may help you get what you want to achieve. Try it out.

bounds: { windowState: 'maximized' },

Also, this is my playwright.config.ts
projects: [
{
name: 'chromium',
use: {
// ...devices['Desktop Chrome'],
headless: false,
launchOptions: {
args: ['--auth-server-allowlist="*"']
},
viewport: null,
}
},

wrote a blog post on how to resolve this issue when using playwright + python + pytest fixtures:
https://www.linkedin.com/pulse/test-automation-maximizing-browser-window-playwright-nir-tal-c24hf/

My answer here might help:
https://stackoverflow.com/a/77713226/19574650

For some tests we needed fullscreen mode but I was not able to get it working. After embarrasing count of hours I figured out that Playwright exposes the underlying CDP Session and we can use it to make the window fullscreen. This works in chromium

const client = await page.context().newCDPSession(page);
// get window id from CDP session
const { windowId } = await client.send("Browser.getWindowForTarget");
await client.send("Browser.setWindowBounds", {
windowId: windowId,
bounds: { windowState: "fullscreen" },
});
I don't know of any side effects this might cause, will update here if found any.

This is EXACTLY what I was looking for, converted to .NET in a LINQPad script for anyone looking to maximize the browser

class Program
{
	static async Task Main(string[] args)
	{
		using var playwright = await Playwright.CreateAsync();

		await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions
		{
			Headless = false
		});

		var context = await browser.NewContextAsync();
		var page = await context.NewPageAsync();
		var client = await context.NewCDPSessionAsync(page);

		var getWindowResult = await client.SendAsync("Browser.getWindowForTarget");
		var windowId = getWindowResult.Value.GetProperty("windowId").GetInt32();

                // Initial max to grab width and height
		await client.SendAsync("Browser.setWindowBounds", new Dictionary<string, object>
		{
			{ "windowId", windowId },
			{ "bounds", new Dictionary<string, object> { { "windowState", "maximized" } } }
		});
                var width = await page.EvaluateAsync<int>(@"() => window.innerWidth");
		var height = await page.EvaluateAsync<int>(@"() => window.innerHeight");
		
		await page.SetViewportSizeAsync(width, height);

		// Remaximize based on screen dimensions
		await client.SendAsync("Browser.setWindowBounds", new Dictionary<string, object>
		{
			{ "windowId", windowId },
			{ "bounds", new Dictionary<string, object> { { "windowState", "maximized" } } }
		});
		await page.GotoAsync("https://example.com");
		await Task.Delay(5000);
	}
}

Here's a link to the other options for windowState as well

feat(roll): roll to ToT Playwright (24-06-23) (microsoft#1086)

Sunbelt Computer Software

PL/B Language Development and Support

Navigation Menu

Repository navigation

[Feature] create context in fullscreen mode #1086

17 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Sunbelt Computer Software

PL/B Language Development and Support

[Feature] create context in fullscreen mode #1086

Description

Activity

aesyondu commented on Feb 25, 2020

star-kashyap commented on Feb 25, 2020

pavelfeldman commented on Feb 25, 2020

star-kashyap commented on Feb 25, 2020

pavelfeldman commented on Feb 25, 2020

aesyondu commented on Feb 26, 2020

star-kashyap commented on Feb 27, 2020

arjunattam commented on Feb 27, 2020

pavelfeldman commented on Feb 27, 2020

pavelfeldman commented on Oct 23, 2020

17 remaining items

kputyra commented on Jan 25, 2023

ssv-w32 commented on Jan 30, 2023

gs-vchauhan commented on May 17, 2023

ManiMozaffar commented on Jun 1, 2023

dron4ik86 commented on Aug 12, 2023

imbdb commented on Nov 25, 2023

cybairfly commented on Feb 21, 2024

craitose commented on Feb 28, 2024

AbhineetSharmax commented on Mar 4, 2024

nir-tal-talkspace commented on Mar 28, 2024

ilorwork commented on Aug 1, 2024

Dav1s-Ops commented on Apr 24, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions