シナリオでテストする

シナリオは、本物のブラウザでゲームを動かして何が起きるかを確かめる、ステップを並べた JSON ファイルです。時間は wait ステップでしか進まないので、実行結果は決定的になります。

{
  "$schema": "../node_modules/@debuffjp/cli/schema/scenario.schema.json",
  "steps": [
    { "press": "ArrowRight" },
    { "wait": 30 },
    { "release": "ArrowRight" },
    { "expect": { "state.player.x": { "gt": 200 } } },
    { "set": { "player.speed": 400 } },
    { "capture": "after-move" }
  ]
}

scenarios/ に保存して、実行します。

npx debuff scenario            # すべてのシナリオ
npx debuff scenario --update   # 新しいスクリーンショットをベースラインとして採用

ステップ

ステップ	効果
{ "wait": n }	固定ステップのシミュレーションを n ステップ進める
{ "press": code } / { "release": code }	キーを押したままにする／離す
{ "tap": [x, y] }	論理座標でポインターをタップ
{ "pointerDown" / "pointerMove": [x, y] }、{ "pointerUp": true }	ポインターの操作
{ "set": { "group.key": value } }	パラメータを変更
{ "expect": { path: comparison } }	状態をアサート：eq、gt、gte、lt、lte、approx
{ "until": { path: comparison }, "within": n }	条件が満たされるまでプレイし、n ステップを超えたら失敗。events.<name> は game.emit("<name>") の呼び出し回数を数えるので、時間を当て推量せずに「起きたこと」を待てます
{ "command": name, "args": [...] }	ゲームが登録した dev コマンドを実行（レベルへのワープ、盤面のセットアップなど）
{ "capture": name }	スクリーンショットを撮ってベースラインと比較
{ "flashes": n }	n ステッププレイし、広い範囲で 1 秒に 3 回を超える点滅があれば失敗（光過敏性への配慮）
{ "contrast": [x, y, w, h] }	その範囲のテキストと背景のコントラストが 4.5:1 未満なら失敗（"min" で基準を変更）

expect と until のパスは dev の状態から読みます：scene、tick、stats.fps、state.*（シーンの inspect()）、events.*、plugins.*。

画面サイズとモーション

シナリオは 960×540 のブラウザウィンドウで実行されます。縦持ちのスマホゲームのように形が違うなら、debuff.config.ts でプロジェクト全体のサイズを設定しましょう。キャプチャやコントラストのチェックがゲームを実寸で見られるようになります（debuff fuzz もこの設定を使います）。

import { defineConfig } from "@debuffjp/cli";

export default defineConfig({
  scenarios: { viewport: [360, 640] },
});

個々のシナリオで上書きできます。ブラウザが「動きを減らす」設定を要求する状態で実行させることもできます。

{ "viewport": [1280, 720], "reducedMotion": true, "steps": [] }

フォントの描画が OS ごとに違うため、ベースラインは OS ごとに保存されます。