bugbug.io check element values

checkElements.js

async function(element, selector, variables) {
  /**
   * 👇 USAGE EXAMPLES (can be commented out):
   * 
   * await checkColor(element, "rgb(0, 128, 128)");
   * await checkFontWeight(element, "600");
   * await checkVisibility(element);
   * await checkFontSize(element, "16px");
   * await checkTextContent(element, "Trello Clone");
   */

  console.log("🔍 Selector received:", selector);
  console.log("📦 Variables received:", variables);
  console.log("📌 Element received:", element);

  const computedStyle = window.getComputedStyle(element);
  console.log("🧪 Full computed style:", computedStyle);

  // Example: check color using a variable or fallback
  const expectedColor = variables.expectedColor || "rgb(0, 128, 128)";
  await checkColor(element, expectedColor);

  // Add more checks as needed
  // await checkFontWeight(element, "600");
  // await checkVisibility(element);

  return true; // If all checks pass

  /**
   * 📣 checkColor: Checks if the computed text color matches the expected one.
   */
  async function checkColor(el, expectedColor) {
    console.log("📣 [checkColor] Running color check...");
    const color = getComputedStyle(el).color;
    console.log("🎨 [checkColor] Computed color:", color);
    console.log("✅ [checkColor] Expected color:", expectedColor);

    if (color === expectedColor) {
      console.log("🟢 [checkColor] Color matches.");
    } else {
      throw new Error(`🔴 [checkColor] Color mismatch. Expected: ${expectedColor}, got: ${color}`);
    }
  }

  /**
   * 📣 checkFontWeight: Checks if the font weight matches the expected value.
   */
  async function checkFontWeight(el, expectedWeight) {
    console.log("📣 [checkFontWeight] Running font-weight check...");
    const weight = getComputedStyle(el).fontWeight;
    console.log("🔤 [checkFontWeight] Computed font-weight:", weight);
    console.log("✅ [checkFontWeight] Expected font-weight:", expectedWeight);

    if (weight === expectedWeight) {
      console.log("🟢 [checkFontWeight] Font-weight matches.");
    } else {
      throw new Error(`🔴 [checkFontWeight] Font-weight mismatch. Expected: ${expectedWeight}, got: ${weight}`);
    }
  }

  /**
   * 📣 checkVisibility: Checks if the element is visible (not hidden or display:none).
   */
  async function checkVisibility(el) {
    console.log("📣 [checkVisibility] Running visibility check...");
    const style = getComputedStyle(el);
    const visible = style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0";
    console.log("👁️ [checkVisibility] Display:", style.display, "| Visibility:", style.visibility, "| Opacity:", style.opacity);

    if (visible) {
      console.log("🟢 [checkVisibility] Element is visible.");
    } else {
      throw new Error(`🔴 [checkVisibility] Element is not visible.`);
    }
  }

  /**
   * 📣 checkFontSize: Checks the font size.
   */
  async function checkFontSize(el, expectedSize) {
    console.log("📣 [checkFontSize] Running font-size check...");
    const size = getComputedStyle(el).fontSize;
    console.log("🔠 [checkFontSize] Computed font-size:", size);
    console.log("✅ [checkFontSize] Expected font-size:", expectedSize);

    if (size === expectedSize) {
      console.log("🟢 [checkFontSize] Font-size matches.");
    } else {
      throw new Error(`🔴 [checkFontSize] Font-size mismatch. Expected: ${expectedSize}, got: ${size}`);
    }
  }

  /**
   * 📣 checkTextContent: Checks the inner text content of the element.
   */
  async function checkTextContent(el, expectedText) {
    console.log("📣 [checkTextContent] Running text content check...");
    const actualText = el.textContent.trim();
    console.log("📝 [checkTextContent] Actual text content:", actualText);
    console.log("✅ [checkTextContent] Expected text content:", expectedText);

    if (actualText === expectedText) {
      console.log("🟢 [checkTextContent] Text content matches.");
    } else {
      throw new Error(`🔴 [checkTextContent] Text content mismatch. Expected: "${expectedText}", got: "${actualText}"`);
    }
  }
}