@demon-utils/playwright 0.1.0 → 0.1.3

package/dist/index.js

@@ -0,0 +1,82 @@
+// src/commentary.ts
+var TOOLTIP_ID = "demon-commentary-tooltip";
+async function showCommentary(page, options) {
+  await page.evaluate(({ selector, text, tooltipId }) => {
+    const target = document.querySelector(selector);
+    if (!target) {
+      throw new Error(`demon commentary: element not found for selector "${selector}"`);
+    }
+    document.getElementById(tooltipId)?.remove();
+    const rect = target.getBoundingClientRect();
+    const tooltip = document.createElement("div");
+    tooltip.id = tooltipId;
+    tooltip.textContent = text;
+    const style = document.createElement("style");
+    style.setAttribute("data-demon-commentary", "");
+    style.textContent = `
+        @keyframes demon-commentary-in {
+          from {
+            opacity: 0;
+            transform: translateY(8px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        @keyframes demon-commentary-out {
+          from {
+            opacity: 1;
+            transform: translateY(0);
+          }
+          to {
+            opacity: 0;
+            transform: translateY(8px);
+          }
+        }
+        #${tooltipId} {
+          position: fixed;
+          z-index: 2147483647;
+          background: #1a1a2e;
+          color: #eee;
+          padding: 8px 14px;
+          border-radius: 6px;
+          font: 14px/1.4 system-ui, sans-serif;
+          max-width: 320px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+          pointer-events: none;
+          animation: demon-commentary-in 0.3s ease-out forwards;
+        }
+        #${tooltipId}.demon-commentary-hiding {
+          animation: demon-commentary-out 0.25s ease-in forwards;
+        }
+      `;
+    document.querySelector("style[data-demon-commentary]")?.remove();
+    document.head.appendChild(style);
+    const top = rect.bottom + 10;
+    const left = rect.left + rect.width / 2;
+    tooltip.style.top = `${top}px`;
+    tooltip.style.left = `${left}px`;
+    tooltip.style.transform = `translateX(-50%)`;
+    document.body.appendChild(tooltip);
+  }, { selector: options.selector, text: options.text, tooltipId: TOOLTIP_ID });
+}
+async function hideCommentary(page) {
+  await page.evaluate((tooltipId) => {
+    const tooltip = document.getElementById(tooltipId);
+    if (!tooltip)
+      return;
+    tooltip.classList.add("demon-commentary-hiding");
+    tooltip.addEventListener("animationend", () => {
+      tooltip.remove();
+      document.querySelector("style[data-demon-commentary]")?.remove();
+    }, { once: true });
+  }, TOOLTIP_ID);
+  await page.waitForTimeout(300);
+}
+export {
+  showCommentary,
+  hideCommentary
+};
+
+//# debugId=308A425302523F0964756E2164756E21

