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

… viewport (#5984)

Co-authored-by: Vladimir Sheremet <sleuths.slews0s@icloud.com>

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
  }

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
  }
 

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