@toby1123yjh/test-cli 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Test CLI Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,120 @@
+# test-cli
+
+AI 驱动的 E2E 测试 CLI：通过 `/generate`/`/update` 生成可运行的测试脚本，通过 `/run` 执行并输出 Markdown/HTML 报告。
+
+## 安装
+
+```bash
+npm install -g @toby1123yjh/test-cli
+```
+
+## 系统要求
+
+- Node.js >= 18
+- 前端 UI 测试需要 Playwright（建议 `npm i -D playwright && npx playwright install`）
+- Git 可选
+
+## `.test-cli/` 目录结构
+
+```
+.test-cli/
+├── config.yaml
+├── cases/
+│   └── <module>/
+│       ├── case.yaml
+│       └── script/
+│           ├── test.spec.ts   # frontend (Playwright)
+│           └── test.api.mjs    # backend (Node + fetch)
+└── tests/
+    └── <timestamp>/
+        ├── report.md
+        ├── report.html
+        └── artifacts/
+```
+
+## 快速开始
+
+1) 启动交互式 CLI：
+
+```bash
+test-cli
+```
+
+2) 生成并加载配置（会创建 `.test-cli/config.yaml`、`.test-cli/cases/`、`.test-cli/tests/`）：
+
+```
+/config
+```
+
+3) 编辑 `.test-cli/config.yaml`（示例）：
+
+```yaml
+project:
+  name: "my-app"
+  baseUrl: "http://localhost:3000"
+
+provider:
+  # openai | anthropic | gemini | deepseek
+  provider: "openai"
+  model: "gpt-4o-mini"
+  # apiKey: ${OPENAI_API_KEY}
+```
+
+4) 生成测试：
+
+- 前端：
+
+```
+/generate login https://example.com/login
+```
+
+- 后端（需要 `project.baseUrl` 或在提示里包含 URL）：
+
+```
+/generate api
+```
+
+5) 运行测试（模块可选；不传则跑所有可运行模块）：
+
+```
+/run
+/run login
+```
+
+报告输出在 `.test-cli/tests/<timestamp>/{report.md, report.html}`。
+
+## Slash Commands
+
+| 命令 | 说明 |
+|------|------|
+| `/help` | 显示命令列表 |
+| `/clear` | 清屏 |
+| `/config` | 创建/重载 `.test-cli/config.yaml` 并准备目录 |
+| `/generate <module> [url] [notes...]` | 生成 `case.yaml` + 可运行脚本 |
+| `/update <module> [notes...]` | 更新 `case.yaml` 并重新生成脚本 |
+| `/validate [file] [--dir <dir>]` | 校验 `case.yaml`（主要用于 frontend case） |
+| `/run [module] [--mode frontend|backend] [--filter ...] [--timeout ...]` | 执行脚本并生成报告 |
+| `/new` | 已废弃（请使用 `/generate`） |
+
+## CLI（非交互）
+
+```bash
+# 与 /run 等价
+test-cli run [module] [--mode frontend|backend] [--filter "..."]
+
+# CI 模式：执行 YAML 测试用例（不依赖生成脚本）
+test-cli run --ci [--filter "..."]
+```
+
+## 开发
+
+```bash
+pnpm install
+pnpm test
+pnpm typecheck
+pnpm build
+```
+
+## 许可证
+
+MIT

package/dist/assets/scripts.js