package/dist/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/commentary.ts"],
+  "sourcesContent": [
+    "import type { Page } from \"@playwright/test\";\n\nexport interface ShowCommentaryOptions {\n  selector: string;\n  text: string;\n}\n\nconst TOOLTIP_ID = \"demon-commentary-tooltip\";\n\nexport async function showCommentary(\n  page: Page,\n  options: ShowCommentaryOptions,\n): Promise<void> {\n  await page.evaluate(\n    ({ selector, text, tooltipId }) => {\n      const target = document.querySelector(selector);\n      if (!target) {\n        throw new Error(\n          `demon commentary: element not found for selector \"${selector}\"`,\n        );\n      }\n\n      // Remove any existing tooltip\n      document.getElementById(tooltipId)?.remove();\n\n      const rect = target.getBoundingClientRect();\n\n      const tooltip = document.createElement(\"div\");\n      tooltip.id = tooltipId;\n      tooltip.textContent = text;\n\n      const style = document.createElement(\"style\");\n      style.setAttribute(\"data-demon-commentary\", \"\");\n      style.textContent = `\n        @keyframes demon-commentary-in {\n          from {\n            opacity: 0;\n            transform: translateY(8px);\n          }\n          to {\n            opacity: 1;\n            transform: translateY(0);\n          }\n        }\n        @keyframes demon-commentary-out {\n          from {\n            opacity: 1;\n            transform: translateY(0);\n          }\n          to {\n            opacity: 0;\n            transform: translateY(8px);\n          }\n        }\n        #${tooltipId} {\n          position: fixed;\n          z-index: 2147483647;\n          background: #1a1a2e;\n          color: #eee;\n          padding: 8px 14px;\n          border-radius: 6px;\n          font: 14px/1.4 system-ui, sans-serif;\n          max-width: 320px;\n          box-shadow: 0 4px 12px rgba(0,0,0,0.3);\n          pointer-events: none;\n          animation: demon-commentary-in 0.3s ease-out forwards;\n        }\n        #${tooltipId}.demon-commentary-hiding {\n          animation: demon-commentary-out 0.25s ease-in forwards;\n        }\n      `;\n\n      // Remove previous style if any\n      document.querySelector(\"style[data-demon-commentary]\")?.remove();\n      document.head.appendChild(style);\n\n      // Position below the target element, horizontally centered\n      const top = rect.bottom + 10;\n      const left = rect.left + rect.width / 2;\n      tooltip.style.top = `${top}px`;\n      tooltip.style.left = `${left}px`;\n      tooltip.style.transform = `translateX(-50%)`;\n\n      document.body.appendChild(tooltip);\n    },\n    { selector: options.selector, text: options.text, tooltipId: TOOLTIP_ID },\n  );\n}\n\nexport async function hideCommentary(page: Page): Promise<void> {\n  await page.evaluate((tooltipId) => {\n    const tooltip = document.getElementById(tooltipId);\n    if (!tooltip) return;\n\n    tooltip.classList.add(\"demon-commentary-hiding\");\n\n    tooltip.addEventListener(\n      \"animationend\",\n      () => {\n        tooltip.remove();\n        document.querySelector(\"style[data-demon-commentary]\")?.remove();\n      },\n      { once: true },\n    );\n  }, TOOLTIP_ID);\n\n  // Wait for the animate-out to complete\n  await page.waitForTimeout(300);\n}\n"
+  ],
+  "mappings": ";AAOA,IAAM,aAAa;AAEnB,eAAsB,cAAc,CAClC,MACA,SACe;AAAA,EACf,MAAM,KAAK,SACT,GAAG,UAAU,MAAM,gBAAgB;AAAA,IACjC,MAAM,SAAS,SAAS,cAAc,QAAQ;AAAA,IAC9C,IAAI,CAAC,QAAQ;AAAA,MACX,MAAM,IAAI,MACR,qDAAqD,WACvD;AAAA,IACF;AAAA,IAGA,SAAS,eAAe,SAAS,GAAG,OAAO;AAAA,IAE3C,MAAM,OAAO,OAAO,sBAAsB;AAAA,IAE1C,MAAM,UAAU,SAAS,cAAc,KAAK;AAAA,IAC5C,QAAQ,KAAK;AAAA,IACb,QAAQ,cAAc;AAAA,IAEtB,MAAM,QAAQ,SAAS,cAAc,OAAO;AAAA,IAC5C,MAAM,aAAa,yBAAyB,EAAE;AAAA,IAC9C,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAqBf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAaA;AAAA;AAAA;AAAA;AAAA,IAML,SAAS,cAAc,8BAA8B,GAAG,OAAO;AAAA,IAC/D,SAAS,KAAK,YAAY,KAAK;AAAA,IAG/B,MAAM,MAAM,KAAK,SAAS;AAAA,IAC1B,MAAM,OAAO,KAAK,OAAO,KAAK,QAAQ;AAAA,IACtC,QAAQ,MAAM,MAAM,GAAG;AAAA,IACvB,QAAQ,MAAM,OAAO,GAAG;AAAA,IACxB,QAAQ,MAAM,YAAY;AAAA,IAE1B,SAAS,KAAK,YAAY,OAAO;AAAA,KAEnC,EAAE,UAAU,QAAQ,UAAU,MAAM,QAAQ,MAAM,WAAW,WAAW,CAC1E;AAAA;AAGF,eAAsB,cAAc,CAAC,MAA2B;AAAA,EAC9D,MAAM,KAAK,SAAS,CAAC,cAAc;AAAA,IACjC,MAAM,UAAU,SAAS,eAAe,SAAS;AAAA,IACjD,IAAI,CAAC;AAAA,MAAS;AAAA,IAEd,QAAQ,UAAU,IAAI,yBAAyB;AAAA,IAE/C,QAAQ,iBACN,gBACA,MAAM;AAAA,MACJ,QAAQ,OAAO;AAAA,MACf,SAAS,cAAc,8BAA8B,GAAG,OAAO;AAAA,OAEjE,EAAE,MAAM,KAAK,CACf;AAAA,KACC,UAAU;AAAA,EAGb,MAAM,KAAK,eAAe,GAAG;AAAA;",
+  "debugId": "308A425302523F0964756E2164756E21",
+  "names": []
+}

package/package.json

@@ -1,10 +1,25 @@
 {
   "name": "@demon-utils/playwright",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "private": false,
-  "module": "src/index.ts",
+  "module": "dist/index.js",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./src/index.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
   "type": "module",
+  "peerDependencies": {
+    "@playwright/test": ">=1.40.0"
+  },
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "latest",
+    "@playwright/test": "^1.50.0"
   }
 }

package/src/commentary.test.ts

