fix(browser): scale iframe for non ui case (#6512)

Author: hi-ogawa

packages/browser/src/client/orchestrator.ts

@@ -259,9 +259,25 @@ async function setIframeViewport(
   if (ui) {
     await ui.setIframeViewport(width, height)
   }
-  else {
+  else if (getBrowserState().provider === 'webdriverio') {
     iframe.style.width = `${width}px`
     iframe.style.height = `${height}px`
+    iframe.parentElement?.setAttribute('data-scale', '1')
+  }
+  else {
+    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))
   }
 }
 

packages/browser/src/client/tester/locators/playwright.ts

@@ -9,7 +9,6 @@ import {
   getByTextSelector,
   getByTitleSelector,
 } from 'ivya'
-import { getBrowserState } from '../../utils'
 import { getIframeScale, processTimeoutOptions } from '../utils'
 import { Locator, selectorEngine } from './index'
 
@@ -106,8 +105,7 @@ class PlaywrightLocator extends Locator {
 }
 
 function processDragAndDropOptions(options_?: UserEventDragAndDropOptions) {
-  // only ui scales the iframe, so we need to adjust the position
-  if (!options_ || !getBrowserState().config.browser.ui) {
+  if (!options_) {
     return options_
   }
   const options = options_ as NonNullable<
@@ -123,8 +121,7 @@ function processDragAndDropOptions(options_?: UserEventDragAndDropOptions) {
 }
 
 function processHoverOptions(options_?: UserEventHoverOptions) {
-  // only ui scales the iframe, so we need to adjust the position
-  if (!options_ || !getBrowserState().config.browser.ui) {
+  if (!options_) {
     return options_
   }
   const options = options_ as NonNullable<
@@ -137,8 +134,7 @@ function processHoverOptions(options_?: UserEventHoverOptions) {
 }
 
 function processClickOptions(options_?: UserEventClickOptions) {
-  // only ui scales the iframe, so we need to adjust the position
-  if (!options_ || !getBrowserState().config.browser.ui) {
+  if (!options_) {
     return options_
   }
   const options = options_ as NonNullable<

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

@@ -167,7 +167,7 @@ export function processTimeoutOptions<T extends { timeout?: number }>(options_?:
 }
 
 export function getIframeScale(): number {
-  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.`)
   }

test/browser/fixtures/locators/blog.test.tsx

@@ -18,6 +18,7 @@ test('renders blog posts', async () => {
 
   await expect.element(secondPost.getByRole('heading')).toHaveTextContent('qui est esse')
 
+  // TODO: click doesn't work on webdriverio when iframe is scaled
   await userEvent.click(secondPost.getByRole('button', { name: 'Delete' }))
 
   expect(screen.getByRole('listitem').all()).toHaveLength(3)

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

@@ -0,0 +1,58 @@
+import { page, userEvent, server } 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 });
+    });
+  }
+
+  // drag and drop only works reliably on playwright
+  if (server.provider !== 'playwright') {
+    return
+  }
+
+  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'
+import { instances, provider } from '../../settings'
+
+// pnpm -C test/browser test-fixtures --root fixtures/viewport --browser.ui=false
+// pnpm -C test/browser test-fixtures --root fixtures/viewport --browser.headless=true
+
+export default defineConfig({
+  test: {
+    browser: {
+      enabled: true,
+      provider,
+      instances: instances.map(instance => ({
+        ...instance,
+        viewport: { width: 3000, height: 400 }
+      })),
+
+    },
+  },
+  cacheDir: fileURLToPath(new URL("./node_modules/.vite", import.meta.url)),
+})

test/browser/specs/runner.test.ts

@@ -222,6 +222,16 @@ test('timeout settings', async () => {
   }
 })
 
+test('viewport', async () => {
+  const { stdout, stderr } = await runBrowserTests({
+    root: './fixtures/viewport',
+  })
+  expect(stderr).toBe('')
+  instances.forEach(({ browser }) => {
+    expect(stdout).toReportPassedTest('basic.test.ts', browser)
+  })
+})
+
 test.runIf(provider === 'playwright')('timeout hooks', async () => {
   const { stderr } = await runBrowserTests({
     root: './fixtures/timeout-hooks',

test/browser/specs/viewport.test.ts

@@ -0,0 +1,19 @@
+import { expect, test } from 'vitest'
+import { runBrowserTests } from './utils'
+
+test('viewport', async () => {
+  const { stderr, ctx } = await runBrowserTests({
+    root: './fixtures/viewport',
+  })
+
+  expect(stderr).toBe('')
+  expect(
+    Object.fromEntries(
+      ctx.state.getFiles().map(f => [f.name, f.result.state]),
+    ),
+  ).toMatchInlineSnapshot(`
+    {
+      "basic.test.ts": "pass",
+    }
+  `)
+})

test/browser/test/userEvent.test.ts

@@ -140,9 +140,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),
     })
   })
 })