Back to Details

qa-game

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

QA Game

游戏QA测试

Add automated QA testing with Playwright to an existing game project. Tests verify your game boots, scenes work, scoring functions, and visuals haven't broken — like a safety net for your game.
为现有游戏项目添加基于Playwright的自动化QA测试。这些测试可以验证游戏能否正常启动、场景是否正常运行、计分功能是否可用，以及视觉效果是否未出现损坏——就像游戏的安全保障网一样。

Instructions

操作步骤

Analyze the game at 
$ARGUMENTS
(or the current directory if no path given).
First, load the game-qa skill to get the full testing patterns and fixtures.
分析位于
$ARGUMENTS
的游戏（如果未指定路径则使用当前目录）。
首先，加载game-qa技能以获取完整的测试模式和夹具（fixtures）。

Step 1: Audit testability

步骤1：可测试性审计

  • Read 
    package.json
    to identify the engine and dev server port
  • Read 
    vite.config.js
    for the server port
  • Read 
    src/main.js
    to check if 
    window.__GAME__
    , 
    window.__GAME_STATE__
    , 
    window.__EVENT_BUS__
    are exposed
  • Read 
    src/core/GameState.js
    to understand what state is available
  • Read 
    src/core/EventBus.js
    to understand what events exist
  • Read all scene files to understand the game flow
  • 读取
    package.json
    以识别游戏引擎和开发服务器端口
  • 读取
    vite.config.js
    获取服务器端口
  • 读取
    src/main.js
    检查是否已暴露
    window.__GAME__
    、
    window.__GAME_STATE__
    、
    window.__EVENT_BUS__
  • 读取
    src/core/GameState.js
    了解可用的状态信息
  • 读取
    src/core/EventBus.js
    了解现有事件
  • 读取所有场景文件以理解游戏流程

Step 2: Setup Playwright

步骤2：设置Playwright

  1. Install dependencies: 
    npm install -D @playwright/test @axe-core/playwright && npx playwright install chromium
  2. Create 
    playwright.config.js
    with the correct dev server port and webServer config
  3. Expose 
    window.__GAME__
    , 
    window.__GAME_STATE__
    , 
    window.__EVENT_BUS__
    , 
    window.__EVENTS__
    in 
    src/main.js
    if not already present
  4. Create the test directory structure: 
    tests/
├── e2e/
│   ├── game.spec.js
│   ├── visual.spec.js
│   └── perf.spec.js
├── fixtures/
│   └── game-test.js
└── helpers/
    └── seed-random.js
  5. Add npm scripts: 
    test
    , 
    test:ui
    , 
    test:headed
    , 
    test:update-snapshots
  1. 安装依赖：
    npm install -D @playwright/test @axe-core/playwright && npx playwright install chromium
  2. 创建
    playwright.config.js
    文件，配置正确的开发服务器端口和webServer设置
  3. 如果
    src/main.js
    中尚未暴露
    window.__GAME__
    、
    window.__GAME_STATE__
    、
    window.__EVENT_BUS__
    、
    window.__EVENTS__
    ，则添加相关暴露代码
  4. 创建测试目录结构： 
    tests/
├── e2e/
│   ├── game.spec.js
│   ├── visual.spec.js
│   └── perf.spec.js
├── fixtures/
│   └── game-test.js
└── helpers/
    └── seed-random.js
  5. 添加npm脚本：
    test
    、
    test:ui
    、
    test:headed
    、
    test:update-snapshots

Step 3: Generate tests

步骤3：生成测试用例

Write tests based on what the game actually does:
  • game.spec.js: Boot test, scene transitions, input handling, scoring, game over, restart
  • visual.spec.js: Screenshot regression for stable scenes (gameplay initial state, game over). Skip active gameplay screenshots — moving objects make them unstable.
  • perf.spec.js: Load time budget, FPS during gameplay, canvas dimensions
Follow the game-qa skill patterns. Use 
gamePage
fixture. Use 
page.evaluate()
to read game state. Use 
page.keyboard.press()
for input.
根据游戏的实际功能编写测试：
  • game.spec.js：启动测试、场景切换、输入处理、计分功能、游戏结束、重新开始
  • visual.spec.js：针对稳定场景（游戏初始状态、游戏结束界面）进行截图回归测试。跳过动态游戏过程的截图——移动的对象会导致测试不稳定。
  • perf.spec.js：加载时间预算、游戏过程中的FPS、画布尺寸
遵循game-qa技能的模式，使用
gamePage
夹具。通过
page.evaluate()
读取游戏状态，使用
page.keyboard.press()
模拟输入。

Step 4: Run and verify

步骤4：运行并验证测试

  1. Run 
    npx playwright test
    to execute all tests
  2. If visual tests fail on first run, that's expected — generate baselines with 
    npx playwright test --update-snapshots
  3. Run again to verify all tests pass
  4. Summarize results
  1. 执行
    npx playwright test
    以运行所有测试
  2. 如果首次运行时视觉测试失败，这是正常现象——执行
    npx playwright test --update-snapshots
    生成基准截图
  3. 再次运行测试以验证所有测试通过
  4. 总结测试结果

Step 5: Report

步骤5：测试报告

Tell the user in plain English:
  • How many tests were created and what they check
  • How to run them: 
    npm test
    (headless), 
    npm run test:headed
    (see the browser), 
    npm run test:ui
    (interactive dashboard)
  • "These tests are your safety net. Run them after making changes to make sure nothing broke."
用通俗易懂的语言告知用户：
  • 创建了多少个测试，以及这些测试的验证内容
  • 如何运行测试：
    npm test
    （无头模式）、
    npm run test:headed
    （可见浏览器窗口）、
    npm run test:ui
    （交互式仪表盘）
  • "这些测试就是你的安全保障网。在修改代码后运行它们，确保没有功能被破坏。"

Next Step

下一步操作

Tell the user:
Your game now has automated tests! Finally, run 
/game-creator:review-game
for a full architecture review — it checks your code structure, performance patterns, and gives you a score with specific improvement suggestions.
Pipeline progress: /make-game → /design-game → /add-audio → /qa-game → 
/review-game
告知用户：
你的游戏现在已经拥有自动化测试了！最后，运行
/game-creator:review-game
进行完整的架构评审——它会检查你的代码结构、性能模式，并给出评分和具体的改进建议。
流程进度： /make-game → /design-game → /add-audio → /qa-game → 
/review-game