[Feature] allow viewport size to be independent from the window size

I’m trying to test for responsive behavior of my library, The tests inspect the HTML state in a specific size, resize the viewport and re-check the state.

First of all, for debugging, I really like the behavior of the fixed viewport which allows debugging with a full window while keeping the document viewport restricted.

However there are several issues with the way the viewport works that makes it hard to build responsive tests:

1. once viewport is set, there is no way to return to viewport: null (setViewportSize doesn’t accept null).
2. changing the viewport size also triggers a change to the window size - that makes it hard to run multiple tests under the same window and removes the nice benefit that the separation of window & viewport sizes gives. It is also not consistent across browsers (Chromium changes size and if the dev tools are open it might minimize to hide the viewport while Firefox only changes the viewport and doesn’t change the window), it would be nice to maybe add a flag to prevent changing the window size.
3. There is no API to control the window size (although it exist under the devTools protocol: setWindowBounds, getWindowBounds).

Giving control over the window size and viewport size would really help building maintainable tests for libraries, applications and websites resize behavior.

[dgozman]

I’m checking out what needs/can to be done, and I wonder if you can guide me a bit since its my first PR in Playwright.

Thank you for contributing!

• should I test with window.outerWidth/outerHeight on chromium? or can you suggest another way of testing this? or not test this at all (I can see that the previous change for the window size didn’t test this)

I think this is the easiest way. Just check outerWidth/outerHeight before/after calling the method with and without the flag. emulation.spec.js is the right place. Mark it as it.skip(!CHROMIUM).

1. cloning Playwright without changing anything gave me 10 broken tests (1 in Firefox defaultbrowsercontext.spec, 4 in Firefox headful.spec, 2 in FireFox multiclient.spec, 3 in WebKit navigation.spec), I assume It’s a “my machine” issue that will work on CI

Oh, that’s bad news. Mind sharing the list of failing tests? We are serious about fighting flakiness.

Docs: - Adding the description for this flag, should I expand on the various window behaviors between the browsers?

Sure, why not. I think it would be easier to discuss in the PR itself.

RPC - I see there is a new RPC API under src, but there are no tests, should I just add the additional arg to the relevant signatures and code?

Tests for rpc could be run with PWCHANNEL=1 npm run test. This is still experimental, but plumbing it through will be the right thing.

[idoros]

I opened a PR.

---

About the failing tests:

1. I get 2 logs in the console with ERROR: the process "XXXX" not found when running only on Chromium (not getting them when running with PWCHANNEL=1)
2. The failing test log when running everything normally:

Failures:
1) [TIMEOUT 10000ms] Firefox launchPersistentContext() should support viewport option (defaultbrowsercontext.spec.js:136:3)
 Output:
 [extra] [browser] => browserType.launchPersistentContext started
 [extra] [browser] <launching> C:\Users\username\AppData\Local\ms-playwright\firefox-1116\firefox\firefox.exe -no-remote -headless -profile C:\Users\username\AppData\Local\Tem
p\playwright_dev_profile-GLLstk -juggler 0 about:blank
 [extra] [browser] <launched> pid=19280
 [extra] [browser] *** You are running in headless mode.

2) [TIMEOUT 10000ms] Firefox Headful should not crash when creating second context (headful.spec.js:60:3)
 Output:
 [extra] [browser] => browserType.launch started
 [extra] [browser] <launching> C:\Users\username\AppData\Local\ms-playwright\firefox-1116\firefox\firefox.exe -no-remote -wait-for-browser -foreground -profile C:\Users\mml
oc\AppData\Local\Temp\playwright_firefoxdev_profile-GalIOO -juggler 0 -silent
 [extra] [browser] <launched> pid=20792
 [extra] [browser] Juggler listening on ws://127.0.0.1:54806/e1748ff6-e646-440a-ad24-9d9b7f172414
 [extra] [browser] <ws connecting> ws://127.0.0.1:54806/e1748ff6-e646-440a-ad24-9d9b7f172414
 [extra] [browser] <ws connected> ws://127.0.0.1:54806/e1748ff6-e646-440a-ad24-9d9b7f172414
 [extra] [browser] <= browserType.launch succeeded
 [extra] [browser] JavaScript error: resource://gre/modules/XULStore.jsm, line 66: Error: Can't find profile directory.
 [extra] [browser] [Parent 25248, Gecko_IOThread] WARNING: file c:/playwright/browser_patches/firefox/checkout/ipc/chromium/src/base/process_util_win.cc, line 166
 [extra] [browser] [Parent 25248, Gecko_IOThread] WARNING: file c:/playwright/browser_patches/firefox/checkout/ipc/chromium/src/base/process_util_win.cc, line 166

