From 031c8bcf269c7bf51d9df9f90a934c5e16c82619 Mon Sep 17 00:00:00 2001 From: userquin Date: Thu, 27 Jun 2024 14:56:00 +0200 Subject: [PATCH 01/11] fix(browser): playwright provider doesn't resize the browser viewport --- packages/browser/src/node/providers/playwright.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/browser/src/node/providers/playwright.ts b/packages/browser/src/node/providers/playwright.ts index 2fba6668d847..5014da582ad9 100644 --- a/packages/browser/src/node/providers/playwright.ts +++ b/packages/browser/src/node/providers/playwright.ts @@ -89,6 +89,7 @@ export class PlaywrightBrowserProvider implements BrowserProvider { ...this.options?.context, ignoreHTTPSErrors: true, serviceWorkers: 'allow', + viewport: null, }) this.contexts.set(contextId, context) return context From 8a1a126e576cdb5898d076494a9afc5077f38a82 Mon Sep 17 00:00:00 2001 From: userquin Date: Fri, 28 Jun 2024 13:57:42 +0200 Subject: [PATCH 02/11] chore: maximize Vitest UI when ui is enabled --- .../browser/src/node/providers/playwright.ts | 25 ++++++++++++++----- .../browser/src/node/providers/webdriver.ts | 4 +++ packages/vitest/src/node/config.ts | 3 +++ packages/vitest/src/types/browser.ts | 3 +++ 4 files changed, 29 insertions(+), 6 deletions(-) diff --git a/packages/browser/src/node/providers/playwright.ts b/packages/browser/src/node/providers/playwright.ts index 5014da582ad9..6ce3e29c62c2 100644 --- 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,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.launchViewport.maximized) { + 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,12 +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', - viewport: null, - }) + } satisfies BrowserContextOptions + if (this.ctx.config.browser.launchViewport.maximized) { + 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 index 074592ece2ca..1769953234b9 100644 --- a/packages/browser/src/node/providers/webdriver.ts +++ b/packages/browser/src/node/providers/webdriver.ts @@ -80,6 +80,10 @@ export class WebdriverBrowserProvider implements BrowserProvider { capabilities: this.buildCapabilities(), }) + if (this.ctx.config.browser.launchViewport.maximized) { + await this.browser.maximizeWindow() + } + return this.browser } diff --git a/packages/vitest/src/node/config.ts b/packages/vitest/src/node/config.ts index f07163183bb7..83d88a8da737 100644 --- a/packages/vitest/src/node/config.ts +++ b/packages/vitest/src/node/config.ts @@ -682,6 +682,8 @@ export function resolveConfig( resolved.browser.isolate ??= true resolved.browser.fileParallelism ??= options.fileParallelism ?? mode !== 'benchmark' + // don't maximize it yet, only when the ui is enabled + resolved.browser.launchViewport = { maximized: false } // disable in headless mode by default, and if CI is detected resolved.browser.ui ??= resolved.browser.headless === true ? false : !isCI if (resolved.browser.screenshotDirectory) { @@ -723,6 +725,7 @@ export function resolveConfig( // enable includeTaskLocation by default in UI mode if (resolved.browser.enabled) { if (resolved.browser.ui) { + resolved.browser.launchViewport.maximized = true resolved.includeTaskLocation ??= true } } diff --git a/packages/vitest/src/types/browser.ts b/packages/vitest/src/types/browser.ts index 454ce12fa1ff..87c75f19e289 100644 --- a/packages/vitest/src/types/browser.ts +++ b/packages/vitest/src/types/browser.ts @@ -236,4 +236,7 @@ export interface ResolvedBrowserOptions extends BrowserConfigOptions { width: number height: number } + launchViewport: { + maximized: boolean + } } From 9efaa55c695cf336504adc02ac6496688b6e854e Mon Sep 17 00:00:00 2001 From: userquin Date: Fri, 28 Jun 2024 14:24:16 +0200 Subject: [PATCH 03/11] chore: remove the added option --- packages/browser/src/node/providers/playwright.ts | 4 ++-- packages/browser/src/node/providers/webdriver.ts | 2 +- packages/vitest/src/node/config.ts | 3 --- packages/vitest/src/types/browser.ts | 3 --- 4 files changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/browser/src/node/providers/playwright.ts b/packages/browser/src/node/providers/playwright.ts index 6ce3e29c62c2..f2e0d99b1771 100644 --- a/packages/browser/src/node/providers/playwright.ts +++ b/packages/browser/src/node/providers/playwright.ts @@ -71,7 +71,7 @@ export class PlaywrightBrowserProvider implements BrowserProvider { headless: options.headless, } satisfies LaunchOptions - if (this.ctx.config.browser.launchViewport.maximized) { + if (this.ctx.config.browser.ui) { if (!launchOptions.args) { launchOptions.args = [] } @@ -100,7 +100,7 @@ export class PlaywrightBrowserProvider implements BrowserProvider { ignoreHTTPSErrors: true, serviceWorkers: 'allow', } satisfies BrowserContextOptions - if (this.ctx.config.browser.launchViewport.maximized) { + if (this.ctx.config.browser.ui) { options.viewport = null } const context = await browser.newContext(options) diff --git a/packages/browser/src/node/providers/webdriver.ts b/packages/browser/src/node/providers/webdriver.ts index 1769953234b9..cd353d77a087 100644 --- a/packages/browser/src/node/providers/webdriver.ts +++ b/packages/browser/src/node/providers/webdriver.ts @@ -80,7 +80,7 @@ export class WebdriverBrowserProvider implements BrowserProvider { capabilities: this.buildCapabilities(), }) - if (this.ctx.config.browser.launchViewport.maximized) { + if (this.ctx.config.browser.ui) { await this.browser.maximizeWindow() } diff --git a/packages/vitest/src/node/config.ts b/packages/vitest/src/node/config.ts index 83d88a8da737..f07163183bb7 100644 --- a/packages/vitest/src/node/config.ts +++ b/packages/vitest/src/node/config.ts @@ -682,8 +682,6 @@ export function resolveConfig( resolved.browser.isolate ??= true resolved.browser.fileParallelism ??= options.fileParallelism ?? mode !== 'benchmark' - // don't maximize it yet, only when the ui is enabled - resolved.browser.launchViewport = { maximized: false } // disable in headless mode by default, and if CI is detected resolved.browser.ui ??= resolved.browser.headless === true ? false : !isCI if (resolved.browser.screenshotDirectory) { @@ -725,7 +723,6 @@ export function resolveConfig( // enable includeTaskLocation by default in UI mode if (resolved.browser.enabled) { if (resolved.browser.ui) { - resolved.browser.launchViewport.maximized = true resolved.includeTaskLocation ??= true } } diff --git a/packages/vitest/src/types/browser.ts b/packages/vitest/src/types/browser.ts index 87c75f19e289..454ce12fa1ff 100644 --- a/packages/vitest/src/types/browser.ts +++ b/packages/vitest/src/types/browser.ts @@ -236,7 +236,4 @@ export interface ResolvedBrowserOptions extends BrowserConfigOptions { width: number height: number } - launchViewport: { - maximized: boolean - } } From 59d9b8cc718230ac85edce125c515baf205fee7d Mon Sep 17 00:00:00 2001 From: userquin Date: Fri, 28 Jun 2024 15:24:13 +0200 Subject: [PATCH 04/11] chore: configure viewport size in headless mode --- .../browser/src/node/providers/webdriver.ts | 4 +++ test/browser/test/viewport.test.ts | 26 +++++++++++++++++++ 2 files changed, 30 insertions(+) create mode 100644 test/browser/test/viewport.test.ts diff --git a/packages/browser/src/node/providers/webdriver.ts b/packages/browser/src/node/providers/webdriver.ts index cd353d77a087..4414c3135b1f 100644 --- a/packages/browser/src/node/providers/webdriver.ts +++ b/packages/browser/src/node/providers/webdriver.ts @@ -83,6 +83,10 @@ export class WebdriverBrowserProvider implements BrowserProvider { 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 } diff --git a/test/browser/test/viewport.test.ts b/test/browser/test/viewport.test.ts new file mode 100644 index 000000000000..e259ddfbdf70 --- /dev/null +++ b/test/browser/test/viewport.test.ts @@ -0,0 +1,26 @@ +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 width and 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', async () => { + let topWindow = window + while (topWindow.parent && topWindow !== topWindow.parent) { + topWindow = topWindow.parent as unknown as any + } + // eslint-disable-next-line no-console + console.log({ availWidth: screen.availWidth, innerWidth: topWindow.innerWidth }) + + expect(screen.availWidth - topWindow.innerWidth === 0).toBe(true) + }) +}) From fd325991f4efc94f330d77568bd31e9386bf4f21 Mon Sep 17 00:00:00 2001 From: userquin Date: Fri, 28 Jun 2024 15:49:45 +0200 Subject: [PATCH 05/11] chore: update browser runner test --- test/browser/specs/runner.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/browser/specs/runner.test.ts b/test/browser/specs/runner.test.ts index eb6c62686a1d..edb0c12e1cbf 100644 --- 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') From 6fc709e4b6447d094d5728f2ad5307ec26de7d92 Mon Sep 17 00:00:00 2001 From: userquin Date: Fri, 28 Jun 2024 15:50:08 +0200 Subject: [PATCH 06/11] chore: cleanup --- test/browser/test/viewport.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/browser/test/viewport.test.ts b/test/browser/test/viewport.test.ts index e259ddfbdf70..3082bccf885c 100644 --- a/test/browser/test/viewport.test.ts +++ b/test/browser/test/viewport.test.ts @@ -13,7 +13,7 @@ describe.skipIf(server.provider === 'preview')('viewport window has been properl expect(actualHeight).toBe(height) }) - it.skipIf(page.config.browser.headless)('window has been maximized', async () => { + 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 From a54e67ffab8ffa83a1a4b2079f6cb1607fdcf484 Mon Sep 17 00:00:00 2001 From: userquin Date: Fri, 28 Jun 2024 21:59:25 +0200 Subject: [PATCH 07/11] chore: update headless viewport text title --- test/browser/test/viewport.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/browser/test/viewport.test.ts b/test/browser/test/viewport.test.ts index 3082bccf885c..5490391a0208 100644 --- a/test/browser/test/viewport.test.ts +++ b/test/browser/test/viewport.test.ts @@ -2,7 +2,7 @@ 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 width and size', () => { + 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() From 6a1f2dc45da49648b5b3e8d5b24c16f837d2c326 Mon Sep 17 00:00:00 2001 From: userquin Date: Sat, 29 Jun 2024 02:53:27 +0200 Subject: [PATCH 08/11] chore: fix edge viewport test with ui --- test/browser/test/viewport.test.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/test/browser/test/viewport.test.ts b/test/browser/test/viewport.test.ts index 5490391a0208..c1ecf1629d81 100644 --- a/test/browser/test/viewport.test.ts +++ b/test/browser/test/viewport.test.ts @@ -18,9 +18,19 @@ describe.skipIf(server.provider === 'preview')('viewport window has been properl while (topWindow.parent && topWindow !== topWindow.parent) { topWindow = topWindow.parent as unknown as any } - // eslint-disable-next-line no-console - console.log({ availWidth: screen.availWidth, innerWidth: topWindow.innerWidth }) - expect(screen.availWidth - topWindow.innerWidth === 0).toBe(true) + // 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) + } }) }) From d41a6b22c42a9b47ca26a71f24cd04545861fe2b Mon Sep 17 00:00:00 2001 From: userquin Date: Sun, 30 Jun 2024 15:24:12 +0200 Subject: [PATCH 09/11] chore: cleanup viewport test --- test/browser/test/viewport.test.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/test/browser/test/viewport.test.ts b/test/browser/test/viewport.test.ts index c1ecf1629d81..146faae1c66a 100644 --- a/test/browser/test/viewport.test.ts +++ b/test/browser/test/viewport.test.ts @@ -6,9 +6,6 @@ describe.skipIf(server.provider === 'preview')('viewport window has been properl 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) }) @@ -21,15 +18,9 @@ describe.skipIf(server.provider === 'preview')('viewport window has been properl // 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) } }) From 88ac8a628cadf6a38f5858c3746f0dd5066b1b66 Mon Sep 17 00:00:00 2001 From: Vladimir Sheremet Date: Mon, 1 Jul 2024 13:54:21 +0200 Subject: [PATCH 10/11] fix(browser): don't inherit viewport options in webdriverio provider --- packages/browser/src/node/providers/webdriver.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/browser/src/node/providers/webdriver.ts b/packages/browser/src/node/providers/webdriver.ts index 4414c3135b1f..cd353d77a087 100644 --- a/packages/browser/src/node/providers/webdriver.ts +++ b/packages/browser/src/node/providers/webdriver.ts @@ -83,10 +83,6 @@ export class WebdriverBrowserProvider implements BrowserProvider { 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 } From 509b63037928bac0651b16261b9e6e359b1bad7e Mon Sep 17 00:00:00 2001 From: userquin Date: Mon, 1 Jul 2024 15:19:29 +0200 Subject: [PATCH 11/11] chore: maximize vitest ui only on supported browsers (chromium based) --- .../browser/src/node/providers/playwright.ts | 3 ++- .../browser/src/node/providers/webdriver.ts | 17 +++++++++++++---- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/browser/src/node/providers/playwright.ts b/packages/browser/src/node/providers/playwright.ts index f2e0d99b1771..cef27c34f629 100644 --- a/packages/browser/src/node/providers/playwright.ts +++ b/packages/browser/src/node/providers/playwright.ts @@ -71,7 +71,8 @@ export class PlaywrightBrowserProvider implements BrowserProvider { headless: options.headless, } satisfies LaunchOptions - if (this.ctx.config.browser.ui) { + // start Vitest UI maximized only on supported browsers + if (this.ctx.config.browser.ui && this.browserName === 'chromium') { if (!launchOptions.args) { launchOptions.args = [] } diff --git a/packages/browser/src/node/providers/webdriver.ts b/packages/browser/src/node/providers/webdriver.ts index cd353d77a087..810d91ab1916 100644 --- a/packages/browser/src/node/providers/webdriver.ts +++ b/packages/browser/src/node/providers/webdriver.ts @@ -80,10 +80,6 @@ export class WebdriverBrowserProvider implements BrowserProvider { capabilities: this.buildCapabilities(), }) - if (this.ctx.config.browser.ui) { - await this.browser.maximizeWindow() - } - return this.browser } @@ -108,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 }