[Feature] Allow display-mode media query to be emulated for standalone PWA

[BenStaveleyTaylor]

trafficstars

I would like to be able to run tests with the app (a PWA) in standalone mode, as though it had been installed as a desktop/home page app.

Use case: The app code needs to adapt to whether it is in browser or standalone mode and fine tune the UI, for example to add a back navigation UI in the absence of a browser Back button. I need to test that these changes work but I can’t figure out how to do it. Playwright always runs the tests in regular browser mode.

My app tests the mode at runtime with a media query:

const displayModeQuery = window.matchMedia('(display-mode: standalone)');
const isStandalone = displayModeQuery.matches

I would like to write something like this in my test setup, but it isn’t valid:

await page.emulateMedia({ display-mode: 'standalone' });

(My PWA manifest.json contains "display": "standalone")

[MattHorrocksNetwealth]

@BenStaveleyTaylor

I have the same requirement as you! Did you find any work arounds for this?

[BenStaveleyTaylor]

@MattHorrocksNetwealth No, sorry. I am not working in this area any more so will leave it to the Playwright team to comment further.

[MattHorrocksNetwealth]

@pavelfeldman Starting chromium with something like the code below seems like it should be enough to force the browser into standalone mode, but the --app flag is being ignored. Do you know why? Is this expected behaviour to ignore certain flags?

var Browser = await PlaywrightMain.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false, Args = new string[] { "--app=https://url-for-pwa" } });