Back to Details

qa-systematic

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Systematic QA Testing

系统化QA测试

Modes

模式

Full (default)

全量（默认）

Systematic page-by-page testing, 8-category health score, full issue documentation.
逐页面系统化测试，输出8个维度的健康评分，完整的问题记录文档。

Quick

快速

30-second smoke test of critical paths only: login, main nav, primary action.
仅针对核心路径执行30秒冒烟测试：登录、主导航、核心操作。

Regression

回归

Diff current state against saved baseline, report new/resolved issues.
将当前状态与已保存的基准版本对比，上报新增/已解决的问题。

Browser Automation Detection

浏览器自动化检测

Detect available automation in priority order:
  1. Playwright MCP server — check if Playwright tools are available in the current tool list
  2. agent-browser
    skill     — check if the agent-browser skill is loaded
  3. Direct CLI tools — check for 
    playwright
    , 
    puppeteer
    , or 
    cypress
    binaries on PATH
  4. Manual fallback — instruct the user to navigate and report observations
Use the highest-priority method available. State which method is in use at the start of the report.
按优先级顺序检测可用的自动化工具：
  1. Playwright MCP 服务 — 检查当前工具列表中是否可用Playwright工具
  2. agent-browser
    skill     — 检查是否已加载agent-browser技能
  3. 直接CLI工具 — 检查PATH中是否存在
    playwright
    、
    puppeteer
    或
    cypress
    二进制文件
  4. 手动 fallback 方案 — 指导用户手动操作页面并反馈观测结果
使用可用的最高优先级方法，在报告开头说明本次使用的方法。

Workflow

工作流

Phase 1: Initialize

阶段1：初始化

  1. Detect mode from user prompt. Default to full if unspecified.
  2. Detect application URL:
    • Check 
      references/project-detection.md
      for framework port conventions (e.g., Next.js → 3000, Vite → 5173, Django → 8000).
    • If not detectable, ask the user.
  3. Detect available browser automation method (priority list above).
  4. If regression mode: load previous baseline from 
    .qa-reports/
    .
  1. 从用户提示中识别测试模式，未指定时默认使用全量模式。
  2. 识别应用URL：
    • 参考
      references/project-detection.md
      中的框架端口约定（例如Next.js → 3000，Vite → 5173，Django → 8000）。
    • 若无法识别，向用户询问。
  3. 检测可用的浏览器自动化方法（参考上方优先级列表）。
  4. 若为回归模式：从
    .qa-reports/
    目录加载历史基准版本数据。

Phase 2: Authenticate (if needed)

阶段2：鉴权（如需要）

  1. Navigate to root URL and check if a login wall is present.
  2. If credentials were provided: authenticate and store session.
  3. If not: ask the user for test credentials, or skip auth-gated pages and note the gap in the report.
  1. 访问根URL，检查是否存在登录拦截。
  2. 若用户已提供凭证：完成鉴权并存储会话。
  3. 若未提供凭证：向用户索要测试凭证，或跳过需要鉴权的页面并在报告中注明该覆盖缺口。

Phase 3: Orient

阶段3：梳理页面结构

  1. Navigate to root URL.
  2. Map the primary navigation structure — collect all top-level nav links.
  3. Classify each page: static, form, list, detail, dashboard.
  4. Build a test plan ordered by page category (forms and dashboards first — highest defect density).
  1. 访问根URL。
  2. 梳理主导航结构 — 收集所有顶级导航链接。
  3. 对每个页面分类：静态页、表单页、列表页、详情页、仪表盘。
  4. 按页面类别制定测试计划（表单和仪表盘优先 — 缺陷密度最高）。

Phase 4: Explore (Full mode)

阶段4：测试执行（全量模式）

For each page, run the per-page checklist below. In quick mode, run only the items marked with (Q).
对每个页面执行下方的单页检查清单。快速模式下仅执行标记了(Q)的项。

Visual Scan

视觉检查

  • (Q) Layout renders correctly — no overlap, no overflow
  • Images load — no broken 
    <img>
    tags
  • Typography consistent — no visible font fallbacks
  • Responsive: check at desktop (1280px) and mobile (375px) widths
  • (Q) 布局渲染正常 — 无元素重叠、无内容溢出
  • 图片加载正常 — 无损坏的
    <img>
    标签
  • 排版一致 — 无可见的字体 fallback 情况
  • 响应式：检查桌面端(1280px)和移动端(375px)宽度下的展示效果

Interactive Elements

交互元素

  • (Q) All buttons and links are clickable and responsive
  • Hover states present where expected
  • Focus indicators visible for keyboard navigation
  • Disabled states visually distinct
  • (Q) 所有按钮和链接可点击、响应正常
  • 预期有hover态的位置均已实现
  • 键盘导航的聚焦指示器可见
  • 禁用状态视觉区分明显

Forms

表单

  • (Q) Required field validation fires on empty submit
  • Error messages display on invalid input
  • Success feedback on valid submission
  • Form resubmission handled — no duplicate submissions on double-click
  • (Q) 空提交时触发必填项校验
  • 输入非法内容时展示错误提示
  • 提交成功时展示成功反馈
  • 表单重复提交已处理 — 双击不会产生重复提交

