fix: don't scale the webdriverio page

Author: sheremet-va

packages/ui/client/auto-imports.d.ts

@@ -155,6 +155,7 @@ declare global {
   const unref: typeof import('vue')['unref']
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
+  const updateBrowserPanel: typeof import('./composables/navigation')['updateBrowserPanel']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
   const useAnimate: typeof import('@vueuse/core')['useAnimate']
   const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']

packages/ui/client/components/BrowserIframe.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { ViewportSize } from '~/composables/browser'
 import { viewport } from '~/composables/browser'
+import { browserState } from '~/composables/client'
 import {
   hideRightPanel,
   panels,
   showNavigationPanel,
   showRightPanel,
+  updateBrowserPanel,
 } from '~/composables/navigation'
 
 const sizes: Record<ViewportSize, [width: number, height: number]> = {
@@ -19,16 +21,24 @@ function isViewport(name: ViewportSize) {
   return viewport.value[0] === preset[0] && viewport.value[1] === preset[1]
 }
 
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+
 async function changeViewport(name: ViewportSize) {
   viewport.value = sizes[name]
+  if (browserState?.provider === 'webdriverio') {
+    updateBrowserPanel()
+  }
 }
 
-const { width: windowWidth, height: windowHeight } = useWindowSize()
-
 const PADDING_SIDES = 20
 const PADDING_TOP = 100
 
 const containerSize = computed(() => {
+  if (browserState?.provider === 'webdriverio') {
+    const [width, height] = viewport.value
+    return { width, height }
+  }
+
   const parentContainerWidth = windowWidth.value * (panels.details.size / 100)
   const parentOffsetWidth = parentContainerWidth * (panels.details.browser / 100)
   const containerWidth = parentOffsetWidth - PADDING_SIDES
@@ -40,6 +50,10 @@ const containerSize = computed(() => {
 })
 
 const scale = computed(() => {
+  if (browserState?.provider === 'webdriverio') {
+    return 1
+  }
+
   const [iframeWidth, iframeHeight] = viewport.value
   const { width: containerWidth, height: containerHeight } = containerSize.value
   const widthScale = containerWidth > iframeWidth ? 1 : containerWidth / iframeWidth

packages/ui/client/components/views/ViewConsoleOutput.vue

@@ -35,7 +35,7 @@ function getTaskName(id?: string) {
       />
     </div>
   </div>
-  <p v-else p6>
+  <div v-else p6>
     Log something in your test and it would print here. (e.g. <pre inline>console.log(foo)</pre>)
-  </p>
+  </div>
 </template>

packages/ui/client/composables/api.ts

@@ -1,6 +1,7 @@
 import type { BrowserUI } from 'vitest'
 import { viewport } from './browser'
-import { findById } from './client'
+import { browserState, findById } from './client'
+import { updateBrowserPanel } from './navigation'
 
 export const ui: BrowserUI = {
   setCurrentFileId(fileId: string) {
@@ -11,6 +12,9 @@ export const ui: BrowserUI = {
   async setIframeViewport(width: number, height: number) {
     // reset the button before setting a custom viewport
     viewport.value = [width, height]
+    if (browserState?.provider === 'webdriverio') {
+      updateBrowserPanel()
+    }
     await new Promise(r => requestAnimationFrame(r))
   },
 }

packages/ui/client/composables/client/index.ts

@@ -137,8 +137,13 @@ export function runCurrent() {
 // for testing during dev
 // export const browserState: BrowserRunnerState = {
 //   files: [],
-//   config: {},
+//   config: {
+//     browser: {
+//       name: 'chrome',
+//     }
+//   } as any,
 //   type: 'orchestrator',
+//   provider: 'webdriverio',
 //   wrapModule: () => {},
 // }
 // @ts-expect-error not typed global

packages/ui/client/composables/navigation.ts

@@ -1,7 +1,8 @@
 import type { File, Task } from '@vitest/runner'
 import type { Params } from './params'
-import { client, config, findById } from './client'
+import { browserState, client, config, findById } from './client'
 import { testRunState } from './client/state'
+import { viewport } from './browser'
 import { activeFileId, lineNumber, selectedTest, viewMode } from './params'
 
 export const currentModule = ref<File>()
@@ -22,7 +23,13 @@ export const mainSizes = useLocalStorage<[left: number, right: number]>(
 )
 export const detailSizes = useLocalStorage<[left: number, right: number]>(
   'vitest-ui_splitpanes-detailSizes',
-  [33, 67],
+  [
+    // @ts-expect-error "browserState" is not initialised yet
+    window.__vitest_browser_runner__?.provider === 'webdriverio'
+      ? ((viewport.value[0] / window.outerWidth) * 100)
+      : 33,
+    67,
+  ],
 )
 
 // live sizes of panels in percentage
@@ -125,14 +132,45 @@ export function hideRightPanel() {
   detailSizes.value = [100, 0]
 }
 
+function calculateBrowserPanel() {
+  // we don't scale webdriverio provider because it doesn't support scaling
+  // TODO: find a way to make this universal - maybe show browser separetly(?)
+  if (browserState?.provider === 'webdriverio') {
+    const parentWindow = window.outerWidth * (panels.details.size / 100)
+    // 40 is 20px padding for each sice
+    const tabWidth = ((viewport.value[0] + 20) / parentWindow) * 100
+    return tabWidth
+  }
+  return 33
+}
+
 export function showRightPanel() {
-  panels.details.browser = 33
-  panels.details.main = 67
-  detailSizes.value = [33, 67]
+  panels.details.browser = calculateBrowserPanel()
+  panels.details.main = 100 - panels.details.browser
+  detailSizes.value = [
+    panels.details.browser,
+    panels.details.main,
+  ]
 }
 
 export function showNavigationPanel() {
   panels.navigation = 33
   panels.details.size = 67
   mainSizes.value = [33, 67]
 }
+
+export function updateBrowserPanel() {
+  // we don't need to change the size of the browser panel if the right
+  // panel is hidden
+  if (panels.details.main === 0) {
+    return
+  }
+
+  panels.details.browser = calculateBrowserPanel()
+  panels.details.main = 100 - panels.details.browser
+
+  detailSizes.value = [
+    panels.details.browser,
+    panels.details.main,
+  ]
+}

packages/ui/types.ts

@@ -18,5 +18,6 @@ export interface BrowserRunnerState {
   files: string[]
   config: SerializedConfig
   type: 'orchestrator'
+  provider: string
   wrapModule: <T>(module: () => T) => T
 }