3) [TIMEOUT 10000ms] Firefox Headful should click background tab (headful.spec.js:74:3)
 Output:
 [extra] [browser] => browserType.launch started
 [extra] [browser] <launching> C:\Users\username\AppData\Local\ms-playwright\firefox-1116\firefox\firefox.exe -no-remote -wait-for-browser -foreground -profile C:\Users\mml
oc\AppData\Local\Temp\playwright_firefoxdev_profile-LUpwgc -juggler 0 -silent
 [extra] [browser] <launched> pid=6836
 [extra] [browser] Juggler listening on ws://127.0.0.1:54828/235d0deb-5ea3-47ff-ac67-0d3d6e6401e6
 [extra] [browser] <ws connecting> ws://127.0.0.1:54828/235d0deb-5ea3-47ff-ac67-0d3d6e6401e6
 [extra] [browser] <ws connected> ws://127.0.0.1:54828/235d0deb-5ea3-47ff-ac67-0d3d6e6401e6
 [extra] [browser] <= browserType.launch succeeded
 [extra] [browser] JavaScript error: resource://gre/modules/XULStore.jsm, line 66: Error: Can't find profile directory.

4) [TIMEOUT 10000ms] Firefox Headful should(not) block third party cookies (headful.spec.js:82:3)
 Output:
 [extra] [browser] => browserType.launch started
 [extra] [browser] <launching> C:\Users\username\AppData\Local\ms-playwright\firefox-1116\firefox\firefox.exe -no-remote -wait-for-browser -foreground -profile C:\Users\mml
oc\AppData\Local\Temp\playwright_firefoxdev_profile-paRr23 -juggler 0 -silent
 [extra] [browser] <launched> pid=14908
 [extra] [browser] Juggler listening on ws://127.0.0.1:54844/cd929323-e81a-46df-9332-648b304705bf
 [extra] [browser] <ws connecting> ws://127.0.0.1:54844/cd929323-e81a-46df-9332-648b304705bf
 [extra] [browser] <ws connected> ws://127.0.0.1:54844/cd929323-e81a-46df-9332-648b304705bf
 [extra] [browser] <= browserType.launch succeeded
 [extra] [browser] JavaScript error: resource://gre/modules/XULStore.jsm, line 66: Error: Can't find profile directory.

5) [TIMEOUT 10000ms] Firefox Headful should not override viewport size when passed null (headful.spec.js:121:18)
 Output:
 [extra] [browser] => browserType.launch started
 [extra] [browser] <launching> C:\Users\username\AppData\Local\ms-playwright\firefox-1116\firefox\firefox.exe -no-remote -wait-for-browser -foreground -profile C:\Users\mml
oc\AppData\Local\Temp\playwright_firefoxdev_profile-6vSUO3 -juggler 0 -silent
 [extra] [browser] <launched> pid=22788
 [extra] [browser] Juggler listening on ws://127.0.0.1:54866/559d9d5d-5d47-4e11-81b0-42f08b1f4d4f
 [extra] [browser] <ws connecting> ws://127.0.0.1:54866/559d9d5d-5d47-4e11-81b0-42f08b1f4d4f
 [extra] [browser] <ws connected> ws://127.0.0.1:54866/559d9d5d-5d47-4e11-81b0-42f08b1f4d4f
 [extra] [browser] <= browserType.launch succeeded
 [extra] [browser] JavaScript error: resource://gre/modules/XULStore.jsm, line 66: Error: Can't find profile directory.

6) [TIMEOUT 10000ms] Firefox BrowserContext should work across sessions (multiclient.spec.js:21:3)
 Output:
 [extra] [browser] => browserType.launchServer started
 [extra] [browser] <launching> C:\Users\username\AppData\Local\ms-playwright\firefox-1116\firefox\firefox.exe -no-remote -headless -profile C:\Users\username\AppData\Local\Tem
