feat(browser): use base url instead of __vitest__ (#8126)

Author: sheremet-va

packages/browser/src/client/orchestrator.ts

@@ -6,7 +6,6 @@ import { relative } from 'pathe'
 import { getUiAPI } from './ui'
 import { getBrowserState, getConfig } from './utils'
 
-const url = new URL(location.href)
 const ID_ALL = '__vitest_all__'
 
 export class IframeOrchestrator {
@@ -187,7 +186,7 @@ export class IframeOrchestrator {
 
   private createTestIframe(iframeId: string) {
     const iframe = document.createElement('iframe')
-    const src = `${url.pathname}__vitest_test__/__test__/?sessionId=${getBrowserState().sessionId}&iframeId=${iframeId}`
+    const src = `/?sessionId=${getBrowserState().sessionId}&iframeId=${iframeId}`
     iframe.setAttribute('loading', 'eager')
     iframe.setAttribute('src', src)
     iframe.setAttribute('data-vitest', 'true')

packages/browser/src/node/middlewares/orchestratorMiddleware.ts

@@ -9,7 +9,7 @@ export function createOrchestratorMiddleware(parentServer: ParentBrowserProject)
       return next()
     }
     const url = new URL(req.url, 'http://localhost')
-    if (url.pathname !== parentServer.base) {
+    if (url.pathname !== parentServer.prefixOrchestratorUrl) {
       return next()
     }
 

packages/browser/src/node/middlewares/testerMiddleware.ts

@@ -9,7 +9,7 @@ export function createTesterMiddleware(browserServer: ParentBrowserProject): Con
       return next()
     }
     const url = new URL(req.url, 'http://localhost')
-    if (!url.pathname.startsWith(browserServer.prefixTesterUrl) || !url.searchParams.has('sessionId')) {
+    if (url.pathname !== browserServer.prefixTesterUrl || !url.searchParams.has('sessionId')) {
       return next()
     }
 

packages/browser/src/node/pool.ts

@@ -248,9 +248,10 @@ class BrowserPool {
       this.project,
       this,
     )
-    const url = new URL('/', this.options.origin)
+    const browser = this.project.browser!
+    const url = new URL('/__vitest_test__/', this.options.origin)
     url.searchParams.set('sessionId', sessionId)
-    const pagePromise = this.project.browser!.provider.openPage(
+    const pagePromise = browser.provider.openPage(
       sessionId,
       url.toString(),
     )

packages/browser/src/node/projectParent.ts

@@ -26,6 +26,7 @@ export class ParentBrowserProject {
   public testerScripts: HtmlTagDescriptor[] | undefined
 
   public faviconUrl: string
+  public prefixOrchestratorUrl: string
   public prefixTesterUrl: string
   public manifest: Promise<Vite.Manifest> | Vite.Manifest
 
@@ -108,7 +109,8 @@ export class ParentBrowserProject {
       this.commands[command] = project.config.browser.commands[command]
     }
 
-    this.prefixTesterUrl = `${base}__vitest_test__/__test__/`
+    this.prefixTesterUrl = `${base || '/'}`
+    this.prefixOrchestratorUrl = `${base}__vitest_test__/`
     this.faviconUrl = `${base}__vitest__/favicon.svg`
 
     this.manifest = (async () => {

packages/vitest/src/node/logger.ts

@@ -252,7 +252,7 @@ export class Logger {
     const providerString = provider === 'preview' ? '' : ` by ${c.reset(c.bold(provider))}`
     this.log(
       c.dim(
-        `${output}Browser runner started${providerString} ${c.dim('at')} ${c.blue(new URL('/', origin))}\n`,
+        `${output}Browser runner started${providerString} ${c.dim('at')} ${c.blue(new URL('/__vitest_test__/', origin))}\n`,
       ),
     )
   }

test/browser/fixtures/mocking-out-of-root/project1/vitest.config.ts

@@ -14,7 +14,6 @@ export default defineConfig({
       screenshotFailures: false,
       headless: true,
       instances,
-      headless: true,
     },
   },
 })