fix(browser): scale iframe for non ui case

packages/browser/src/node/providers/playwright.ts

@@ -116,6 +116,9 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
     if (this.ctx.config.browser.ui) {
       options.viewport = null
     }
+    else {
+      options.viewport = this.ctx.config.browser.viewport
+    }
     const context = await browser.newContext(options)
     this.contexts.set(contextId, context)
     return context

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 as ViteUserConfig } from 'vite'
 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(

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')
+})