p\playwright_firefoxdev_profile-UcjwFT -juggler 0 -silent
 [extra] [browser] <launched> pid=19204
 [extra] [browser] *** You are running in headless mode.
 [extra] [browser] Juggler listening on ws://127.0.0.1:54893/6ed2bdb0-f73b-4549-9a74-ad1aa175ad68
 [extra] [browser] <ws connecting> ws://127.0.0.1:54893/6ed2bdb0-f73b-4549-9a74-ad1aa175ad68
 [extra] [browser] <ws connected> ws://127.0.0.1:54893/6ed2bdb0-f73b-4549-9a74-ad1aa175ad68
 [extra] [browser] <= browserType.launchServer succeeded
 [extra] [browser] <gracefully close start>
 [extra] [browser] <ws disconnected> ws://127.0.0.1:54893/6ed2bdb0-f73b-4549-9a74-ad1aa175ad68
 [extra] [browser] JavaScript error: resource://gre/modules/XULStore.jsm, line 66: Error: Can't find profile directory.
 [extra] [browser] <process did exit: exitCode=0, signal=null>

7) [TIMEOUT 10000ms] Firefox browserType.connect should be able to connect multiple times to the same browser (multiclient.spec.js:80:3)
 Output:
 [extra] [browser] => browserType.launchServer started
 [extra] [browser] <launching> C:\Users\username\AppData\Local\ms-playwright\firefox-1116\firefox\firefox.exe -no-remote -headless -profile C:\Users\username\AppData\Local\Tem
p\playwright_firefoxdev_profile-z8pDth -juggler 0 -silent
 [extra] [browser] <launched> pid=23944
 [extra] [browser] *** You are running in headless mode.
 [extra] [browser] Juggler listening on ws://127.0.0.1:54924/7ae9af5d-880b-4695-be82-80c9a9551931
 [extra] [browser] <ws connecting> ws://127.0.0.1:54924/7ae9af5d-880b-4695-be82-80c9a9551931
 [extra] [browser] <ws connected> ws://127.0.0.1:54924/7ae9af5d-880b-4695-be82-80c9a9551931
 [extra] [browser] <= browserType.launchServer succeeded
 [extra] [browser] JavaScript error: resource://gre/modules/XULStore.jsm, line 66: Error: Can't find profile directory.
 [extra] [browser] [Parent 25088, Gecko_IOThread] WARNING: file c:/playwright/browser_patches/firefox/checkout/ipc/chromium/src/base/process_util_win.cc, line 166
 [extra] [browser] <gracefully close start>
 [extra] [browser] <ws disconnected> ws://127.0.0.1:54924/7ae9af5d-880b-4695-be82-80c9a9551931

8) [FAIL] WebKit Page.goto should fail when navigating to bad SSL (navigation.spec.js:154:3)

 1035 | } else if (WEBKIT) {
 1036 | if (MAC)
 1037 | expect(errorMessage).toContain('The certificate for this server is invalid');
 1038 | else if (WIN)
 1039 | expect(errorMessage).toContain('SSL peer certificate or SSH remote key was not OK');
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~^

 Received: "SSL connect error\n====================== page.goto logs ======================\n[api] navigating to \"https://localhost:8908/empty.html\", waiting until \
"load\"\n============================================================\nNote: use DEBUG=pw:api environment variable and rerun to capture Playwright logs."


9) [FAIL] WebKit Page.goto should fail when navigating to bad SSL after redirects (navigation.spec.js:164:3)

 1035 | } else if (WEBKIT) {
 1036 | if (MAC)
 1037 | expect(errorMessage).toContain('The certificate for this server is invalid');
 1038 | else if (WIN)
 1039 | expect(errorMessage).toContain('SSL peer certificate or SSH remote key was not OK');
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~^

 Received: "SSL connect error\n====================== page.goto logs ======================\n[api] navigating to \"https://localhost:8908/redirect/1.html\", waiting un
til \"load\"\n============================================================\nNote: use DEBUG=pw:api environment variable and rerun to capture Playwright logs."


10) [FAIL] WebKit Page.waitForNavigation should work with clicking on links which do not commit navigation (navigation.spec.js:594:3)

 1035 | } else if (WEBKIT) {
 1036 | if (MAC)
 1037 | expect(errorMessage).toContain('The certificate for this server is invalid');
 1038 | else if (WIN)
 1039 | expect(errorMessage).toContain('SSL peer certificate or SSH remote key was not OK');
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~^

 Received: "SSL connect error\n=============== page.waitForNavigation logs ===============\n[api] waiting for navigation until \"load\"\n==============================
==============================\nNote: use DEBUG=pw:api environment variable and rerun to capture Playwright logs."