[Bug] device* media queries are not triggered with viewport emulation

[tomgallagher]

If you want to test sites with media queries, setting the viewport is not enough.

I've found that I also need to change the window size to accommodate media queries and accurately reflect what a user would see with certain screen sizes

await chromium.launch({args: [ --window-size=${someWidth},${someHeight}]});

That's easy enough thanks to your helpful device dictionary.

Am I missing something here?

Is it possible to change the default window size on all browser instances launched by Playwright?

Failing that, are there comparable flags for Firefox and Webkit?

[aslushnikov]

If you want to test sites with media queries, setting the viewport is not enough.

@tomgallagher to the best of my knowledge, viewport emulation should be enough 🤔 can you give an example?

[tomgallagher]

Hi, thanks for getting back

By way of an example, go to this site

There's a sub-header banner that has the following media rule

@media screen and (max-width: 767px) {
    .installButtonSegment {
        display: none;
        width: 100vw;
    }
}

It does not show in retrieved screenshot when the viewport is set and browser context confirmed as:

viewport: {
      width: 1366,
      height: 768,
      deviceScaleFactor: 1,
      isMobile: false
}

But it shows when launching the browser with:

chromium.launch({args: ['--no-sandbox', --window-size=1366,768] });
`

[aslushnikov]

@tomgallagher thank you for the great repro! This is fixed on Chromium now; the viewport now emulates screen sizes as well so screenshots are consistent.

We'll fix this in other browsers as well!

[tomgallagher]

Good stuff! 😄

[dgozman]

#1565 fixed this for Firefox.

[dgozman]

I believe this is now fixed in all browsers 🎉