fix(browser): scale iframe for non ui case

packages/browser/package.json

@@ -64,7 +64,7 @@
     "build:client": "vite build src/client",
     "build:node": "rollup -c",
     "dev:client": "vite build src/client --watch",
-    "dev:node": "rollup -c --watch --watch.include 'src/node/**'",
+    "dev:node": "rollup -c --watch --watch.include 'src/**'",
     "dev": "rimraf dist && pnpm run --stream '/^dev:/'"
   },
   "peerDependencies": {

packages/browser/src/client/orchestrator.ts

@@ -273,6 +273,21 @@ async function setIframeViewport(
   if (ui) {
     await ui.setIframeViewport(width, height)
   }
+  else if (getBrowserState().provider === 'playwright') {
+    const scale = Math.min(
+      1,
+      iframe.parentElement!.parentElement!.clientWidth / width,
+      iframe.parentElement!.parentElement!.clientHeight / height,
+    )
+    iframe.parentElement!.style.cssText = `
+      width: ${width}px;
+      height: ${height}px;
+      transform: scale(${scale});
+      transform-origin: left top;
+    `
+    iframe.parentElement?.setAttribute('data-scale', String(scale))
+    await new Promise(r => requestAnimationFrame(r))
+  }
   else {
     iframe.style.width = `${width}px`
     iframe.style.height = `${height}px`

packages/browser/src/client/tester/context.ts

@@ -15,7 +15,6 @@ import { convertElementToCssSelector, getBrowserState, getWorkerState } from '..
 
 // this file should not import anything directly, only types and utils
 
-const state = () => getWorkerState()
 // @ts-expect-error not typed global
 const provider = __vitest_browser_runner__.provider
 function filepath() {
@@ -222,8 +221,7 @@ function getTaskFullName(task: RunnerTask): string {
 }
 
 function processClickOptions(options_?: UserEventClickOptions) {
-  // only ui scales the iframe, so we need to adjust the position
-  if (!options_ || !state().config.browser.ui) {
+  if (!options_) {
     return options_
   }
   if (provider === 'playwright') {
@@ -250,8 +248,7 @@ function processClickOptions(options_?: UserEventClickOptions) {
 }
 
 function processHoverOptions(options_?: UserEventHoverOptions) {
-  // only ui scales the iframe, so we need to adjust the position
-  if (!options_ || !state().config.browser.ui) {
+  if (!options_) {
     return options_
   }
 
@@ -277,8 +274,7 @@ function processHoverOptions(options_?: UserEventHoverOptions) {
 }
 
 function processDragAndDropOptions(options_?: UserEventDragAndDropOptions) {
-  // only ui scales the iframe, so we need to adjust the position
-  if (!options_ || !state().config.browser.ui) {
+  if (!options_) {
     return options_
   }
   if (provider === 'playwright') {
@@ -336,11 +332,14 @@ function processPlaywrightPosition(position: { x: number; y: number }) {
 }
 
 function getIframeScale() {
-  const testerUi = window.parent.document.querySelector('#tester-ui') as HTMLElement | null
+  const testerUi = window.parent.document.querySelector(`iframe[data-vitest]`)?.parentElement
   if (!testerUi) {
     throw new Error(`Cannot find Tester element. This is a bug in Vitest. Please, open a new issue with reproduction.`)
   }
   const scaleAttribute = testerUi.getAttribute('data-scale')
+  if (scaleAttribute === null) {
+    return 1
+  }
   const scale = Number(scaleAttribute)
   if (Number.isNaN(scale)) {
     throw new TypeError(`Cannot parse scale value from Tester element (${scaleAttribute}). This is a bug in Vitest. Please, open a new issue with reproduction.`)

test/browser/fixtures/viewport/basic.test.ts

@@ -0,0 +1,53 @@
+import { page, userEvent } from "@vitest/browser/context";
+import { expect, test } from "vitest";
+
+test("drag and drop over large viewport", async () => {
+  // put boxes horizontally [1] [2] ... [30]
+  // then drag-and-drop from [1] to [30]
+
+  const wrapper = document.createElement("div");
+  wrapper.style.cssText = "display: flex; width: 3000px;";
+  document.body.appendChild(wrapper);
+
+  const events: { i: number; type: string }[] = [];
+
+  for (let i = 1; i <= 30; i++) {
+    const el = document.createElement("div");
+    el.textContent = `[${i}]`;
+    el.style.cssText = `
+      flex: none;
+      width: 100px;
+      height: 100px;
+      border: 1px solid black;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    `;
+    el.draggable = true;
+    wrapper.append(el);
+
+    el.addEventListener("dragstart", (ev) => {
+      ev.dataTransfer.effectAllowed = "move";
+      events.push({ type: "dragstart", i });
+    });
+    el.addEventListener("dragover", (ev) => {
+      ev.preventDefault();
+      ev.dataTransfer.dropEffect = "move";
+      events.push({ type: "dragover", i });
+    });
+    el.addEventListener("drop", (ev) => {
+      ev.preventDefault();
+      events.push({ type: "drop", i });
+    });
+  }
+
+  await userEvent.dragAndDrop(page.getByText("[1]"), page.getByText("[30]"));
+
+  expect(events).toMatchObject(
+    expect.arrayContaining([
+      { type: "dragstart", i: 1 },
+      { type: "drop", i: 30 },
+    ]),
+  );
+});

test/browser/fixtures/viewport/vitest.config.ts

@@ -0,0 +1,21 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+// pnpm -C test/browser test-fixtures --root fixtures/viewport --browser.ui=false
+// pnpm -C test/browser test-fixtures --root fixtures/viewport --browser.headless=true
+
+const provider = process.env.PROVIDER || 'playwright'
+const name =
+  process.env.BROWSER || (provider === 'playwright' ? 'chromium' : 'chrome')
+
+export default defineConfig({
+  test: {
+    browser: {
+      enabled: true,
+      name,
+      provider,
+      viewport: { width: 3000, height: 400 }
+    },
+  },
+  cacheDir: fileURLToPath(new URL("./node_modules/.vite", import.meta.url)),
+})

test/browser/specs/utils.ts

@@ -3,7 +3,7 @@
 import type { UserConfig } from 'vitest'
 import { runVitest } from '../../test-utils'
 
-const provider = process.env.PROVIDER || 'playwright'
+export const provider = process.env.PROVIDER || 'playwright'
 export const browser = process.env.BROWSER || (provider !== 'playwright' ? 'chromium' : 'chrome')
 
 export async function runBrowserTests(
@@ -21,7 +21,7 @@
     } as UserConfig['browser'],
   }, include, 'test', viteOverrides)
 
   const browserResult = await readFile('./browser.json', 'utf-8')
   const browserResultJson = JSON.parse(browserResult)
 
   const getPassed = results => results.filter(result => result.status === 'passed' && !result.mesage)

test/browser/specs/viewport.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest'
+import { provider, runBrowserTests } from './utils'
+
+test.runIf(provider === 'playwright')('viewport', async () => {
+  const { stderr, stdout } = await runBrowserTests({
+    root: './fixtures/viewport',
+    reporters: [['verbose', { isTTY: false }]],
+  })
+
+  expect(stderr).toBe('')
+  expect(stdout).toContain('✓ basic.test.ts')
+})

test/browser/test/userEvent.test.ts

@@ -135,9 +135,10 @@ describe('userEvent.click', () => {
       },
     })
 
+    // not exact due to scaling and rounding
     expect(spy).toHaveBeenCalledWith({
-      x: 200,
-      y: 150,
+      x: expect.closeTo(200, -1),
+      y: expect.closeTo(150, -1),
     })
   })
 })