I have a Progressive Web App (PWA) with Playwright tests. A PWA can be installed to the Android/iOS home screen as an app. A manifest.json file then determines the app UI behaviour. My manifest contains the line:
"display": "standalone",
to hide the browser URL bar and forward/back buttons in the installed app.
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 naturally runs the tests in browser mode so I can’t test the standalone path.
My app tests the mode with a media query:
const displayModeQuery = window.matchMedia('(display-mode: standalone)');
const isStandalone = displayModeQuery.matches
I have read https://playwright.dev/docs/emulation and https://playwright.dev/docs/api/class-page#page-emulate-media. I would like to write something like this in my test setup, but it isn’t valid:
await page.emulateMedia({ display-mode: 'standalone' });
How can I run the test in an environment where my isStandalone variable would be true, using desktop Chrome for the tests?