@@ -0,0 +1,470 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const initSidebarDrawer = () => {
+    const root = document.documentElement;
+    const sidebar = document.querySelector(".sidebar");
+    const toggle = document.querySelector(".sidebar-toggle");
+    const backdrop = document.querySelector(".sidebar-backdrop");
+
+    if (!(sidebar instanceof HTMLElement)) return;
+    if (!(toggle instanceof HTMLButtonElement)) return;
+    if (!(backdrop instanceof HTMLElement)) return;
+
+    const mediaQuery = typeof window.matchMedia === "function" ? window.matchMedia("(max-width: 900px)") : null;
+    const isMobile = () => (mediaQuery ? mediaQuery.matches : window.innerWidth <= 900);
+
+    const setSidebarInert = (inert) => {
+      if ("inert" in sidebar) {
+        sidebar.inert = inert;
+        return;
+      }
+
+      const focusableSelector = 'a[href], button, input, select, textarea, [tabindex]';
+      sidebar.querySelectorAll(focusableSelector).forEach((el) => {
+        if (!(el instanceof HTMLElement)) return;
+
+        if (inert) {
+          if (!el.hasAttribute("data-prev-tabindex")) {
+            el.setAttribute("data-prev-tabindex", el.getAttribute("tabindex") ?? "");
+          }
+          el.setAttribute("tabindex", "-1");
+          return;
+        }
+
+        if (!el.hasAttribute("data-prev-tabindex")) return;
+        const prev = el.getAttribute("data-prev-tabindex") ?? "";
+        if (prev === "") el.removeAttribute("tabindex");
+        else el.setAttribute("tabindex", prev);
+        el.removeAttribute("data-prev-tabindex");
+      });
+    };
+
+    const setOpen = (open) => {
+      const mobile = isMobile();
+      const nextOpen = mobile && open;
+
+      root.classList.toggle("sidebar-open", nextOpen);
+      toggle.setAttribute("aria-expanded", String(nextOpen));
+
+      if (!mobile) {
+        sidebar.removeAttribute("aria-hidden");
+        setSidebarInert(false);
+        return;
+      }
+
+      sidebar.setAttribute("aria-hidden", String(!nextOpen));
+      setSidebarInert(!nextOpen);
+    };
+
+    const close = () => {
+      setOpen(false);
+      toggle.focus();
+    };
+
+    toggle.addEventListener("click", () => {
+      if (!isMobile()) return;
+
+      const nextOpen = !root.classList.contains("sidebar-open");
+      setOpen(nextOpen);
+
+      if (nextOpen) {
+        const search = sidebar.querySelector(".sidebar-search");
+        if (search instanceof HTMLInputElement) search.focus();
+      }
+    });
+
+    backdrop.addEventListener("click", () => {
+      if (!root.classList.contains("sidebar-open")) return;
+      setOpen(false);
+    });
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key !== "Escape") return;
+      if (!root.classList.contains("sidebar-open")) return;
+      event.preventDefault();
+      close();
+    });
+
+    sidebar.addEventListener("click", (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      if (!target) return;
+
+      const caseLink = target.closest(".case-item a");
+      if (!caseLink) return;
+
+      if (isMobile() && root.classList.contains("sidebar-open")) {
+        setOpen(false);
+      }
+    });
+
+    const handleViewportChange = () => {
+      if (!isMobile()) setOpen(false);
+      else setOpen(root.classList.contains("sidebar-open"));
+    };
+
+    handleViewportChange();
+
+    if (mediaQuery) {
+      if (typeof mediaQuery.addEventListener === "function") {
+        mediaQuery.addEventListener("change", handleViewportChange);
+      } else if (typeof mediaQuery.addListener === "function") {
+        mediaQuery.addListener(handleViewportChange);
+      }
+    } else {
+      window.addEventListener("resize", handleViewportChange);
+    }
+  };
+
+  const initSidebar = () => {
+    const sidebar = document.querySelector(".sidebar");
+    if (!sidebar) return;
+
+    const searchInput = sidebar.querySelector(".sidebar-search");
+    if (searchInput instanceof HTMLInputElement) {
+      searchInput.addEventListener("input", () => {
+        const query = searchInput.value.trim().toLowerCase();
+        const items = sidebar.querySelectorAll(".case-item");
+
+        items.forEach((item) => {
+          const nameEl = item.querySelector(".case-name");
+          const name = (nameEl?.textContent ?? item.textContent ?? "").trim().toLowerCase();
+          item.hidden = query.length > 0 && !name.includes(query);
+        });
+      });
+
+      searchInput.addEventListener("keydown", (event) => {
+        if (event.key !== "Escape") return;
+        if (searchInput.value.length === 0) return;
+        searchInput.value = "";
+        searchInput.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+    }
+
+    sidebar.addEventListener("click", (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      if (!target) return;
+
+      const toggleBtn = target.closest(".toggle-btn");
+      if (toggleBtn) {
+        const moduleGroup = toggleBtn.closest(".module-group");
+        if (moduleGroup) {
+          const nextCollapsed = !moduleGroup.classList.contains("collapsed");
+          moduleGroup.classList.toggle("collapsed", nextCollapsed);
+          const casesList = moduleGroup.querySelector(".module-group__cases");
+          if (casesList instanceof HTMLElement) {
+            casesList.hidden = nextCollapsed;
+          }
+          toggleBtn.setAttribute("aria-expanded", String(!nextCollapsed));
+          toggleBtn.textContent = nextCollapsed ? "▸" : "▾";
+        }
+        return;
+      }
+
+      const caseLink = target.closest(".case-item a");
+      if (!caseLink) return;
+
+      const caseItem = caseLink.closest(".case-item");
+      if (!caseItem) return;
+
+      sidebar.querySelectorAll(".case-item.active").forEach((el) => el.classList.remove("active"));
+      caseItem.classList.add("active");
+      sidebar.querySelectorAll('.case-link[aria-current="true"]').forEach((el) => el.removeAttribute("aria-current"));
+      caseLink.setAttribute("aria-current", "true");
+    });
+  };
+
+  const initEvidenceTabs = () => {
+    const containers = document.querySelectorAll(".evidence-tabs");
+    containers.forEach((container) => {
+      const tabButtons = Array.from(container.querySelectorAll(".tab-btn"));
+      const tabContents = Array.from(container.querySelectorAll(".tab-content"));
+
+      const getMarkedParser = () => {
+        const globalMarked = globalThis.marked;
+        if (globalMarked && typeof globalMarked.parse === "function") return globalMarked.parse;
+        if (typeof globalMarked === "function") return globalMarked;
+        if (globalMarked && typeof globalMarked.marked === "function") return globalMarked.marked;
+        return undefined;
+      };
+
+      const renderAiTab = () => {
+        const aiContent = container.querySelector('.tab-content[data-tab="ai"]');
+        if (!(aiContent instanceof HTMLElement)) return;
+        if (aiContent.getAttribute("data-rendered") === "true") return;
+
+        const source = aiContent.querySelector(".ai-markdown-source");
+        const output = aiContent.querySelector(".ai-markdown-output");
+        if (!(source instanceof HTMLTextAreaElement) || !(output instanceof HTMLElement)) return;
+
+        const markdown = source.value ?? "";
+        if (markdown.trim().length === 0) {
+          aiContent.setAttribute("data-rendered", "true");
+          return;
+        }
+
+        const parseMarkdown = getMarkedParser();
+        if (parseMarkdown) {
+          const safeMarkdown = markdown.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+          output.innerHTML = parseMarkdown(safeMarkdown);
+          output.querySelectorAll("a[href]").forEach((link) => {
+            const href = link.getAttribute("href") ?? "";
+            if (/^\s*javascript:/i.test(href) || /^\s*data:/i.test(href)) {
+              link.setAttribute("href", "#");
+            }
+            link.setAttribute("rel", "noopener noreferrer");
+          });
+          output.querySelectorAll("img[src]").forEach((img) => {
+            const src = img.getAttribute("src") ?? "";
+            if (/^\s*javascript:/i.test(src)) {
+              img.removeAttribute("src");
+            }
+          });
+        } else {
+          output.textContent = markdown;
+        }
+
+        aiContent.setAttribute("data-rendered", "true");
+      };
+
+      const setActiveTab = (tab) => {
+        tabButtons.forEach((btn) => {
+          const isActive = btn.dataset.tab === tab;
+          btn.classList.toggle("active", isActive);
+          btn.setAttribute("aria-selected", String(isActive));
+          if (btn instanceof HTMLElement) {
+            btn.tabIndex = isActive ? 0 : -1;
+          }
+        });
+        tabContents.forEach((content) => {
+          const isActive = content.dataset.tab === tab;
+          content.hidden = !isActive;
+          content.classList.toggle("active", isActive);
+        });
+
+        if (tab === "ai") renderAiTab();
+      };
+
+      const defaultTab = container.getAttribute("data-default-tab") ?? tabButtons[0]?.dataset.tab ?? "network";
+      setActiveTab(defaultTab);
+
+      const closeOpenRequestDetails = () => {
+        const openDetails = Array.from(container.querySelectorAll("tr.request-detail:not([hidden])"));
+        if (openDetails.length === 0) return false;
+
+        openDetails.forEach((row) => {
+          if (row instanceof HTMLTableRowElement) row.hidden = true;
+        });
+
+        container.querySelectorAll('.request-toggle[aria-expanded="true"]').forEach((btn) => {
+          if (!(btn instanceof HTMLButtonElement)) return;
+          btn.setAttribute("aria-expanded", "false");
+          btn.setAttribute("aria-label", "展开请求详情");
+          btn.textContent = "▸";
+        });
+
+        return true;
+      };
+
+      tabButtons.forEach((btn, index) => {
+        btn.addEventListener("keydown", (event) => {
+          const key = event.key;
+
+          if (key === "ArrowRight" || key === "ArrowDown") {
+            event.preventDefault();
+            tabButtons[(index + 1) % tabButtons.length]?.focus();
+            return;
+          }
+
+          if (key === "ArrowLeft" || key === "ArrowUp") {
+            event.preventDefault();
+            tabButtons[(index - 1 + tabButtons.length) % tabButtons.length]?.focus();
+            return;
+          }
+
+          if (key === "Home") {
+            event.preventDefault();
+            tabButtons[0]?.focus();
+            return;
+          }
+
+          if (key === "End") {
+            event.preventDefault();
+            tabButtons[tabButtons.length - 1]?.focus();
+            return;
+          }
+
+          if (key === "Enter" || key === " ") {
+            event.preventDefault();
+            btn.click();
+          }
+        });
+      });
+
+      container.addEventListener("keydown", (event) => {
+        if (event.key !== "Escape") return;
+        if (!closeOpenRequestDetails()) return;
+        event.preventDefault();
+      });
+
+      const filter = container.querySelector(".request-filter");
+      const applyRequestFilter = () => {
+        if (!(filter instanceof HTMLSelectElement)) return;
+
+        const selected = filter.value;
+        const rows = Array.from(container.querySelectorAll("tr.request-row"));
+
+        rows.forEach((row) => {
+          const status = Number(row.getAttribute("data-status") ?? "0");
+          const isFailed = status >= 400;
+          const shouldShow =
+            selected === "all" || (selected === "failed" && isFailed) || (selected === "success" && !isFailed);
+
+          row.hidden = !shouldShow;
+
+          const requestId = row.getAttribute("data-request-id");
+          if (!requestId) return;
+
+          const detailRow = container.querySelector(`tr.request-detail[data-request-id="${requestId}"]`);
+          if (detailRow instanceof HTMLTableRowElement) {
+            detailRow.hidden = true;
+          }
+
+          const toggleBtn = row.querySelector(".request-toggle");
+          if (toggleBtn instanceof HTMLButtonElement) {
+            toggleBtn.setAttribute("aria-expanded", "false");
+            toggleBtn.setAttribute("aria-label", "展开请求详情");
+            toggleBtn.textContent = "▸";
+          }
+        });
+      };
+
+      if (filter instanceof HTMLSelectElement) {
+        filter.addEventListener("change", applyRequestFilter);
+        applyRequestFilter();
+      }
+
+      const consoleFilter = container.querySelector(".console-level-filter");
+      const applyConsoleFilter = () => {
+        if (!(consoleFilter instanceof HTMLSelectElement)) return;
+
+        const selected = consoleFilter.value;
+        const items = Array.from(container.querySelectorAll(".console-item"));
+
+        items.forEach((item) => {
+          const level = item.getAttribute("data-level") ?? "";
+          item.hidden = selected !== "all" && level !== selected;
+        });
+      };
+
+      if (consoleFilter instanceof HTMLSelectElement) {
+        consoleFilter.addEventListener("change", applyConsoleFilter);
+        applyConsoleFilter();
+      }
+
+      container.addEventListener("click", (event) => {
+        const target = event.target instanceof Element ? event.target : null;
+        if (!target) return;
+
+        const tabBtn = target.closest(".tab-btn");
+        if (tabBtn instanceof HTMLButtonElement) {
+          const tab = tabBtn.dataset.tab;
+          if (tab) setActiveTab(tab);
+          return;
+        }
+
+        const toggleBtn = target.closest(".request-toggle");
+        if (!(toggleBtn instanceof HTMLButtonElement)) return;
+
+        const row = toggleBtn.closest("tr.request-row");
+        if (!(row instanceof HTMLTableRowElement)) return;
+
+        const requestId = row.getAttribute("data-request-id");
+        if (!requestId) return;
+
+        const detailRow = container.querySelector(`tr.request-detail[data-request-id="${requestId}"]`);
+        if (!(detailRow instanceof HTMLTableRowElement)) return;
+
+        const nextOpen = detailRow.hidden;
+        detailRow.hidden = !nextOpen;
+        toggleBtn.setAttribute("aria-expanded", String(nextOpen));
+        toggleBtn.setAttribute("aria-label", nextOpen ? "折叠请求详情" : "展开请求详情");
+        toggleBtn.textContent = nextOpen ? "▾" : "▸";
+      });
+    });
+  };
+
+  const initThemeToggle = () => {
+    const STORAGE_KEY = "verify-cli.report.theme";
+
+    const button = document.querySelector(".theme-toggle");
+    if (!(button instanceof HTMLButtonElement)) return;
+
+    const iconEl = button.querySelector(".theme-toggle__icon");
+
+    const mediaQuery = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+
+    const getSystemTheme = () => (mediaQuery?.matches ? "dark" : "light");
+
+    const getThemeMode = () => document.documentElement.getAttribute("data-theme") ?? "auto";
+
+    const getEffectiveTheme = () => {
+      const mode = getThemeMode();
+      if (mode === "dark" || mode === "light") return mode;
+      return getSystemTheme();
+    };
+
+    const updateIcon = () => {
+      const effective = getEffectiveTheme();
+      const next = effective === "dark" ? "light" : "dark";
+      const icon = next === "dark" ? "🌙" : "☀️";
+      if (iconEl instanceof HTMLElement) {
+        iconEl.textContent = icon;
+      } else {
+        button.textContent = icon;
+      }
+    };
+
+    const applyStoredTheme = () => {
+      try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored === "light" || stored === "dark" || stored === "auto") {
+          document.documentElement.setAttribute("data-theme", stored);
+        }
+      } catch {
+        // ignore
+      }
+    };
+
+    applyStoredTheme();
+    updateIcon();
+
+    button.addEventListener("click", () => {
+      const effective = getEffectiveTheme();
+      const next = effective === "dark" ? "light" : "dark";
+      document.documentElement.setAttribute("data-theme", next);
+      try {
+        localStorage.setItem(STORAGE_KEY, next);
+      } catch {
+        // ignore
+      }
+      updateIcon();
+    });
+
+    const handleSystemThemeChange = () => {
+      const mode = getThemeMode();
+      if (mode !== "dark" && mode !== "light") updateIcon();
+    };
+
+    if (mediaQuery) {
+      if (typeof mediaQuery.addEventListener === "function") {
+        mediaQuery.addEventListener("change", handleSystemThemeChange);
+      } else if (typeof mediaQuery.addListener === "function") {
+        mediaQuery.addListener(handleSystemThemeChange);
+      }
+    }
+  };
+
+  initSidebarDrawer();
+  initSidebar();
+  initEvidenceTabs();
+  initThemeToggle();
+});