Browser mode showing blank page

[guansss]

Describe the bug

When using browser mode, the browser window pops up with a blank page regardless of the test status.

I guess it's because the iframe's src assignment was removed in this PR?

Reproduction

It's just a basic setup so I'm just pasting the files here:

{
  "name": "vitest-ui-bug",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "test": "vitest"
  },
  "devDependencies": {
    "vitest": "^1.3.1"
  }
}

import { test, expect } from 'vitest';

test('foo', () => {
  expect(window.innerWidth).toBeGreaterThan(0);
});

npx vitest --browser=chrome

The test passed normally.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400 @ 2.60GHz
    Memory: 3.48 GB / 15.80 GB
  Binaries:
    Node: 18.19.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\scoop\apps\yarn\current\bin\yarn.CMD
    npm: 10.2.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.128)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    vitest: ^1.3.1 => 1.3.1

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.

[sheremet-va]

Did you try passing down --ui flag?

[guansss]

I just tried and it opened the UI in my default browser (Edge), this might not be the expected behavior because in previous Vitest
versions the UI would be opened in the same browser that runs tests.

Previously I was using Vitest v1.0.1 and it worked fine without passing the --ui flag.

[luin]

Hope I will have time later to provide more information, but the current issue is that after upgrading from 1.1.3 to 1.3.1, sometimes the blank screen issue occurs. It seems there are no errors in the console, but the body is empty.

[jaens]

I can reproduce this easily with the latest version, just run any browser test, with browser eg. "chrome".

The cause is the <iframe id="vitest-ui"> having height set to 100% and always pushing the results iframe off the screen.

Note that this (still) happens when the UI is disabled.

This probably also causes #5568.

[jaens]

I am guessing this might be because 4f40177 changed the position where the test container is rendered, so it is always after the UI iframe (previously it was just rendered... wherever, I suppose).

cc @sheremet-va

[NavalSu]

I looked into it, and does the final packaging relate to this 'index.html' file? Can it be adjusted?