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

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

@@ -1,6 +1,5 @@
 import type {
   Browser,
-
   BrowserContext,
   BrowserContextOptions,
   Frame,
@@ -67,10 +66,21 @@ 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
+
+      if (this.ctx.config.browser.ui) {
+        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 +95,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
   }

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

@@ -80,6 +80,14 @@ export class WebdriverBrowserProvider implements BrowserProvider {
       capabilities: this.buildCapabilities(),
     })
 
+    if (this.ctx.config.browser.ui) {
+      await this.browser.maximizeWindow()
+    }
+    else {
+      const { width, height } = this.ctx.config.browser.viewport
+      await this.browser.setWindowSize(width, height)
+    }
+
     return this.browser
   }
 

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

test/browser/test/viewport.test.ts

@@ -0,0 +1,36 @@
+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()
+
+    // eslint-disable-next-line no-console
+    console.log({ width, height, actualWidth, actualHeight })
+
+    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') {
+      // eslint-disable-next-line no-console
+      console.log({ availWidth: topWindow.visualViewport.width, innerWidth: topWindow.innerWidth })
+
+      expect(topWindow.visualViewport.width - topWindow.innerWidth === 0).toBe(true)
+    }
+    else {
+      // eslint-disable-next-line no-console
+      console.log({ availWidth: screen.availWidth, innerWidth: topWindow.innerWidth })
+
+      expect(screen.availWidth - topWindow.innerWidth === 0).toBe(true)
+    }
+  })
+})