ぷよぷよプログラミングをAutifyで自動化テストできないかを検討する

はじめに

「SEGA CHALLENGE!! ぷよぷよプログラミング」

と言うコンテンツをご存知でしょうか。

小中高校生向けのプログラミング教育の学習ページです。

「ぷよぷよ」を作ってプログラミングに親しむ、といった素晴らしいコンテンツです。
（自分の頃もこんなのが欲しかった・・・）

★★ 🙇🏻‍♂️SEGA様に心より感謝🙇🏻‍♂️　★★

作ったぷよぷよをAutifyで自動テストできないか、考えてみます。

リアルタイムで操作が必要になるゲームですが、果たして自動化できるのでしょうか。

Let's コーディング！！

「SEGA CHALLENGE!! ぷよぷよプログラミング」
ページにソースコードが掲載されたPDFがあります。

とりあえず、全コードを入力することとします。
久しぶりのコーディングで、コーディングミスもあり、
動くまで手動で実行しては、修正を繰り返しました。

▼できました！

(まだ、コーディングミスがあるような・・・？？？)

サーバに配置する

Autify で自動テストするために、　サーバに配置する必要があります。

Salesforce に移植します！！
（なぜ「Salesforceなのか」・・・　興味本位とロマンです（謎））

▼てなわけで、サクッと移植

Lightning のホームページにも配置してみました。これで、いつでも遊べる。

仕様を確認しましょう

軽く仕様を確認しましょう。

1. ぷよ落下

２. キーボード：下キーで落下速度が上がる

3. ぷよが積み上がる

4. 画面一番上まで積み上がるとゲームオーバー

• テストケース
  • 時間が経過するたびに、ぷよが落下する
  • 下キーを押すと落下速度が早くなる
  • 接地を判断して、消せるぷよがあれば消す
    • 地面（最下層）への接地
      • 地面を突き抜けたりしないこと
    • 他のぷよとの接地
      • ぷよが重なったりしないこと
    • 消せる場合、当該ぷよを消す
      • 色々な配置パターン（縦４つ、横４つなど）
    • 消せない場合、当該ぷよはそのまま
  • ぷよが最上位まで積み上がると、ゲームオーバーになる
    （まだまだある）

5. キーボード：左キーを押下で左に移動

• テストケース
  • ぷよが左に移動する
  • 最も左の場合、左には移動しない
    • 画面外に移動しないこと

6. キーボード：右キーを押下で右に移動

• テストケース
  • ぷよが右に移動する
  • 最も左の場合、右には移動しない
    • 画面外に移動しないこと

他にもスコア計算などもありますね。

Autify でシナリオ化してみましょう。

まず「キー操作」のあたりをRecodingできるか、シナリオ化してみます。

ぷよぷよを操作、キーボード左キー・右キーを入力して、移動させます。

録画結果を見てみましょう。

残念ながら、キー入力が録画されていません。

こまりました。 JSステップでなんとかならないでしょうか。

このあたりが参考になりそうです。

キーボード：左キーボタン・押す

document.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft" }));

キーボード：左キーボタン・離す

document.dispatchEvent(new KeyboardEvent("keyup", { key: "ArrowLeft" }));

こんなシナリオになりました。

#	イメージ	説明
1		・Salesforce にログインするまでのステップグループ
2		・事前にぷよぷよのVisualForceページをタブ化したタブをクリック
3		・自由落下させるため、１秒待つ
4		・キーボード上キーを押すJSステップを実行
5		・キーボード上キーを離すJSステップを実行
6		・自由落下させるため、１秒待つ
7		・キーボード左キーを押すJSステップを実行
8		・キーボード左キーを離すJSステップを実行
9		・自由落下させるため、１秒待つ
10		・キーボード右キーを押すJSステップを実行
11		・キーボード右キーを離すJSステップを実行
12		・キーボード左キーを押すJSステップを実行
13		・キーボード左キーを離すJSステップを実行

実行結果

一応、キー操作は動作しており、ぷよが移動していることが、確認できます。
キー操作もかなり 2秒以内と早く、しっかりキャプチャも撮れており、ちゃんと移動していることが
確認できました。

#	実行結果	画面キャプチャ
1
2
3
4
5
6
7
8
9
10
11
12
13

