Rendering issues with headless Chromium

[Jak-Ch-ll]

Describe the bug

I've run into 3 issues with the headless mode of Chromium. These might be related so I decided to report them all at once, but I'm happy to split them into separate tickets if necessary.

Shared info

• The issues only happen with headless mode, headed mode is fine
• Browser: Chromium (Firefox is fine, Webkit not tested)
• Provider: Playwright (I didn't get Webdriver to work, so I'm not sure if it is affected as well)
• Reproducible with both Vue and Svelte so it does not seem to be framework dependent

Issue 1: Visibility checks fail

Visibility checks like toBeVisible fail for an element like <h1>. For a <button> they seem to work, which coincides with issue 2, in which only buttons are visible in the created screenshots, albeit without text.

Prior to Vitest v3.1.0 (tested with v3.0.9) the toBeVisible assertion works, but a click on the heading still fails and reports the element as not visible.

const title = getByRole("heading", { name: "Hello World!" });
await expect.element(title).toBeInTheDocument(); // succeeds
await expect.element(title).toBeVisible(); // fails

Issue 2: Empty screenshot

The created screenshots are (nearly) completely blank. The <button> element is rendered, but without text.

This is the markup:

  <div>
    <h1>Hello World!</h1>
    <button>Click me</button>
  </div>

This is the resulting screenshot:

Issue 3: <input /> crashes browser

When there is an <input /> element in the markup the tests fail and report a crash. The errors are different depending on the version, but it's likely the same underlying behavior:

v3.0.9: 'Page crashed when executing tests' v3.2.4: 'Browser connection was closed while running tests. Was the page closed unexpectedly?'

I found the discussion #7981 but that did wasn't truly solved. Setting 'Chorme' as a browser for Playwright is not allowed anymore and comes with an immediate error from Vitest.

Reproduction

https://github.com/Jak-Ch-ll/vitest-headless-issue

System Info

Additional note: this is WSL

System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 20.26 GB / 23.47 GB
    Container: Yes
    Shell: 5.3.0 - /nix/store/gkwbw9nzbkbz298njbn3577zmrnglbbi-bash-5.3p0/bin/bash
  Binaries:
    Node: 22.17.0 - /nix/store/whnr2rydma74q97zs56ic601ixs88njg-nodejs-22.17.0/bin/node
    npm: 10.9.2 - /nix/store/whnr2rydma74q97zs56ic601ixs88njg-nodejs-22.17.0/bin/npm
    pnpm: 10.11.1 - /nix/store/lfviy3gx19y9vh61lnh9s41bp8hprkp0-corepack-nodejs-22.17.0/bin/pnpm
  npmPackages:
    @vitejs/plugin-vue: ^6.0.1 => 6.0.1
    @vitest/browser: ^3.2.4 => 3.2.4
    playwright: ^1.54.2 => 1.54.2
    vitest: ^3.2.4 => 3.2.4
    vitest-browser-svelte: ^1.0.0 => 1.0.0
    vitest-browser-vue: ^1.0.0 => 1.0.0
    webdriverio: ^9.18.4 => 9.18.4

Used Package Manager

pnpm

Validations

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