@empiricalrun/playwright-utils 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @empiricalrun/playwright-utils
 
+## 0.4.1
+
+### Patch Changes
+
+- e7f8f63: feat: add highlights to video recording
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/test/index.d.ts

@@ -0,0 +1,5 @@
+import type { PlaywrightTestArgs, PlaywrightTestOptions, PlaywrightWorkerArgs, PlaywrightWorkerOptions, TestType } from "@playwright/test";
+export declare const baseTestFixture: (testFn: TestType<PlaywrightTestArgs & PlaywrightTestOptions, PlaywrightWorkerArgs & PlaywrightWorkerOptions>) => TestType<PlaywrightTestArgs & PlaywrightTestOptions & {
+    [key: string]: any;
+}, PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
+//# sourceMappingURL=index.d.ts.map

package/dist/test/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,uBAAuB,EACvB,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAI1B,eAAO,MAAM,eAAe,WAClB,SACN,kBAAkB,GAAG,qBAAqB,EAC1C,oBAAoB,GAAG,uBAAuB,CAC/C;;kDAQF,CAAC"}

package/dist/test/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.baseTestFixture = void 0;
+const scripts_1 = require("./scripts");
+const baseTestFixture = function (testFn) {
+    return testFn.extend({
+        page: async ({ page }, use) => {
+            (0, scripts_1.addCustomScripts)(page);
+            await use(page);
+        },
+    });
+};
+exports.baseTestFixture = baseTestFixture;

package/dist/test/scripts/index.d.ts

@@ -0,0 +1,3 @@
+import type { Page } from "@playwright/test";
+export declare function addCustomScripts(page: Page): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/test/scripts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test/scripts/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAK7C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,IAAI,QAS1C"}

package/dist/test/scripts/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addCustomScripts = void 0;
+const locator_highlights_1 = require("./locator-highlights");
+const mouse_pointer_1 = require("./mouse-pointer");
+function addCustomScripts(page) {
+    try {
+        // pointer highlighter and focus highlighter
+        (0, mouse_pointer_1.addMousePointerHighlighter)(page);
+        // playwright locator highlighter
+        (0, locator_highlights_1.addLocatorHighlights)(page);
+    }
+    catch (e) {
+        console.error("Failed to add mouse pointer highlighter", e);
+    }
+}
+exports.addCustomScripts = addCustomScripts;

package/dist/test/scripts/locator-highlights.d.ts

@@ -0,0 +1,3 @@
+import type { Page } from "@playwright/test";
+export declare function addLocatorHighlights(page: Page): void;
+//# sourceMappingURL=locator-highlights.d.ts.map

package/dist/test/scripts/locator-highlights.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"locator-highlights.d.ts","sourceRoot":"","sources":["../../../src/test/scripts/locator-highlights.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAU7C,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,IAAI,QAS9C"}

package/dist/test/scripts/locator-highlights.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addLocatorHighlights = void 0;
+const expect_1 = require("./pw-locator-patch/expect");
+const hover_1 = require("./pw-locator-patch/hover");
+const inner_text_1 = require("./pw-locator-patch/inner-text");
+const input_value_1 = require("./pw-locator-patch/input-value");
+const is_checked_1 = require("./pw-locator-patch/is-checked");
+const is_disabled_1 = require("./pw-locator-patch/is-disabled");
+const is_editable_1 = require("./pw-locator-patch/is-editable");
+function addLocatorHighlights(page) {
+    const LocatorClass = page.locator("").constructor;
+    (0, expect_1.patchExpect)(LocatorClass);
+    (0, input_value_1.patchInputValue)(LocatorClass);
+    (0, is_checked_1.patchIsChecked)(LocatorClass);
+    (0, is_editable_1.patchIsEditable)(LocatorClass);
+    (0, is_disabled_1.patchIsDisabled)(LocatorClass);
+    (0, hover_1.patchHover)(LocatorClass);
+    (0, inner_text_1.patchInnerText)(LocatorClass);
+}
+exports.addLocatorHighlights = addLocatorHighlights;

package/dist/test/scripts/mouse-pointer.d.ts

@@ -0,0 +1,3 @@
+import type { Page } from "@playwright/test";
+export declare function addMousePointerHighlighter(page: Page): void;
+//# sourceMappingURL=mouse-pointer.d.ts.map

package/dist/test/scripts/mouse-pointer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mouse-pointer.d.ts","sourceRoot":"","sources":["../../../src/test/scripts/mouse-pointer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,wBAAgB,0BAA0B,CAAC,IAAI,EAAE,IAAI,QAgGpD"}