画像比較する

過去の実行結果と比較をします。

▼過去と今回で少し落下位置が異なっています。

▼差分を確認すると、0.25%の差があるようです。

当然、Autifyサーバの状況やブラウザの状態に依るので、確実に同じにはならないですが
目視で問題ないことを確認できます。

ビデオログで確認する

タイミングが良いことに、2022年11月28日、【ビデオログ】と言う機能がリリースされました。
リリースノート本文
https://help.autify.com/docs/ja/release-notes-november-28th-2022

見てみましょう。
※ブラウザを別のアプリで動画撮影したので、若干速度等は異なります。

アクティブに動作する場合でも、これがあれば、わかりますね。

じゃぁ、どんなシナリオにすれば良いのかな？

（拙い絵ですみません汗）

1. 左キーを押して左に移動する。左端まで移動したら、そこで止まること。
   

2. 右キーを押して右に移動する。右端まで移動したら、そこで止まること。
   

3. ぷよが回転すること（左回り）
   

4. ぷよが消えること
   

ぷよは４つ連結することで消えますが、
これを自動化するのがなかなか難しいです。

絵では、2つの例を記載していますが、
4つ連結されるパターンが多いです。

自動化シナリオを考えたとき
そのパターンになるように移動させ、積み上げる必要があります。

ただ
　・降ってくるぷよのパターンはランダム
　・前述の通り、キーを押下して移動、放すことで移動が止まる （移動の距離が実行毎に異なってしまうことが考えられる）
　・ぷよの落ちる位置が固定化されている
ことから、シナリオどおりにならない可能性が高いです。

そのため、このような「テストモード」を作成することにしました。

• 内部の情報を表示する機能
• 一時停止機能（Enterで一時停止・一時停止解除する機能）
• 内部で保持しているぷよの配置状態を編集できる機能
• 降ってくるぷよのパターンの固定化

1	2
	・内部で保持しているフレーム値、動作しているモード、一時停止状態の確認
	・ぷよの配置情報の表示
	・ぷよの配置の編集

▼「ぷよの配置の編集」で任意のぷよ番号を指定して「Submit」ボタンクリックで、任意のぷよ配置を表現できます。

シナリオを作ってみましょう

#	イメージ	説明
1		・Salesforce にログインするまでのステップグループ
2		・事前にぷよぷよのVisualForceページをタブ化したタブをクリック
3		・自由落下させるため、１秒待つ (これは不要なステップですね)
4		・ぷよの配置編集
5		・ぷよの配置編集
6		・ぷよの配置編集
7		・ぷよの配置編集
8		・ぷよの配置編集
9		・ぷよの配置編集
10		・ぷよの配置編集の反映
11		・ぷよぷよゲーム画面のクリック
12		・Enterキーを押して離す。一時停止を解除。
13		・１秒自由落下させる
14		・下キーを押して、落下速度アップ
15		・落下まで待つ
16		・下キーを離す。
17		・Enterキーを押して離す。一時停止。

実行結果

ぷよが消えるテスト。
ぷよを編集できるようにしたので、配置パターンでのテストができるようになりました。

#	実行結果	画面キャプチャ
1
2
3
4〜9		▼4.の結果
10		▼しっかりプルダウン設定されてます
11		▼ぷよが設定されました
12		▼上にちょこっとぷよが落ちてきてます
13
14
15		▼ちゃんと消えていることと、全消しが出てることを確認
16
17

ビデオログで確認する

▼ ちゃんとぷよが消えていることが確認できています。

言いたかったこと

• ゲームのような随時動作するアプリでもAutifyの自動テストをすることができる。

• ただ、デバッグモードのような機能を用意しないと実現できない場合がある。

• 当然、デバッグモードはリリースできない。自動テストの扱いは、あくまでも機能テストの一部。

  • 裏手の機能に係るテストは、自動で。本番のテストは、手動で、と言った使い分けをしても良いかも。

• 自動テストを将来行う、という計画の際は、アプリケーション設計時から自動化テストについて考慮するべき。

• またそれに係る工数も用意すべき。

最後に

長文になってしまい、申し訳ありません。
最後まで閲覧いただき、ありがとうございました。