@@ -0,0 +1,71 @@
+import { test, expect } from "@playwright/test";
+
+import { showCommentary, hideCommentary } from "./commentary.ts";
+
+const TOOLTIP_ID = "demon-commentary-tooltip";
+
+const INLINE_HTML = `data:text/html,
+<html>
+<body>
+  <button id="submit-btn" style="margin: 100px;">Submit</button>
+</body>
+</html>`;
+
+test("showCommentary injects a tooltip near the target element", async ({
+  page,
+}) => {
+  await page.goto(INLINE_HTML);
+
+  await showCommentary(page, {
+    selector: "#submit-btn",
+    text: "Now we submit the form",
+  });
+
+  const tooltip = page.locator(`#${TOOLTIP_ID}`);
+  await expect(tooltip).toBeVisible();
+  await expect(tooltip).toHaveText("Now we submit the form");
+});
+
+test("hideCommentary removes the tooltip with animation", async ({ page }) => {
+  await page.goto(INLINE_HTML);
+
+  await showCommentary(page, {
+    selector: "#submit-btn",
+    text: "This will disappear",
+  });
+
+  await expect(page.locator(`#${TOOLTIP_ID}`)).toBeVisible();
+
+  await hideCommentary(page);
+
+  await expect(page.locator(`#${TOOLTIP_ID}`)).toHaveCount(0);
+});
+
+test("showCommentary replaces an existing tooltip", async ({ page }) => {
+  await page.goto(INLINE_HTML);
+
+  await showCommentary(page, {
+    selector: "#submit-btn",
+    text: "First message",
+  });
+
+  await showCommentary(page, {
+    selector: "#submit-btn",
+    text: "Second message",
+  });
+
+  const tooltips = page.locator(`#${TOOLTIP_ID}`);
+  await expect(tooltips).toHaveCount(1);
+  await expect(tooltips).toHaveText("Second message");
+});
+
+test("showCommentary throws for missing selector", async ({ page }) => {
+  await page.goto(INLINE_HTML);
+
+  await expect(
+    showCommentary(page, {
+      selector: "#nonexistent",
+      text: "Should fail",
+    }),
+  ).rejects.toThrow();
+});

package/src/commentary.ts

@@ -0,0 +1,109 @@
+import type { Page } from "@playwright/test";
+
+export interface ShowCommentaryOptions {
+  selector: string;
+  text: string;
+}
+
+const TOOLTIP_ID = "demon-commentary-tooltip";
+
+export async function showCommentary(
+  page: Page,
+  options: ShowCommentaryOptions,
+): Promise<void> {
+  await page.evaluate(
+    ({ selector, text, tooltipId }) => {
+      const target = document.querySelector(selector);
+      if (!target) {
+        throw new Error(
+          `demon commentary: element not found for selector "${selector}"`,
+        );
+      }
+
+      // Remove any existing tooltip
+      document.getElementById(tooltipId)?.remove();
+
+      const rect = target.getBoundingClientRect();
+
+      const tooltip = document.createElement("div");
+      tooltip.id = tooltipId;
+      tooltip.textContent = text;
+
+      const style = document.createElement("style");
+      style.setAttribute("data-demon-commentary", "");
+      style.textContent = `
+        @keyframes demon-commentary-in {
+          from {
+            opacity: 0;
+            transform: translateY(8px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        @keyframes demon-commentary-out {
+          from {
+            opacity: 1;
+            transform: translateY(0);
+          }
+          to {
+            opacity: 0;
+            transform: translateY(8px);
+          }
+        }
+        #${tooltipId} {
+          position: fixed;
+          z-index: 2147483647;
+          background: #1a1a2e;
+          color: #eee;
+          padding: 8px 14px;
+          border-radius: 6px;
+          font: 14px/1.4 system-ui, sans-serif;
+          max-width: 320px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+          pointer-events: none;
+          animation: demon-commentary-in 0.3s ease-out forwards;
+        }
+        #${tooltipId}.demon-commentary-hiding {
+          animation: demon-commentary-out 0.25s ease-in forwards;
+        }
+      `;
+
+      // Remove previous style if any
+      document.querySelector("style[data-demon-commentary]")?.remove();
+      document.head.appendChild(style);
+
+      // Position below the target element, horizontally centered
+      const top = rect.bottom + 10;
+      const left = rect.left + rect.width / 2;
+      tooltip.style.top = `${top}px`;
+      tooltip.style.left = `${left}px`;
+      tooltip.style.transform = `translateX(-50%)`;
+
+      document.body.appendChild(tooltip);
+    },
+    { selector: options.selector, text: options.text, tooltipId: TOOLTIP_ID },
+  );
+}
+
+export async function hideCommentary(page: Page): Promise<void> {
+  await page.evaluate((tooltipId) => {
+    const tooltip = document.getElementById(tooltipId);
+    if (!tooltip) return;
+
+    tooltip.classList.add("demon-commentary-hiding");
+
+    tooltip.addEventListener(
+      "animationend",
+      () => {
+        tooltip.remove();
+        document.querySelector("style[data-demon-commentary]")?.remove();
+      },
+      { once: true },
+    );
+  }, TOOLTIP_ID);
+
+  // Wait for the animate-out to complete
+  await page.waitForTimeout(300);
+}

package/src/index.ts

@@ -1 +1,2 @@
-export {};
+export { showCommentary, hideCommentary } from "./commentary.ts";
+export type { ShowCommentaryOptions } from "./commentary.ts";

package/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["ESNext"],
-    "module": "ESNext",
-    "target": "ESNext",
-    "moduleResolution": "bundler",
-    "moduleDetection": "force",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noPropertyAccessFromIndexSignature": true
-  }
-}