Navigation

导航

  • (Q) All nav links resolve — no 404s
  • Back button works as expected
  • Deep links work — direct URL access returns correct page
  • Breadcrumbs accurate (if present)
  • (Q) 所有导航链接可正常访问 — 无404
  • 后退按钮功能符合预期
  • 深度链接可用 — 直接访问URL返回对应页面
  • 面包屑导航准确（如果有）

State Management

状态管理

  • Loading states displayed during async operations
  • Empty states handled — no blank pages when data is absent
  • Error states recoverable — retry or back options present
  • Data persists across navigation — no lost form data on back/forward
  • 异步操作期间展示加载状态
  • 空状态已处理 — 无数据时不会展示空白页面
  • 错误状态可恢复 — 提供重试或返回选项
  • 导航时数据持久化 — 前进/后退不会丢失表单数据

Console

控制台

  • (Q) No JavaScript errors in console
  • No failed network requests (4xx/5xx)
  • No mixed content warnings
  • No deprecation warnings in hot paths
  • (Q) 控制台无JavaScript错误
  • 无失败的网络请求（4xx/5xx）
  • 无混合内容警告
  • 核心路径无废弃API警告

Responsiveness

响应式适配

  • Mobile layout usable — no horizontal scroll at 375px
  • Touch targets >= 44px
  • Text readable without zoom (>= 16px body text)
  • 移动端布局可用 — 375px宽度下无横向滚动条
  • 触控目标尺寸 >= 44px
  • 文本无需缩放即可阅读（正文文本 >= 16px）

Phase 5: Document

阶段5：结果记录

For each issue found, classify using 
references/issue-taxonomy.md
:
  • Severity: critical (blocks usage), major (degrades experience), minor (cosmetic/polish)
  • Category: functional, visual, accessibility, performance, content, navigation, security, console
  • Evidence: screenshot description or reproduction steps
Assign a unique ID: 
QA-001
, 
QA-002
, etc.
Compute health score using the weights defined below and detailed in 
references/report-template.md
.
对每个发现的问题，参考
references/issue-taxonomy.md
分类：
  • 严重级别：critical（阻断使用）、major（体验降级）、minor（视觉/优化类问题）
  • 问题类别：功能、视觉、无障碍、性能、内容、导航、安全、控制台
  • 举证：截图描述或复现步骤
分配唯一ID：
QA-001
、
QA-002
等。
使用下方定义的权重计算健康评分，详细规则参考
references/report-template.md
。

Phase 6: Wrap Up

阶段6：收尾

  1. Generate structured report following 
    references/report-template.md
    .
  2. Save to 
    .qa-reports/<YYYY-MM-DD>-<mode>.json
    .
  3. If full mode: save baseline for future regression comparison.
  4. Present summary: health score, critical/major/minor counts, top 3 priority fixes.
  1. 参考
    references/report-template.md
    生成结构化报告。
  2. 保存到
    .qa-reports/<YYYY-MM-DD>-<mode>.json
    。
  3. 若为全量模式：保存基准版本用于后续回归对比。
  4. 输出总结：健康评分、critical/major/minor问题数量、Top3优先修复项。

Health Score

健康评分

Weighted average across 8 categories, scored 0-100.
CategoryWeight
Console errors15%
Broken links10%
Functional20%
UX/Usability15%
Accessibility15%
Visual10%
Performance10%
Content5%
Scoring per category: start at 100, deduct per issue by severity:
  • Critical: -30
  • Major: -15
  • Minor: -5
Floor at 0. Final health score = weighted sum of category scores.
8个类别的加权平均值，分值范围0-100。
类别权重
控制台错误15%
broken链接10%
功能20%
UX/可用性15%
无障碍15%
视觉10%
性能10%
内容5%
单类别评分规则：初始分为100，根据问题严重程度扣分：
  • Critical：扣30分
  • Major：扣15分
  • Minor：扣5分
最低分为0。最终健康评分 = 各分类得分的加权总和。

Quick Mode Behavior

快速模式规则

Run only items marked (Q) in the Phase 4 checklist. Skip health score computation — report pass/fail per critical path. Target completion: 30 seconds of actual testing time.
仅执行阶段4清单中标记了(Q)的项，跳过健康评分计算 — 仅上报每个核心路径的通过/失败结果。目标完成时间：实际测试耗时30秒。

Regression Mode Behavior

回归模式规则

  1. Load the most recent baseline from 
    .qa-reports/
    .
  2. Run full mode.
  3. Diff issues by ID and description similarity.
  4. Report: new issues, resolved issues, persistent issues.
  5. Save updated baseline.
  1. 从
    .qa-reports/
    加载最新的基准版本。
  2. 执行全量模式测试。
  3. 通过问题ID和描述相似度对比差异。
  4. 上报内容：新增问题、已解决问题、遗留问题。
  5. 保存更新后的基准版本。