playwright-testing-library - npm Package Compare versions

Comparing version 4.4.1 to 4.4.2

dist/fixture/helpers.d.ts

@@ -0,3 +1,7 @@
+declare class TestingLibraryDeserializedFunction extends Function {
+    original: string;
+    constructor(fn: string);
+}
 declare const replacer: (_: string, value: unknown) => unknown;
-declare const reviver: (_: string, value: string) => string | Function | RegExp;
-export { replacer, reviver };
+declare const reviver: (_: string, value: string) => string | RegExp | TestingLibraryDeserializedFunction;
+export { TestingLibraryDeserializedFunction, replacer, reviver };

dist/fixture/helpers.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reviver = exports.replacer = void 0;
+exports.reviver = exports.replacer = exports.TestingLibraryDeserializedFunction = void 0;
+class TestingLibraryDeserializedFunction extends Function {
+    constructor(fn) {
+        super(`return (${fn}).apply(this, arguments)`);
+        this.original = fn;
+    }
+}
+exports.TestingLibraryDeserializedFunction = TestingLibraryDeserializedFunction;
 const replacer = (_, value) => {
@@ -18,4 +25,3 @@ if (value instanceof RegExp)
     if (value.toString().includes('__FUNCTION ')) {
-        // eslint-disable-next-line @typescript-eslint/no-implied-eval
-        return new Function(`return (${value.split('__FUNCTION ')[1]}).apply(this, arguments)`);
+        return new TestingLibraryDeserializedFunction(value.split('__FUNCTION ')[1]);
     }
@@ -22,0 +28,0 @@ return value;

dist/fixture/locator/fixtures.js

@@ -37,21 +37,47 @@ "use strict";
 exports.withinFixture = withinFixture;
-const engine = () => ({
-    query(root, selector) {
-        const args = JSON.parse(selector, window.__testingLibraryReviver);
-        if ((0, queries_1.isAllQuery)(queryName))
-            throw new Error(`PlaywrightTestingLibrary: the plural '${queryName}' was used to create this Locator`);
-        // @ts-expect-error
-        const result = window.TestingLibraryDom[queryName](root, ...args);
-        return result;
-    },
-    queryAll(root, selector) {
-        const testingLibrary = window.TestingLibraryDom;
-        const args = JSON.parse(selector, window.__testingLibraryReviver);
-        // @ts-expect-error
-        const result = testingLibrary[queryName](root, ...args);
-        if (!result)
-            return [];
-        return Array.isArray(result) ? result : [result];
-    },
-});
+const engine = () => {
+    const getError = (error, matcher) => {
+        if (typeof matcher === 'function' && error instanceof ReferenceError) {
+            return new ReferenceError([
+                error.message,
+                '\n⚠️ A ReferenceError was thrown when using a function TextMatch, did you reference external scope in your matcher function?',
+                '\nProvided matcher function:',
+                matcher instanceof TestingLibraryDeserializedFunction
+                    ? matcher.original
+                    : matcher.toString(),
+                '\n',
+            ].join('\n'));
+        }
+        return error;
+    };
+    return {
+        query(root, selector) {
+            const args = JSON.parse(selector, window.__testingLibraryReviver);
+            if ((0, queries_1.isAllQuery)(queryName))
+                throw new Error(`PlaywrightTestingLibrary: the plural '${queryName}' was used to create this Locator`);
+            try {
+                // @ts-expect-error
+                const result = window.TestingLibraryDom[queryName](root, ...args);
+                return result;
+            }
+            catch (error) {
+                throw getError(error, args[0]);
+            }
+        },
+        queryAll(root, selector) {
+            const testingLibrary = window.TestingLibraryDom;
+            const args = JSON.parse(selector, window.__testingLibraryReviver);
+            try {
+                // @ts-expect-error
+                const result = testingLibrary[queryName](root, ...args);
+                if (!result)
+                    return [];
+                return Array.isArray(result) ? result : [result];
+            }
+            catch (error) {
+                throw getError(error, args[0]);
+            }
+        },
+    };
+};
 const registerSelectorsFixture = [
@@ -58,0 +84,0 @@ ({}, use) => __awaiter(void 0, void 0, void 0, function* () {

dist/fixture/locator/helpers.js

@@ -23,4 +23,5 @@ "use strict";
     ${configuredTestingLibraryDom}
-    
+
     window.__testingLibraryReviver = ${helpers_1.reviver.toString()};
+    ${helpers_1.TestingLibraryDeserializedFunction.toString()};
   `;
@@ -27,0 +28,0 @@ });

lib/fixture/helpers.ts

@@ -0,1 +1,11 @@
+class TestingLibraryDeserializedFunction extends Function {
+  original: string
+
+  constructor(fn: string) {
+    super(`return (${fn}).apply(this, arguments)`)
+
+    this.original = fn
+  }
+}
+
 const replacer = (_: string, value: unknown) => {
@@ -16,4 +26,3 @@ if (value instanceof RegExp) return `__REGEXP ${value.toString()}`
   if (value.toString().includes('__FUNCTION ')) {
-    // eslint-disable-next-line @typescript-eslint/no-implied-eval
-    return new Function(`return (${value.split('__FUNCTION ')[1]}).apply(this, arguments)`)
+    return new TestingLibraryDeserializedFunction(value.split('__FUNCTION ')[1])
   }
@@ -24,2 +33,2 @@
 
-export {replacer, reviver}
+export {TestingLibraryDeserializedFunction, replacer, reviver}

lib/fixture/locator/fixtures.ts

 import type {Locator, PlaywrightTestArgs, TestFixture} from '@playwright/test'
 import {Page, selectors} from '@playwright/test'
 
+import type {TestingLibraryDeserializedFunction as DeserializedFunction} from '../helpers'
 import type {
@@ -55,35 +56,68 @@ Config,
 
+type SynchronousQueryParameters = Parameters<Queries[SynchronousQuery]>
+
 declare const queryName: SynchronousQuery
+declare class TestingLibraryDeserializedFunction extends DeserializedFunction {}
 
-const engine: () => SelectorEngine = () => ({
-  query(root, selector) {
-    const args = JSON.parse(selector, window.__testingLibraryReviver) as unknown as Parameters<
-      Queries[typeof queryName]
-    >
-
-    if (isAllQuery(queryName))
-      throw new Error(
-        `PlaywrightTestingLibrary: the plural '${queryName}' was used to create this Locator`,
+const engine: () => SelectorEngine = () => {
+  const getError = (error: unknown, matcher: SynchronousQueryParameters[0]) => {
+    if (typeof matcher === 'function' && error instanceof ReferenceError) {
+      return new ReferenceError(
+        [
+          error.message,
+          '\n⚠️ A ReferenceError was thrown when using a function TextMatch, did you reference external scope in your matcher function?',
+          '\nProvided matcher function:',
+          matcher instanceof TestingLibraryDeserializedFunction
+            ? matcher.original
+            : matcher.toString(),
+          '\n',
+        ].join('\n'),
       )
+    }
 
-    // @ts-expect-error
-    const result = window.TestingLibraryDom[queryName](root, ...args)
+    return error
+  }
 
-    return result
-  },
-  queryAll(root, selector) {
-    const testingLibrary = window.TestingLibraryDom
-    const args = JSON.parse(selector, window.__testingLibraryReviver) as unknown as Parameters<
-      Queries[typeof queryName]
-    >
+  return {
+    query(root, selector) {
+      const args = JSON.parse(
+        selector,
+        window.__testingLibraryReviver,
+      ) as unknown as SynchronousQueryParameters
 
-    // @ts-expect-error
-    const result = testingLibrary[queryName](root, ...args)
+      if (isAllQuery(queryName))
+        throw new Error(
+          `PlaywrightTestingLibrary: the plural '${queryName}' was used to create this Locator`,
+        )
 
-    if (!result) return []
+      try {
+        // @ts-expect-error
+        const result = window.TestingLibraryDom[queryName](root, ...args)
 
-    return Array.isArray(result) ? result : [result]
-  },
-})
+        return result
+      } catch (error) {
+        throw getError(error, args[0])
+      }
+    },
+    queryAll(root, selector) {
+      const testingLibrary = window.TestingLibraryDom
+      const args = JSON.parse(
+        selector,
+        window.__testingLibraryReviver,
+      ) as unknown as SynchronousQueryParameters
 
+      try {
+        // @ts-expect-error
+        const result = testingLibrary[queryName](root, ...args)
+
+        if (!result) return []
+
+        return Array.isArray(result) ? result : [result]
+      } catch (error) {
+        throw getError(error, args[0])
+      }
+    },
+  }
+}
+
 const registerSelectorsFixture: [
@@ -90,0 +124,0 @@ TestFixture<void, PlaywrightTestArgs>,

lib/fixture/locator/helpers.ts

 import {promises as fs} from 'fs'
 
 import {configureTestingLibraryScript} from '../../common'
-import {reviver} from '../helpers'
+import {TestingLibraryDeserializedFunction, reviver} from '../helpers'
 import type {Config, Selector, SynchronousQuery} from '../types'
@@ -20,4 +20,5 @@
     ${configuredTestingLibraryDom}
-    
+
     window.__testingLibraryReviver = ${reviver.toString()};
+    ${TestingLibraryDeserializedFunction.toString()};
   `
@@ -24,0 +25,0 @@ }

package.json

 {
   "name": "playwright-testing-library",
-  "version": "4.4.1",
+  "version": "4.4.2",
   "description": "playwright + dom-testing-library",
@@ -26,2 +26,3 @@ "main": "./dist/index.js",
     "test:fixture:legacy": "playwright test test/fixture/element-handles.test.ts",
+    "test:fixture:locator": "playwright test test/fixture/locators.test.ts",
     "test:standalone": "hover-scripts test --no-watch",
@@ -28,0 +29,0 @@ "test:types": "tsc --noEmit"

playwright.config.ts

@@ -6,4 +6,5 @@ import {PlaywrightTestConfig} from '@playwright/test'
   testDir: 'test/fixture',
+  use: {actionTimeout: 3000},
 }
 
 export default config

README.md

@@ -333,4 +333,18 @@ <div align="center">
 - Assertion extensions from [**jest-dom**](https://testing-library.com/docs/ecosystem-jest-dom/) are not compatible, use Playwright Test if possible.
-- The [`getNodeText()`](https://testing-library.com/docs/dom-testing-library/api-custom-queries/#getnodetext) function is not currently supported for `Locator`.
 
+### Locator Queries
+
+- The [`getNodeText()`](https://testing-library.com/docs/dom-testing-library/api-custom-queries/#getnodetext) function is currently unsupported.
+- When using a function for [`TextMatch`](https://testing-library.com/docs/queries/about/#textmatch), the function cannot reference its closure scope
+
+  ```ts
+  // ✅ This is supported
+  screen.getByText(content => content.startsWith('Foo'))
+
+  // ❌ This is not supported
+  const startsWithFoo = (content: string) => content.startsWith('Foo')
+
+  screen.getByText(content => startsWithFoo(content))
+  ```
+
 ## Special Thanks
@@ -337,0 +351,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

706057

increased by0.58%

Lines of code

19121

increased by0.4%

Number of lines in readme file

384

increased by3.78%

No dependency changes