chore: cleanup

packages/browser/src/client/tester/context.ts

@@ -1,4 +1,4 @@
-import type { Task, WorkerGlobalState } from 'vitest'
+import type { Task } from 'vitest'
 import type { BrowserRPC } from '@vitest/browser/client'
 import type {
   BrowserPage,
@@ -8,93 +8,21 @@ import type {
   UserEventTabOptions,
   UserEventTypeOptions,
 } from '../../../context'
-import type { BrowserRunnerState } from '../utils'
+import { convertElementToCssSelector, getBrowserState, getWorkerState } from '../utils'
 
-// this file should not import anything directly, only types
+// this file should not import anything directly, only types and utils
 
-// @ts-expect-error not typed global
-const state = (): WorkerGlobalState => __vitest_worker__
-// @ts-expect-error not typed global
-const runner = (): BrowserRunnerState => __vitest_browser_runner__
 function filepath() {
-  return state().filepath || state().current?.file?.filepath || undefined
+  return getWorkerState().filepath || getWorkerState().current?.file?.filepath || undefined
 }
-const rpc = () => state().rpc as any as BrowserRPC
-const contextId = runner().contextId
+const rpc = () => getWorkerState().rpc as any as BrowserRPC
+const contextId = getBrowserState().contextId
 const channel = new BroadcastChannel(`vitest:${contextId}`)
 
 function triggerCommand<T>(command: string, ...args: any[]) {
   return rpc().triggerCommand<T>(contextId, command, filepath(), args)
 }
 
-const provider = runner().provider
-
-function convertElementToCssSelector(element: Element) {
-  if (!element || !(element instanceof Element)) {
-    throw new Error(
-      `Expected DOM element to be an instance of Element, received ${typeof element}`,
-    )
-  }
-
-  const css = getUniqueCssSelector(element)
-  if (provider === 'playwright') {
-    return `css=${css}`
-  }
-  return css
-}
-
-function getUniqueCssSelector(el: Element) {
-  const path = []
-  let parent: null | ParentNode
-  let hasShadowRoot = false
-  // eslint-disable-next-line no-cond-assign
-  while (parent = getParent(el)) {
-    if ((parent as Element).shadowRoot) {
-      hasShadowRoot = true
-    }
-
-    const tag = el.tagName
-    if (el.id) {
-      path.push(`#${el.id}`)
-    }
-    else if (!el.nextElementSibling && !el.previousElementSibling) {
-      path.push(tag)
-    }
-    else {
-      let index = 0
-      let sameTagSiblings = 0
-      let elementIndex = 0
-
-      for (const sibling of parent.children) {
-        index++
-        if (sibling.tagName === tag) {
-          sameTagSiblings++
-        }
-        if (sibling === el) {
-          elementIndex = index
-        }
-      }
-
-      if (sameTagSiblings > 1) {
-        path.push(`${tag}:nth-child(${elementIndex})`)
-      }
-      else {
-        path.push(tag)
-      }
-    }
-    el = parent as Element
-  };
-  return `${provider === 'webdriverio' && hasShadowRoot ? '>>>' : ''}${path.reverse().join(' > ')}`.toLowerCase()
-}
-
-function getParent(el: Element) {
-  const parent = el.parentNode
-  if (parent instanceof ShadowRoot) {
-    return parent.host
-  }
-  return parent
-}
-
 export const userEvent: UserEvent = {
   // TODO: actually setup userEvent with config options
   setup() {
@@ -143,16 +71,16 @@ export const userEvent: UserEvent = {
 }
 
 export function cdp() {
-  return runner().cdp!
+  return getBrowserState().cdp!
 }
 
 const screenshotIds: Record<string, Record<string, string>> = {}
 export const page: BrowserPage = {
   get config() {
-    return runner().config
+    return getBrowserState().config
   },
   viewport(width, height) {
-    const id = runner().iframeId
+    const id = getBrowserState().iframeId
     channel.postMessage({ type: 'viewport', width, height, id })
     return new Promise((resolve, reject) => {
       channel.addEventListener('message', function handler(e) {
@@ -168,7 +96,7 @@ export const page: BrowserPage = {
     })
   },
   async screenshot(options = {}) {
-    const currentTest = state().current
+    const currentTest = getWorkerState().current
     if (!currentTest) {
       throw new Error('Cannot take a screenshot outside of a test.')
     }

packages/browser/src/client/utils.ts

@@ -64,7 +64,11 @@ export function convertElementToCssSelector(element: Element) {
     )
   }
 
-  return getUniqueCssSelector(element)
+  const css = getUniqueCssSelector(element)
+  if (getBrowserState().provider === 'playwright') {
+    return `css=${css}`
+  }
+  return css
 }
 
 function getUniqueCssSelector(el: Element) {