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 });
         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);
 }

src/browser/types.ts

@@ -7,7 +7,7 @@ import { MoveCursorToCommand } from "./commands/moveCursorTo";
 import { OpenAndWaitCommand } from "./commands/openAndWait";
 import type { Callstack } from "./history/callstack";
 import { Test, Hook } from "../test-reader/test-object";
-import { TestplaneQueries, TestplaneQueriesChainable, TestplaneQueriesSync } from "./queries";
+import { configure, TestplaneQueries, TestplaneQueriesChainable, TestplaneQueriesSync } from "./queries";
 
 export const BrowserName = {
     CHROME: PuppeteerBrowser.CHROME,
@@ -154,6 +154,11 @@ declare global {
             switchToRepl: (this: WebdriverIO.Browser, ctx?: Record<string, unknown>) => Promise<void>;
 
             clearSession: (this: WebdriverIO.Browser) => Promise<void>;
+
+            /**
+             * Allows to configure DOM Testing Library
+             */
+            configureDTL: typeof configure;
         }
 
         interface 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;
 }