fix: fix testing-library errors

Author: shadowusr

src/browser/queries/index.ts

@@ -60,6 +60,14 @@ function findContainerWithExecute(container: ElementBase): WebdriverIO.Browser {
     return curContainer;
 }
 
+const findBrowser = (container: ElementBase): WebdriverIO.Browser => {
+    let browser: ElementBase | WebdriverIO.Browser = container;
+    while ((browser as ElementBase).parent && browser.capabilities === undefined) {
+        browser = (browser as ElementBase).parent;
+    }
+    return browser as WebdriverIO.Browser;
+};
+
 async function injectDOMTestingLibrary(container: ElementBase) {
     const browser = findContainerWithExecute(container);
     const shouldInjectDTL = await browser.execute(function () {
@@ -126,6 +134,12 @@ async function executeQuery(query: QueryName, container: HTMLElement, ...args: S
         }
 
         function deserializeArg(arg: SerializedArg): QueryArg {
+            if (typeof arg === "object" && arg === null) {
+                return undefined;
+            }
+            if (typeof arg === "object" && (arg as { nodeType?: string }).nodeType !== undefined) {
+                return arg as QueryArg;
+            }
             if (typeof arg === "object" && arg.serialized === "RegExp") {
                 return eval(arg.RegExp);
             }
@@ -187,7 +201,8 @@ function createQuery(container: ElementBase & SelectorsBase, queryName: QueryNam
     return async (...args: QueryArg[]) => {
         await injectDOMTestingLibrary(container);
 
-        const result: SerializedQueryResult = await findContainerWithExecute(container).execute(
+        const browser = findBrowser(container);
+        const result: SerializedQueryResult = await browser.execute(
             executeQuery,
             queryName,
             container as unknown as HTMLElement,

src/browser/queries/types.ts

@@ -45,10 +45,6 @@ export type TestplaneQueries = {
     [P in keyof Queries]: BoundFunction<WebdriverIO.Element, WebdriverIO.Element[], Queries[P]>;
 };
 
-export type TestplaneQueriesSync = {
-    [P in keyof Queries]: BoundFunctionSync<WebdriverIO.Element, WebdriverIO.Element[], Queries[P]>;
-};
-
 export type TestplaneQueriesChainable<Container extends SelectorsBase | undefined = SelectorsBase> = {
     [P in keyof Queries as `${string & P}$`]: Container extends SelectorsBase
         ? BoundFunctionSync<ReturnType<Container["$"]>, ReturnType<Container["$$"]>, Queries[P]>
@@ -68,3 +64,10 @@ export type SerializedRegExp = { serialized: "RegExp"; RegExp: string };
 export type SerializedUndefined = { serialized: "Undefined"; Undefined: true };
 
 export type SerializedArg = SerializedObject | SerializedRegExp | SerializedUndefined | number | string;
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace WebdriverIO {
+        interface Element extends TestplaneQueries {}
+    }
+}

src/browser/types.ts

@@ -8,7 +8,7 @@ import { OpenAndWaitCommand } from "./commands/openAndWait";
 import type { Callstack } from "./history/callstack";
 import { Test, Hook } from "../test-reader/test-object";
 import type { CaptureSnapshotOptions, CaptureSnapshotResult } from "./commands/captureDomSnapshot";
-import { TestplaneQueries, TestplaneQueriesChainable, TestplaneQueriesSync } from "./queries";
+import { TestplaneQueries, TestplaneQueriesChainable } from "./queries";
 
 export const BrowserName = {
     CHROME: PuppeteerBrowser.CHROME,
@@ -59,7 +59,7 @@ declare global {
             ...args: Parameters<Fn>
         ) => ReturnType<Fn>;
 
-        interface Browser extends TestplaneQueries, TestplaneQueriesSync, TestplaneQueriesChainable {
+        interface Browser extends TestplaneQueries, TestplaneQueriesChainable {
             getMeta(this: WebdriverIO.Browser): Promise<BrowserMeta>;
 
             getMeta(this: WebdriverIO.Browser, key: string): Promise<unknown>;