When browser.viewport is set and with the webdriver backend, sometimes parts of the app are unreachable

[julienw]

Describe the bug

I got this issue in the context of Webdriver + Firefox, where a button was in the viewport but not visible. In that case the click on the button succeeded but no action really appeared.

I can see several issues:

1. Chrome is launched fullscreen but Firefox is launched as a window, so the issue can happen much more easily in Firefox.
2. With playwright the application is "zoomed out" so that the viewport fits in the available space, but in webdriver the zoom level is always 100% (both in Chrome and Firefox). I don't know if that's a issue with webdriver or vitest or vitest's configuration of webdriver.
3. Part of the issue, I think, is also that vitest's interface can not be scrolled.
4. In Chrome, when running the test after reducing the window size, I get an error but in Firefox there's no error making the issue silent -- This is probably rather a bug in Firefox and I'll report it there too (bug 1994715).

Reproduction

You can find a testcase in this repository: https://github.com/julienw/vitest-browser-mode-viewport-click
The main branch uses webdriver while the playwright branch uses playwright so that it's easy to compare.

System Info

System:
    OS: Linux 6.7 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900H @ 2.50GHz
    Memory: 29.55 GB / 62.54 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 24.8.0 - /home/julien/.nvm/versions/node/v24.8.0/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 11.6.0 - /home/julien/.nvm/versions/node/v24.8.0/bin/npm
    pnpm: 10.9.0 - /home/julien/.local/share/pnpm/pnpm
    bun: 1.0.29 - /home/julien/.bun/bin/bun
    Deno: 2.0.0 - /home/julien/.cargo/bin/deno
    Watchman: 4.9.0 - /usr/bin/watchman
  Browsers:
    Chrome: 139.0.7258.127
    Chromium: 139.0.7258.127
    Firefox: 128.13.0esr
    Firefox Developer Edition: 128.13.0esr
  npmPackages:
    @vitest/browser: ^3.2.4 => 3.2.4 
    playwright: ^1.49.1 => 1.56.0 
    vite: ^7.1.10 => 7.1.10 
    vitest: ^3.2.4 => 3.2.4 
    webdriverio: ^9.20.0 => 9.20.0

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[julienw]

I guess this is where we could zoom out the window like with playwright:

vitest/packages/browser-webdriverio/src/webdriverio.ts

Line 124 in 4f8e77c

devicePixelRatio: 1,

And maybe this is where we would maximize the window?

vitest/packages/browser-webdriverio/src/webdriverio.ts

Line 167 in 4f8e77c

await this._throwIfClosing()

[sheremet-va]

I guess this is where we could zoom out the window like with playwright:

Zooming out does not work with webdriver APIs. Click and other APIs cannot find the element that way. See: #6512

And maybe this is where we would maximize the window?

Maximizing the window is only supported by chromium. See: #5984

The reason why playwright and wdio behave differently here is because wdio just doesn't support these things, so we avoid zooming. We also maximize the window just for better DX, it should have no effect on tests in theory.

[julienw]

I guess this is where we could zoom out the window like with playwright:

Zooming out does not work with webdriver APIs. Click and other APIs cannot find the element that way. See: #6512

Mmm is that a webdriver spec issue or a bug in the browsers' implementations?

And maybe this is where we would maximize the window?

Maximizing the window is only supported by chromium. See: #5984

Would it be possible to send the MaximizeWindow webdriver command after the browser started?
https://github.com/webdriverio/webdriverio/blob/25f398b666c97934b1bbd69c338d70b9c2f714c6/packages/wdio-protocols/src/protocols/webdriver.ts#L433-L448

The reason why playwright and wdio behave differently here is because wdio just doesn't support these things, so we avoid zooming. We also maximize the window just for better DX, it should have no effect on tests in theory.

In theory no, in practice it does though...

As I wrote above, I noticed that vitest's interface itself can not be scrolled, which can be part of the problem: the iframe is large enough for my app not to be scrolled, but part of it is hidden because Firefox window is too small. But because vitest's UI is not scrollable, the browser can't scroll there.

[sheremet-va]

Mmm is that a webdriver spec issue or a bug in the browsers' implementations?

I think this is browsers' implementations.

Would it be possible to send the MaximizeWindow webdriver command after the browser started?

I think so, we could send this event after opening the browser, but before running tests

As I wrote above, I noticed that vitest's interface itself can not be scrolled, which can be part of the problem: the iframe is large enough for my app not to be scrolled, but part of it is hidden because Firefox window is too small. But because vitest's UI is not scrollable, the browser can't scroll there.

I think the iframe element itself can be scrolled though, no?

[julienw]

I think this is browsers' implementations.

So you're saying that changing devicePixelRatio here:

vitest/packages/browser-webdriverio/src/webdriverio.ts

Lines 116 to 128 in 4f8e77c

	async setViewport(options: { width: number; height: number }): Promise<void> {
	if (this.topLevelContext == null || !this.browser) {
	throw new Error(`The browser has no open pages.`)
	}
	await this.browser.send({
	method: 'browsingContext.setViewport',
	params: {
	context: this.topLevelContext,
	devicePixelRatio: 1,
	viewport: options,
	},
	})
	}

makes that browsers do not click properly later? Definitely worth fixing :-)

As I wrote above, I noticed that vitest's interface itself can not be scrolled, which can be part of the problem: the iframe is large enough for my app not to be scrolled, but part of it is hidden because Firefox window is too small. But because vitest's UI is not scrollable, the browser can't scroll there.

I think the iframe element itself can be scrolled though, no?

When the viewport setting is big enough that the frame is wider than the browser window, then even by scrolling the iframe there will be a part of the page that's not visible because it will be too far in the right.
With a viewport setting big enough, the webapp won't probably overflow and the iframe won't scroll, but still part of the webapp will be outside of the browser viewport.

[sheremet-va]

makes that browsers do not click properly later? Definitely worth fixing :-)

I've not actually tinkered that option specifically yet. As far as I understand, it affect the whole window and not just the iframe. What we tried to do is keep the playwright's implementation (just use the scale on an iframe). It seems to work fine for whatever reason in playwright, but webdriver would not be able to find an element.

[julienw]

makes that browsers do not click properly later? Definitely worth fixing :-)

I've not actually tinkered that option specifically yet. As far as I understand, it affect the whole window and not just the iframe.

ah yeah I believe you're right, not the right spot then!

What we tried to do is keep the playwright's implementation (just use the scale on an iframe). It seems to work fine for whatever reason in playwright, but webdriver would not be able to find an element.

I see, this would need some digging in :-)