Browser viewport does not match iframe viewport when the UI is disabled

[nstepien]

Describe the bug

When ui: false or headless: true, the browser viewport is only 1280x720px.
We set viewport: { width: 1920, height: 1080 }, while the document inside the iframe does have the expected dimensions, elements outside the browser viewport cannot be interacted with, breaking tests.

In our case, this broke a test with userEvent.dragAndDrop():

  - waiting for getByText('Column 2')
  -   locator resolved to <div class="labelClassname_l13ks0oh">Column 2</div>  - attempting move and up action
  -   waiting for element to be visible and stable
  -   element is visible and stable
  -   scrolling into view if needed
  -   done scrolling
  -   element is outside of the viewport
  - retrying move and up action, attempt #1
  -   waiting for element to be visible and stable
  -   element is visible and stable
  -   scrolling into view if needed
  -   done scrolling
  -   element is outside of the viewport
  - retrying move and up action, attempt #2
  -   waiting 20ms
  -   waiting for element to be visible and stable
  -   element is visible and stable
  -   scrolling into view if needed
  -   done scrolling
  -   element is outside of the viewport

Screenshots are still at the iframe's viewport dimensions though.

We had to resort to adding a custom command, and calling it in a beforeAll:

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

Reproduction

    browser: {
      enabled: true,
      headless: true,
      name: 'chromium',
      provider: 'playwright',
      viewport: { width: 1920, height: 1080 }
    },

or

    browser: {
      enabled: true,
      headless: false,
      ui: false,
      name: 'chromium',
      provider: 'playwright',
      viewport: { width: 1920, height: 1080 }
    },

It's now impossible to scroll to or interact with elements beyond the browser viewport, the iframe is effectively cropped.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (64) x64 AMD Ryzen Threadripper 3970X 32-Core Processor
    Memory: 17.15 GB / 31.88 GB
  Binaries:
    Node: 22.8.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1
    @vitest/browser: ^2.1.0 => 2.1.0
    @vitest/coverage-v8: ^2.1.0 => 2.1.0
    vite: ^5.4.4 => 5.4.4
    vitest: ^2.1.0 => 2.1.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.

[hi-ogawa]

I setup pkg-pr-new for the PR #6512 (comment) Please test it out to see if it fixes issues.

[nstepien]

@hi-ogawa Seems to work fine with the fix 👍