package/dist/test/scripts/mouse-pointer.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addMousePointerHighlighter = void 0;
+function addMousePointerHighlighter(page) {
+    page.on("load", async () => {
+        await page?.evaluate(() => {
+            const box = document.createElement("div");
+            box.classList.add("empirical-mouse-pointer");
+            const styleElement = document.createElement("style");
+            styleElement.textContent = `
+      .empirical-mouse-pointer {
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        z-index: 10000;
+        left: 0;
+        width: 20px;
+        height: 20px;
+        background: rgba(0,0,0,.4);
+        border: 1px dashed #FF000D;
+        border-radius: 10px;
+        margin: -10px 0 0 -10px;
+        padding: 0;
+        transition: background .2s, border-radius .2s, border-color .2s;
+      }
+      .empirical-mouse-pointer.button-1 {
+        transition: none;
+        background: rgba(0,0,0,0.9);
+      }
+      .empirical-mouse-pointer.button-2 {
+        transition: none;
+        border-color: rgba(0,0,255,0.9);
+      }
+      .empirical-mouse-pointer.button-3 {
+        transition: none;
+        border-radius: 4px;
+      }
+      .empirical-mouse-pointer.button-4 {
+        transition: none;
+        border-color: rgba(255,0,0,0.9);
+      }
+      .empirical-mouse-pointer.button-5 {
+        transition: none;
+        border-color: rgba(0,255,0,0.9);
+      }
+      .empirical-element-grab-highlight {
+        outline: 2px dashed cyan !important;
+      }
+      *:focus {
+        outline: 2px dashed #FF000D !important;
+      }
+      *:focus-visible {
+        outline: 2px dashed #FF000D !important;
+      }
+    `;
+            document.head.appendChild(styleElement);
+            document.body.appendChild(box);
+            document.addEventListener("mousemove", (event) => {
+                box.style.left = `${event.pageX}px`;
+                box.style.top = `${event.pageY}px`;
+                updateButtons(event.buttons);
+            }, true);
+            document.addEventListener("mousedown", (event) => {
+                updateButtons(event.buttons);
+                box.classList.add(`button-${event.button + 1}`);
+            }, true);
+            document.addEventListener("mouseup", (event) => {
+                updateButtons(event.buttons);
+                box.classList.remove(`button-${event.button + 1}`);
+            }, true);
+            // @ts-ignore
+            function updateButtons(buttons) {
+                for (let i = 0; i < 5; i++) {
+                    box.classList.toggle(`button-${i + 1}`, (buttons / Math.pow(2, i)) % 2 >= 1);
+                }
+            }
+        });
+    });
+}
+exports.addMousePointerHighlighter = addMousePointerHighlighter;

package/dist/test/scripts/pw-locator-patch/expect.d.ts

@@ -0,0 +1,5 @@
+import type { Locator } from "@playwright/test";
+export declare function patchExpect(LocatorClass: {
+    prototype: Locator;
+}): void;
+//# sourceMappingURL=expect.d.ts.map

package/dist/test/scripts/pw-locator-patch/expect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expect.d.ts","sourceRoot":"","sources":["../../../../src/test/scripts/pw-locator-patch/expect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD,wBAAgB,WAAW,CAAC,YAAY,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,QAyB/D"}

package/dist/test/scripts/pw-locator-patch/expect.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchExpect = void 0;
+function patchExpect(LocatorClass) {
+    //@ts-ignore _expect returnsPromise<{ matches: boolean, received?: any, log?: string[], timedOut?: boolean }>
+    const originalExpect = LocatorClass.prototype._expect;
+    // @ts-ignore _expect is a private method in playwright
+    // https://github.com/microsoft/playwright/blob/69287f26bc514b740eac40160503d6fac8185d37/packages/playwright-core/src/client/locator.ts#L352
+    LocatorClass.prototype._expect = async function (expression, options) {
+        const result = await originalExpect.apply(this, [expression, options]);
+        if (result.matches) {
+            try {
+                await this.scrollIntoViewIfNeeded();
+                await this.evaluate((node) => {
+                    node.classList.add("empirical-element-grab-highlight");
+                    setTimeout(() => {
+                        node.classList.remove("empirical-element-grab-highlight");
+                    }, 2000);
+                });
+            }
+            catch (e) {
+                console.error("Failed to add highlight for locator method: _expect", e);
+            }
+        }
+        return result;
+    };
+}
+exports.patchExpect = patchExpect;

package/dist/test/scripts/pw-locator-patch/hover.d.ts

@@ -0,0 +1,5 @@
+import { Locator } from "@playwright/test";
+export declare function patchHover(LocatorClass: {
+    prototype: Locator;
+}): void;
+//# sourceMappingURL=hover.d.ts.map

