feat: add support of @testing-library/dom queries

Author: talkenson

src/browser/browser.ts

@@ -13,7 +13,7 @@ import { AsyncEmitter } from "../events";
 import { BrowserConfig } from "../config/browser-config";
 import type { Callstack } from "./history/callstack";
 import type { WdProcess, WebdriverPool } from "../browser-pool/webdriver-pool";
-import { setupBrowser } from "./queries";
+import { configure, setupBrowser } from "./queries";
 
 const CUSTOM_SESSION_OPTS = [
     "outputDir",
@@ -104,6 +104,7 @@ export class Browser {
     }
 
     protected _addQueries(): void {
+        configure({ testIdAttribute: this._config.testIdAttribute, asyncUtilTimeout: this._config.waitTimeout });
         setupBrowser(this._session!);
     }
 

src/browser/queries/index.ts

@@ -61,26 +61,35 @@ function findContainerWithExecute(container: ElementBase): WebdriverIO.Browser {
 }
 
 async function injectDOMTestingLibrary(container: ElementBase) {
-    const containerWithExecute = findContainerWithExecute(container);
-    const shouldInjectDTL = await containerWithExecute.execute(function () {
+    const browser = findContainerWithExecute(container);
+    const shouldInjectDTL = await browser.execute(function () {
         return !window.TestingLibraryDom;
     });
 
     if (shouldInjectDTL) {
-        await containerWithExecute.execute(function (library) {
-            // add DOM Testing Library to page as a script tag to support Firefox
+        await browser.execute(function (library) {
             if (navigator.userAgent.indexOf("Firefox") !== -1) {
-                const script = window.document.createElement("script");
-                script.textContent = library;
-                window.document.head.append(script);
-                window.eval(library);
+                try {
+                    // Inject via inline-script
+                    const script = window.document.createElement("script");
+                    script.textContent = library;
+                    window.document.head.append(script);
+                    if (!window.TestingLibraryDom) {
+                        // Inject via eval
+                        window.eval(library);
+                    }
+                } catch (error) {
+                    throw new Error(
+                        `The DOM Testing Library cannot be injected on certain domains, particularly "${window.location.host}", due to restrictions imposed by the Content-Security-Policy (CSP) header.`,
+                    );
+                }
             } else {
                 eval(library);
             }
         }, DOM_TESTING_LIBRARY_UMD);
     }
 
-    await containerWithExecute.execute(function (config: Partial<Config>) {
+    await browser.execute(function (config: Partial<Config>) {
         window.TestingLibraryDom.configure(config);
     }, _config);
 }
@@ -109,7 +118,6 @@ function serializeArg(arg: QueryArg): SerializedArg {
 type SerializedQueryResult = { selector: string }[] | string | { selector: string } | null;
 
 async function executeQuery(query: QueryName, container: HTMLElement, ...args: SerializedArg[]) {
-    // const done = args.pop() as unknown as (result: SerializedQueryResult) => void;
     return new Promise((done: (result: SerializedQueryResult) => void) => {
         function deserializeObject(object: SerializedObject) {
             return Object.entries(object)
@@ -154,7 +162,7 @@ async function executeQuery(query: QueryName, container: HTMLElement, ...args: S
             }
 
             function makeSelectorResult(element: HTMLElement): { selector: string } {
-                const elementIdAttributeName = "data-wdio-testing-lib-element-id";
+                const elementIdAttributeName = "data-testplane-element-id";
                 let elementId = element.getAttribute(elementIdAttributeName);
 
                 // if id doesn't already exist create one and add it to element

src/config/defaults.js

@@ -118,6 +118,7 @@ module.exports = {
     },
     passive: false,
     timeTravel: TimeTravelMode.Off,
+    testIdAttribute: "data-testid",
 };
 
 module.exports.configPaths = [

src/config/types.ts

@@ -277,7 +277,9 @@ export interface CommonConfig {
     sessionsPerBrowser: number;
     testsPerSession: number;
     retry: number;
+
     shouldRetry(testInfo: { ctx: Test; retriesLeft: number }): boolean | null;
+
     httpTimeout: number;
     urlHttpTimeout: number | null;
     pageLoadTimeout: number | null;
@@ -293,9 +295,13 @@ export interface CommonConfig {
     };
     takeScreenshotOnFailsTimeout: number | null;
     takeScreenshotOnFailsMode: "fullpage" | "viewport";
+
     prepareBrowser(browser: WebdriverIO.Browser): void | null;
+
     screenshotPath: string | null;
+
     screenshotsDir(test: Test): string;
+
     calibrate: boolean;
     compositeImage: boolean;
     strictTestsOrder: boolean;
@@ -350,6 +356,8 @@ export interface CommonConfig {
     };
 
     timeTravel: TimeTravelConfig;
+
+    testIdAttribute?: string;
 }
 
 export interface SetsConfig {
@@ -386,6 +394,7 @@ export interface ConfigParsed extends CommonConfig {
 
 export interface RuntimeConfig {
     extend: (data: unknown) => this;
+
     [key: string]: unknown;
 }
 

src/index.ts

@@ -14,7 +14,6 @@ export { Key } from "@testplane/webdriverio";
 export * from "./mock";
 
 export * as unstable from "./unstable";
-export * as queries from "./browser/queries";
 
 export type {
     WdioBrowser,