[BUG] Element is not opened in fullscreen mode ( chrome / chromium )

[PiotrSF]

System info

• Playwright Version: 1.39.0
• Operating System: macOS Ventura 13.5
• Browser: Chromium
• Other info:

Source code / Test code

import { test, expect } from '@playwright/test';

test.describe(`Fullscreen tests`, () => {

    test(`#1 Should open Fullscreen`, async ({ page })=> {

        await page.goto(`https://pktestblog1.blogspot.com/p/fullscreen-page.html`);
        await page.locator('#openFullscreen').click();
    })
})

HTML code for simple FS page is in .pdf in attachments

Config file

playwright.config.ts

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
 {
      name: 'Google Chrome',
      use: {
            ...devices['Desktop Chrome'], channel: 'chrome',
            launchOptions: {
            chromiumSandbox: true,
            ignoreDefaultArgs: [`--hide-scrollbars`],
            args: ['--disable-web-security'],
            },
            permissions: ["clipboard-read"],
     },
    },

Expected

Element should be opened in FS mode, works for firefox / webkit :

Actual

Button is found and clicked but element is not opened in fullscreen mode

Note
Fullscreen functionality for web element is crucial for our product and in our tests, thanks in advance.

fullscreen page.pdf

[viraxslot]

Hi, I believe the issue might be related to the screenshot being taken too quickly, which is why the full-screen mode isn't visible. I made some slight changes to your script, and it works fine for me.

test.describe.only(`Fullscreen tests`, () => {
  test(`#1 Should open Fullscreen`, async ({ page }) => {
    const title = "Fullscreen page";
    await page.goto(`https://pktestblog1.blogspot.com/p/fullscreen-page.html`);
    await expect(page.getByText(title)).toBeVisible();
    await page.locator("#openFullscreen").click();
    
    // for checking
    await page.waitForTimeout(500);
    await page.screenshot({ path: "full-screen.png" });
  });
});

Of course it's a bad practise to wait for a timeout. So you can add some hidden element that will appear/diappear in the full-screen mode and wait for it.

The result of the above script:

[kmlynski]

Hi @viraxslot
Your solution seems to not be working on chromium still. Here's the link to quick reproduction:
https://try.playwright.tech/?l=javascript&s=pzvu6ds

[PiotrSF]

Hey @viraxslot,

thanks for the comment but I was checking with time outs also before I created an issue but they don't help for chromium in anyway.

[yury-s]

Hi @viraxslot Your solution seems to not be working on chromium still. Here's the link to quick reproduction: https://try.playwright.tech/?l=javascript&s=pzvu6ds

The test will pass in headed if you move waitForTimeout to line 17:

[yury-s]

Hey @viraxslot,

thanks for the comment but I was checking with time outs also before I created an issue but they don't help for chromium in anyway.

The element does not get into full screen mode in headless browser today. I headed it should be working fine if yo wait long enough. See also #1086

[yury-s]

Filed upstream bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1493760

Meanwhile you can run with --headless=new as a workaround:

import { test, expect } from '@playwright/test';

test.use({
  launchOptions: {
    args: ['--headless=new']
  }
})

test(`simple test`, async ({ page }) => {
  await page.setContent(`
    <script>
    function openFullscreen(event) {
      event.target.requestFullscreen();
    }
    </script>
    <div style="width: 500; height: 500; background-color: green" onclick='openFullscreen(event)'></div>
    `);
  await page.locator('div').click();
  await page.waitForTimeout(1000);
  await page.screenshot({ path: "full-screen.png" });
});

[PiotrSF]

Thanks @yury-s, args: ['--headless=new'] works great!

[yury-s]

Filed upstream bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1493760

The upstream issue was fixed and the fix should make it to Playwright in 1.41.

[jaktestowac]

@yury-s can you confirm that it is part of Playwright 1.41?

[PiotrSF]

Yup, I'm looking forward for this fix because args: ['--headless=new'] is not working in some cases anyway :/

[PiotrSF]

Was this fix removed from 1.41 version ? :/

[carolhmj]

I'm seeing the same problem on 1.42, would love an update. I can provide a repro.