[browser mode] headless browser test fails where test with ui doesn't

[philSixZero]

Describe the bug

I have created multiple component tests with playwright & chromium using the UI. Running those tests in headless browser mode, at least 2 of the 18 test fail. Because the locator.click() call gets stuck and the test fails with a timeout error. I put a try-catch around the command execution to see why it fails, and the output is the following:

- waiting for locator('[data-vitest="true"]').contentFrame().getByText('Create', { exact: true })
    - locator resolved to <button id="btn-create" data-type="create">…</button>
  - attempting click action
    2 × waiting for element to be visible, enabled and stable
      - element is visible, enabled and stable
      - scrolling into view if needed
      - done scrolling
      - element is outside of the viewport
    - retrying click action
    - waiting 20ms
    2 × waiting for element to be visible, enabled and stable
      - element is visible, enabled and stable
      - scrolling into view if needed
      - done scrolling
      - element is outside of the viewport
    - retrying click action
      - waiting 100ms
    54 × waiting for element to be visible, enabled and stable
       - element is visible, enabled and stable
       - scrolling into view if needed
       - done scrolling
       - element is outside of the viewport
     - retrying click action
       - waiting 500ms

After that the timeout error is thrown.

Two further observation:

1. When I re-run only the failing test (by changing the affected test file), the tests won't fail and the error is not reproducible. Rerunning all tests will always make these 2 tests fail (and sometimes one or two more).
2. Creating a screenshot of the page reveals that the button is actually there.

Reproduction

I have to create a reproduction setup, since it occurred within the company's setup.
It's definitely a bug since headless behaves differently compared to ui mode, which shouldn't be the case, and maybe other stumbled upon this as well.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
    Memory: 7.30 GB / 14.93 GB
  Binaries:
    Node: 22.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (129.0.2792.89)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitest/browser: 3.0.5 => 3.0.5
    @vitest/coverage-v8: 3.0.5 => 3.0.5
    @vitest/ui: 3.0.5 => 3.0.5
    playwright: ^1.50.1 => 1.50.1
    vitest: ^3.0.5 => 3.0.5

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.

[hi-ogawa]

It could a same issue as #6485. You may try page.setViewportSize from custom command to see if it's fixed.

[github-actions]

Hello @philSixZero. Please provide a minimal reproduction using a GitHub repository or StackBlitz (you can also use examples). Issues marked with needs reproduction will be closed if they have no activity within 3 days.

[philSixZero]

It could a same issue as #6485. You may try page.setViewportSize from custom command to see if it's fixed.

@hi-ogawa so your fix that you mention #6485 isn't in v3.0.5 yet?
Setting it via the config file is not enough then?

  browser: {
      viewport: { width: 1920, height: 1080 }, // here?
      enabled: true,
      screenshotFailures: true,
      screenshotDirectory: './out/__screenshots__',
      provider: 'playwright',
      instances: [{ browser: 'chromium' }],
      locators: {
        testIdAttribute: 'id'
      }
    }

[hi-ogawa]

#6485 is still open because #6512 is not merged yet, which means it's not fixed on v3.0.5 or any version.

[hi-ogawa]

I was suggesting to try the workaround mentioned by the issue author #6485 (comment)

const resizeViewport: BrowserCommand<[number, number]> = async ({ page }, width, height) => {
  await page.setViewportSize({ width, height });
};

[philSixZero]

#6485 is still open because #6512 is not merged yet, which means it's not fixed on v3.0.5 or any version.

My fault, I looked into it after writing the comment and saw that your PR is still in draft.

I was suggesting to try the workaround mentioned by the issue author #6485 (comment)

I will try that out! Using the built in command page.viewport() did not work.

[philSixZero]

Great! The suggested workaround did it. I was confused about the screenshot that shows all the elements being in the viewport, so I didn't think the other issue would be related to that one here.

Closing it, as it's a duplicate of #6485.