[Question] Popup window is not opened in Fullscreen mode

[louis57]

Context:

• Playwright Version: v1.2.1
• Operating System: Ubuntu 18.04.5 LTS
• Node.js version: v15.3.0
• Browser: all

Describe the bug

The starting browser is opened in fullscreen successfully. However, the popup window (new page) is not. Here is my code:

const browser = await chromium.launch({
        args: ['--start-maximized'],
        headless : false, slowMo : 50});
const context = await browser.newContext({viewport : null});
const loginPage = await context.newPage();
await loginPage.goto(myURL.href);  //Login Page was opened in Maximized mode (Fullscreen)

// Next step is to click a button on Login Page, and a new page is opened.
await loginPage.click('#nextBtn');

console.log('Get page after a specific action (e.g. clicking a button');
const [overviewPage] = await Promise.all([
    context.waitForEvent('page')
]);
await overviewPage.waitForLoadState();
await overviewPage.screenshot({ path: `reportoverview.png` });
console.log('Current window: ' + await overviewPage.title());

Everything works, except the new Popup window is not maximized. I expect that, I already set maximized flag in the context, so the new popup window should be also maximized. Or am I missing something.

Thank you.

[aslushnikov]

Everything works, except the new Popup window is not maximized.

@louis57 I don't see --start-maximized flag working altogether - not in Playwright v1.6.1, not in v1.2.1 that you use. What are you trying to achieve?

If you want to run with a huge viewport, I'd recommend specifying exact viewport, like this:

const context = await browser.newContext({viewport : {
  width: 1920,
  height: 1024,
}});

This way the test won't depend on screen resolution and will work the same way in both headful and headless modes.

[louis57]

@aslushnikov thanks for your answer. --start-maximized works fine for me. The browser is opened in fullscreen, and it doesn't depend on my screen resolution.

The software I am testing has many popup windows / modal windows. The main page loginPage is opened in fullscreen mode. After an action, a new popup (modal) window will be opened, eg. overviewPage

What I want to achieve is to change the viewport of a popup window, or maximize it, in this case is overviewPage

[aslushnikov]

thanks for your answer. --start-maximized works fine for me. The browser is opened in fullscreen, and it doesn't depend on my screen resolution.

@louis57 Interesting! I don't have headful linux ATM to check this, but this definitely doesn't work on OSX. Here's the script I try (also please check out inline comments):

Popup dimensions demo

```js const playwright = require('playwright'); (async () => { browser = await playwright.chromium.launch({ args: ['--start-maximized'], // does not have any difference on Mac headless: false, }); const context = await browser.newContext({viewport: null}); // The following would specify the page size, unless popup // size is explicitly defined. /* const context = await browser.newContext({viewport: { width: 1000, height: 1000, }}); */ const page = await context.newPage(); await page.goto('about:blank'); await page.setContent(` open popup `); await page.click('button'); })(); ```

Everything works, except the new Popup window is not maximized.

@louis57 one more question: if you run your scenario manually, starting with a maximized browser, is the popup opened maximized as well? If not, then popup is being opened with predefined width and height.

What I want to achieve is to change the viewport of a popup window, or maximize it, in this case is overviewPage

Unless popup has explicit dimensions, context's viewport option will affect all the popups that are opened in the given context. Is there a specific reason you want to use --start-maximized over the browser.newContext({viewport: {width: 2000, height: 1000}})?

[louis57]

@aslushnikov

if you run your scenario manually, starting with a maximized browser, is the popup opened maximized as well? If not, then popup is being opened with predefined width and height.

I forgot to mention about this: The popup is opened with a predefined width and height, so user needs to maximize it manually.

Base on your explanation about the popup's dimensions and your script, I am able to set the viewport of the popup window to my demand with setViewportSize

await overviewPage.setViewportSize({ width: 1920, height: 1080 });

It solved my problem.

Thank you very much for your help :+1:

[louis57]

@aslushnikov sorry to bother you again.

Is there a specific reason you want to use --start-maximized over the browser.newContext({viewport: {width: 2000, height: 1000}})?

Yes, there is a reason which I didn't realize before. My webapp has a footer. If I use --start-maximized in the context, then this footer will be shown. If I set the viewport, either (1920,1080) or (2000, 1000), this footer is not shown, I don't understand why, because the view port is already big enough. When I test manually, the footer is shown in all viewport size.

I have a test case to check the footer, but I couldn't proceed because of this problem. I thought setViewportSize solved my problem, but it didn't.

Now this --start-maximized works for loginPage which comes direct from context. But for popup window overviewPage, --start-maximized doesn't apply to it, even the setViewportSize doesn't really help. My goal is to set popup window also maximized, so that the footer is shown.

Have you by any chance a solution? Thanks