Skip to content

v0.6.0 — Visual regression checks

Choose a tag to compare

@Rosalina7515 Rosalina7515 released this 18 May 11:31
· 5 commits to main since this release

What's new

Added

  • Visual regression checks. Two new scripts capture structural + computed-style snapshots of every detected route — before any edit and after — then diff them and surface findings as a "Risks" section in
    report.md.
    • scripts/visual-snapshot.mjs <before|after> — Playwright-backed; captures up to 5000 elements per route with their tag/role/aria/text/computed-style. Falls back silently if Playwright isn't installed.
    • scripts/visual-diff.mjs — compares snapshots and emits .ui-modernizer/risks.json with severity-tagged findings (high / medium / info).
  • Risk categories (high): missing interactive element, lost aria-label, WCAG AA contrast regression (< 4.5:1).
  • Risk categories (medium): tag changed, font-size shrunk > 20%, contrast dropped notably.
  • Risk categories (info): color/background shifted on headings, new elements added (usually intentional).
  • report.md gains a ## ⚠️ Risks section, per-route, sorted high → medium → info.
  • New reference: references/visual-regression.md.

Changed

  • SKILL.md — Steps 4/6/7 upgraded from PNG screenshots to JSON visual snapshots + diff. PNG screenshots remain as an optional side step.
  • scripts/report.mjs — reads risks.json and embeds findings; gracefully omits the section if absent.

Not changed

  • Backup / rollback unchanged.
  • The modernizer never auto-reverts based on risks — they're shown, the user decides.
  • Existing screenshot scripts kept for users who want PNGs.

新增

  • 视觉回归测试。两个新脚本在改之前和改之后各抓一次每个路由的结构 + 计算样式快照,再 diff 出风险条目,以 "Risks" 章节写进 report.md
    • scripts/visual-snapshot.mjs <before|after> —— 基于 Playwright;每个路由最多抓 5000 个元素的 tag/role/aria/text/computed-style。Playwright 未装时静默降级。
    • scripts/visual-diff.mjs —— 比较两份快照,输出 .ui-modernizer/risks.json,带 severity 标签(high / medium / info)。
  • 风险分类(高严重):交互元素消失、aria-label 丢失、WCAG AA 对比度回归(< 4.5:1)。
  • 风险分类(中严重):tag 变了、字号缩水 > 20%、对比度明显下降。
  • 风险分类(info):标题色/背景色变化、新增元素(通常是有意的)。
  • report.md 新增 ## ⚠️ Risks 章节,按路由展开,高→中→info 排序。
  • 新增参考文档:references/visual-regression.md

改动

  • SKILL.md —— Step 4/6/7 从 PNG 截图升级为 JSON 视觉快照 + diff。PNG 截图作为可选子步骤保留。
  • scripts/report.mjs —— 读取 risks.json 并嵌入风险条目;不存在则优雅省略该章节。

未改动

  • 备份 / 回滚 —— 不变。
  • modernizer 绝不基于风险自动回滚 —— 只展示,由用户判断。
  • 既有截图脚本保留,需要 PNG 的用户可继续使用。