fix: error running with wdio v8 (#47)

Closes issue #46.

When using WebdriverIO v8 we encounter `TypeError: container.parent.execute is not a function`. This is due to the execute function being moved off of Elements. Traverse up through the Element's parents until we find one with `execute` and use that to inject DTL and to execute the query. Using the parent to execute does not change the behaviour of `within` since the passed Element is still used as the container for the query.

src/index.ts

@@ -10,7 +10,7 @@ import {
 } from '@testing-library/dom'
 import 'simmerjs'
 
-import {BrowserBase, ElementBase} from './wdio-types'
+import {BaseWithExecute, BrowserBase, ElementBase} from './wdio-types'
 import {
   QueryArg,
   Config,
@@ -46,16 +46,29 @@ const SIMMERJS = fs
 
 let _config: Partial<Config>
 
+function isContainerWithExecute(container: ElementBase | BaseWithExecute): container is BaseWithExecute {
+  return (container as { execute?: unknown }).execute != null;
+}
+
+function findContainerWithExecute(container: ElementBase): BaseWithExecute {
+  let curContainer: ElementBase | BaseWithExecute = container.parent;
+  while (!isContainerWithExecute(curContainer)) {
+    curContainer = curContainer.parent;
+  }
+  return curContainer;
+}
+
 async function injectDOMTestingLibrary(container: ElementBase) {
-  const shouldInject = await container.parent.execute(function () {
+  const containerWithExecute = findContainerWithExecute(container);
+  const shouldInject = await containerWithExecute.execute(function () {
     return {
       domTestingLibrary: !window.TestingLibraryDom,
       simmer: !window.Simmer,
     }
   })
 
   if (shouldInject.domTestingLibrary) {
-    await container.parent.execute(function (library: string) {
+    await containerWithExecute.execute(function (library: string) {
       // add DOM Testing Library to page as a script tag to support Firefox
       if (navigator.userAgent.includes('Firefox')) {
         const script = document.createElement('script')
@@ -69,10 +82,10 @@ async function injectDOMTestingLibrary(container: ElementBase) {
   }
 
   if (shouldInject.simmer) {
-    await container.parent.execute(SIMMERJS)
+    await containerWithExecute.execute(SIMMERJS)
   }
 
-  await container.parent.execute(function (config: Config) {
+  await containerWithExecute.execute(function (config: Config) {
     window.TestingLibraryDom.configure(config)
   }, _config)
 }
@@ -187,7 +200,7 @@ function createQuery(container: ElementBase, queryName: QueryName) {
     await injectDOMTestingLibrary(container)
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const result: SerializedQueryResult = await container.parent.executeAsync(
+    const result: SerializedQueryResult = await findContainerWithExecute(container).executeAsync(
       executeQuery,
       queryName,
       container,

src/wdio-types.ts

@@ -37,17 +37,19 @@ export type SelectorsBase = {
   $$: $$
 }
 
-export type ElementBase = SelectorsBase & {
-  parent: {
-    execute<T>(
+export type BaseWithExecute = {
+  execute<T>(
       script: string | ((...args: any[]) => T),
       ...args: any[]
-    ): Promise<T>
-
-    execute<T>(script: string | ((...args: any[]) => T), ...args: any[]): T
-
-    executeAsync(script: string | ((...args: any[]) => void), ...args: any[]): any
-  }
+  ): Promise<T>
+
+  execute<T>(script: string | ((...args: any[]) => T), ...args: any[]): T
+
+  executeAsync(script: string | ((...args: any[]) => void), ...args: any[]): any
+}
+
+export type ElementBase = SelectorsBase & {
+  parent: ElementBase | BaseWithExecute
 }
 
 export type BrowserBase = SelectorsBase & {