onChange function ✓ 100.0%

function onChange(e: Event): void {
  const el = e.target;
  if (!session || session.status !== "recording") return;
  if (isExtensionUI(el as Element)) return;

  // Checkbox and radio: `change` is the reliable event across all browsers.
  // Deduplicate with onInput in case the browser also fires `input` (Chrome 74+).
  if (el instanceof HTMLInputElement) {
    const lastStep = session.steps[session.steps.length - 1];
    if (el.type === "checkbox") {
      const action = el.checked ? "check" : "uncheck";
      if (
        lastStep?.type === action &&
        lastStep.selector === buildQuickSelector(el) &&
        now() - lastStep.timestamp < 500
      )
        return;
      addStep(buildStep(action, el));
      return;
    }
    if (el.type === "radio") {
      if (
        lastStep?.type === "check" &&
        lastStep.selector === buildQuickSelector(el) &&
        now() - lastStep.timestamp < 500
      )
        return;
      addStep(buildStep("check", el, { value: el.value }));
      return;
    }
  }

  if (!(el instanceof HTMLSelectElement)) return;

  // Select changes are captured here if not caught by input
  const lastStep = session.steps[session.steps.length - 1];
  if (
    lastStep?.type === "select" &&
    lastStep.selector === buildQuickSelector(el)
  ) {
    lastStep.value = el.value;
    return;
  }

  addStep(buildStep("select", el, { value: el.value }));
}