feat(browser): playwright provider doesn't allow resizing the browser viewport (#5984)

userquin · sheremet-va · web-flow · commit ff978e58de0b · 2024-07-01T16:10:16.000+02:00
Co-authored-by: Vladimir Sheremet &lt;sleuths.slews0s@icloud.com&gt;
diff --git a/packages/browser/src/node/providers/playwright.ts b/packages/browser/src/node/providers/playwright.ts
@@ -1,6 +1,5 @@
 import type {
   Browser,
-
   BrowserContext,
   BrowserContextOptions,
   Frame,
@@ -67,10 +66,22 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
 
       const playwright = await import('playwright')
 
-      const browser = await playwright[this.browserName].launch({
+      const launchOptions = {
         ...this.options?.launch,
         headless: options.headless,
-      })
+      } satisfies LaunchOptions
+
+      // start Vitest UI maximized only on supported browsers
+      if (this.ctx.config.browser.ui && this.browserName === 'chromium') {
+        if (!launchOptions.args) {
+          launchOptions.args = []
+        }
+        if (!launchOptions.args.includes('--start-maximized') && !launchOptions.args.includes('--start-fullscreen')) {
+          launchOptions.args.push('--start-maximized')
+        }
+      }
+
+      const browser = await playwright[this.browserName].launch(launchOptions)
       this.browser = browser
       this.browserPromise = null
       return this.browser
@@ -85,11 +96,15 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
     }
 
     const browser = await this.openBrowser()
-    const context = await browser.newContext({
+    const options = {
       ...this.options?.context,
       ignoreHTTPSErrors: true,
       serviceWorkers: 'allow',
-    })
+    } satisfies BrowserContextOptions
+    if (this.ctx.config.browser.ui) {
+      options.viewport = null
+    }
+    const context = await browser.newContext(options)
     this.contexts.set(contextId, context)
     return context
   }
diff --git a/packages/browser/src/node/providers/webdriver.ts b/packages/browser/src/node/providers/webdriver.ts
@@ -104,6 +104,19 @@ export class WebdriverBrowserProvider implements BrowserProvider {
       capabilities[key] = { ...currentValues, args: newArgs as any }
     }
 
+    // start Vitest UI maximized only on supported browsers
+    if (options.ui && (browser === 'chrome' || browser === 'edge')) {
+      const key = browser === 'chrome'
+        ? 'goog:chromeOptions'
+        : 'ms:edgeOptions'
+      const args = capabilities[key]?.args || []
+      if (!args.includes('--start-maximized') && !args.includes('--start-fullscreen')) {
+        args.push('--start-maximized')
+      }
+      capabilities[key] ??= {}
+      capabilities[key]!.args = args
+    }
+
     return capabilities
   }
 
diff --git a/test/browser/specs/runner.test.ts b/test/browser/specs/runner.test.ts
@@ -23,8 +23,8 @@ describe('running browser tests', async () => {
       console.error(stderr)
     })
 
-    expect(browserResultJson.testResults).toHaveLength(18)
-    expect(passedTests).toHaveLength(16)
+    expect(browserResultJson.testResults).toHaveLength(19)
+    expect(passedTests).toHaveLength(17)
     expect(failedTests).toHaveLength(2)
 
     expect(stderr).not.toContain('has been externalized for browser compatibility')
diff --git a/test/browser/test/viewport.test.ts b/test/browser/test/viewport.test.ts
@@ -0,0 +1,27 @@
+import { page, server } from '@vitest/browser/context'
+import { describe, expect, it } from 'vitest'
+
+describe.skipIf(server.provider === 'preview')('viewport window has been properly initialized', () => {
+  it.skipIf(!page.config.browser.headless)('viewport has proper size', () => {
+    const { width, height } = page.config.browser.viewport
+    const { width: actualWidth, height: actualHeight } = window.document.documentElement.getBoundingClientRect()
+
+    expect(actualWidth).toBe(width)
+    expect(actualHeight).toBe(height)
+  })
+
+  it.skipIf(page.config.browser.headless)('window has been maximized', () => {
+    let topWindow = window
+    while (topWindow.parent && topWindow !== topWindow.parent) {
+      topWindow = topWindow.parent as unknown as any
+    }
+
+    // edge will show the Hub Apps right panel
+    if (server.browser === 'edge') {
+      expect(topWindow.visualViewport.width - topWindow.innerWidth === 0).toBe(true)
+    }
+    else {
+      expect(screen.availWidth - topWindow.innerWidth === 0).toBe(true)
+    }
+  })
+})