package/dist/test/scripts/pw-locator-patch/hover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover.d.ts","sourceRoot":"","sources":["../../../../src/test/scripts/pw-locator-patch/hover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,wBAAgB,UAAU,CAAC,YAAY,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,QAiB9D"}

package/dist/test/scripts/pw-locator-patch/hover.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchHover = void 0;
+function patchHover(LocatorClass) {
+    const originalHover = LocatorClass.prototype.hover;
+    LocatorClass.prototype.hover = async function (options) {
+        // ref: https://github.com/microsoft/playwright/blob/69287f26bc514b740eac40160503d6fac8185d37/packages/playwright-core/src/client/locator.ts#L243
+        await originalHover.apply(this, [options]);
+        try {
+            await this.scrollIntoViewIfNeeded();
+            await this.evaluate((node) => {
+                node.classList.add("empirical-element-grab-highlight");
+                setTimeout(() => {
+                    node.classList.remove("empirical-element-grab-highlight");
+                }, 2000);
+            });
+        }
+        catch (e) {
+            console.log("Failed to add highlight for locator method: hover", e);
+        }
+    };
+}
+exports.patchHover = patchHover;

package/dist/test/scripts/pw-locator-patch/inner-text.d.ts

@@ -0,0 +1,5 @@
+import type { Locator } from "@playwright/test";
+export declare function patchInnerText(LocatorClass: {
+    prototype: Locator;
+}): void;
+//# sourceMappingURL=inner-text.d.ts.map

package/dist/test/scripts/pw-locator-patch/inner-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inner-text.d.ts","sourceRoot":"","sources":["../../../../src/test/scripts/pw-locator-patch/inner-text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD,wBAAgB,cAAc,CAAC,YAAY,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,QAkBlE"}

package/dist/test/scripts/pw-locator-patch/inner-text.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchInnerText = void 0;
+function patchInnerText(LocatorClass) {
+    const originalInputValue = LocatorClass.prototype.innerText;
+    //ref: https://github.com/microsoft/playwright/blob/69287f26bc514b740eac40160503d6fac8185d37/packages/playwright-core/src/client/locator.ts#L251
+    LocatorClass.prototype.innerText = async function (options) {
+        const result = await originalInputValue.apply(this, [options]);
+        try {
+            await this.scrollIntoViewIfNeeded();
+            await this.evaluate((node) => {
+                node.classList.add("empirical-element-grab-highlight");
+                setTimeout(() => {
+                    node.classList.remove("empirical-element-grab-highlight");
+                }, 2000);
+            });
+        }
+        catch (e) {
+            console.log("Failed to add highlight for locator method: innerText", e);
+        }
+        return result;
+    };
+}
+exports.patchInnerText = patchInnerText;

package/dist/test/scripts/pw-locator-patch/input-value.d.ts

@@ -0,0 +1,5 @@
+import type { Locator } from "@playwright/test";
+export declare function patchInputValue(LocatorClass: {
+    prototype: Locator;
+}): void;
+//# sourceMappingURL=input-value.d.ts.map

package/dist/test/scripts/pw-locator-patch/input-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-value.d.ts","sourceRoot":"","sources":["../../../../src/test/scripts/pw-locator-patch/input-value.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD,wBAAgB,eAAe,CAAC,YAAY,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,QAkBnE"}

package/dist/test/scripts/pw-locator-patch/input-value.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchInputValue = void 0;
+function patchInputValue(LocatorClass) {
+    const originalInputValue = LocatorClass.prototype.inputValue;
+    //ref: github.com/microsoft/playwright/blob/69287f26bc514b740eac40160503d6fac8185d37/packages/playwright-core/src/client/locator.ts#L255
+    LocatorClass.prototype.inputValue = async function (options) {
+        const result = await originalInputValue.apply(this, [options]);
+        try {
+            await this.scrollIntoViewIfNeeded();
+            await this.evaluate((node) => {
+                node.classList.add("empirical-element-grab-highlight");
+                setTimeout(() => {
+                    node.classList.remove("empirical-element-grab-highlight");
+                }, 2000);
+            });
+        }
+        catch (e) {
+            console.log("Failed to add highlight for locator method: inputValue", e);
+        }
+        return result;
+    };
+}
+exports.patchInputValue = patchInputValue;

package/dist/test/scripts/pw-locator-patch/is-checked.d.ts

@@ -0,0 +1,5 @@
+import { Locator } from "@playwright/test";
+export declare function patchIsChecked(LocatorClass: {
+    prototype: Locator;
+}): void;
+//# sourceMappingURL=is-checked.d.ts.map

