pre work commit

content.js

@@ -0,0 +1,48 @@
+// content.js - Listens for clicks and sends element attributes to local server
+
+const SERVER_URL = "http://localhost:3000/record";
+
+document.addEventListener("click", async (event) => {
+  let el = event.target;
+
+  // Walk up the DOM until we find a button, link, or element with aria-label
+  while (
+    el &&
+    el !== document.body &&
+    el.tagName.toLowerCase() !== "button" &&
+    el.tagName.toLowerCase() !== "a" &&
+    !el.getAttribute("aria-label")
+  ) {
+    el = el.parentElement;
+    console.log("[Cypress Recorder] Walking up from:", el.tagName, el.className);
+  }
+
+  // Fall back to original target if nothing useful found
+  if (!el || el === document.body) el = event.target;
+
+  // ... rest stays the same
+
+  const payload = {
+    classes: Array.from(el.classList),
+    id: el.id || null,
+    ariaLabel: el.getAttribute("aria-label") || null,
+    tag: el.tagName.toLowerCase(),
+    text: el.innerText?.trim().slice(0, 100) || null, // bonus: visible text
+  };
+
+  console.log("[Cypress Recorder] Click captured:", payload);
+
+  try {
+    const response = await fetch(SERVER_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      console.error("[Cypress Recorder] Server responded with:", response.status);
+    }
+  } catch (err) {
+    console.error("[Cypress Recorder] Could not reach local server:", err.message);
+  }
+}, true); // useCapture: true so we catch clicks on all elements