package/dist/test/scripts/pw-locator-patch/is-checked.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-checked.d.ts","sourceRoot":"","sources":["../../../../src/test/scripts/pw-locator-patch/is-checked.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,wBAAgB,cAAc,CAAC,YAAY,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,QAkBlE"}

package/dist/test/scripts/pw-locator-patch/is-checked.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchIsChecked = void 0;
+function patchIsChecked(LocatorClass) {
+    const originalIsChecked = LocatorClass.prototype.isChecked;
+    LocatorClass.prototype.isChecked = async function (options) {
+        // ref: https://github.com/microsoft/playwright/blob/69287f26bc514b740eac40160503d6fac8185d37/packages/playwright-core/src/client/locator.ts#L259
+        const result = await originalIsChecked.apply(this, [options]);
+        try {
+            await this.scrollIntoViewIfNeeded();
+            await this.evaluate((node) => {
+                node.classList.add("empirical-element-grab-highlight");
+                setTimeout(() => {
+                    node.classList.remove("empirical-element-grab-highlight");
+                }, 2000);
+            });
+        }
+        catch (e) {
+            console.log("Failed to add highlight for locator method: isChecked", e);
+        }
+        return result;
+    };
+}
+exports.patchIsChecked = patchIsChecked;

package/dist/test/scripts/pw-locator-patch/is-disabled.d.ts

@@ -0,0 +1,5 @@
+import { Locator } from "@playwright/test";
+export declare function patchIsDisabled(LocatorClass: {
+    prototype: Locator;
+}): void;
+//# sourceMappingURL=is-disabled.d.ts.map

package/dist/test/scripts/pw-locator-patch/is-disabled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-disabled.d.ts","sourceRoot":"","sources":["../../../../src/test/scripts/pw-locator-patch/is-disabled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,wBAAgB,eAAe,CAAC,YAAY,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,QAkBnE"}

package/dist/test/scripts/pw-locator-patch/is-disabled.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchIsDisabled = void 0;
+function patchIsDisabled(LocatorClass) {
+    const originalIsDisabled = LocatorClass.prototype.isDisabled;
+    LocatorClass.prototype.isDisabled = async function (options) {
+        // ref: https://github.com/microsoft/playwright/blob/69287f26bc514b740eac40160503d6fac8185d37/packages/playwright-core/src/client/locator.ts#L263
+        const result = await originalIsDisabled.apply(this, [options]);
+        try {
+            await this.scrollIntoViewIfNeeded();
+            await this.evaluate((node) => {
+                node.classList.add("empirical-element-grab-highlight");
+                setTimeout(() => {
+                    node.classList.remove("empirical-element-grab-highlight");
+                }, 2000);
+            });
+        }
+        catch (e) {
+            console.log("Failed to add highlight for locator method: isDisabled", e);
+        }
+        return result;
+    };
+}
+exports.patchIsDisabled = patchIsDisabled;

package/dist/test/scripts/pw-locator-patch/is-editable.d.ts

@@ -0,0 +1,5 @@
+import { Locator } from "@playwright/test";
+export declare function patchIsEditable(LocatorClass: {
+    prototype: Locator;
+}): void;
+//# sourceMappingURL=is-editable.d.ts.map

package/dist/test/scripts/pw-locator-patch/is-editable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-editable.d.ts","sourceRoot":"","sources":["../../../../src/test/scripts/pw-locator-patch/is-editable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,wBAAgB,eAAe,CAAC,YAAY,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,QAkBnE"}

package/dist/test/scripts/pw-locator-patch/is-editable.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchIsEditable = void 0;
+function patchIsEditable(LocatorClass) {
+    const originalIsEditable = LocatorClass.prototype.isEditable;
+    LocatorClass.prototype.isEditable = async function (options) {
+        // ref: https://github.com/microsoft/playwright/blob/69287f26bc514b740eac40160503d6fac8185d37/packages/playwright-core/src/client/locator.ts#L267
+        const result = await originalIsEditable.apply(this, [options]);
+        try {
+            await this.scrollIntoViewIfNeeded();
+            await this.evaluate((node) => {
+                node.classList.add("empirical-element-grab-highlight");
+                setTimeout(() => {
+                    node.classList.remove("empirical-element-grab-highlight");
+                }, 2000);
+            });
+        }
+        catch (e) {
+            console.log("Failed to add highlight for locator method: isEditable", e);
+        }
+        return result;
+    };
+}
+exports.patchIsEditable = patchIsEditable;

package/package.json

@@ -1,11 +1,21 @@
 {
   "name": "@empiricalrun/playwright-utils",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./test": {
+      "default": "./dist/test/index.js",
+      "types": "./dist/test/index.d.ts"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/empirical-run/empirical.git"