はじめに
「SEGA CHALLENGE!! ぷよぷよプログラミング」
と言うコンテンツをご存知でしょうか。
小中高校生向けのプログラミング教育の学習ページです。
「ぷよぷよ」を作ってプログラミングに親しむ、といった素晴らしいコンテンツです。
(自分の頃もこんなのが欲しかった・・・)
★★ 🙇🏻♂️SEGA様に心より感謝🙇🏻♂️ ★★
作ったぷよぷよをAutifyで自動テストできないか、考えてみます。
リアルタイムで操作が必要になるゲームですが、果たして自動化できるのでしょうか。
Let's コーディング!!
「SEGA CHALLENGE!! ぷよぷよプログラミング」
ページにソースコードが掲載されたPDFがあります。
とりあえず、全コードを入力することとします。
久しぶりのコーディングで、コーディングミスもあり、
動くまで手動で実行しては、修正を繰り返しました。
(まだ、コーディングミスがあるような・・・???)
サーバに配置する
Autify で自動テストするために、 サーバに配置する必要があります。
Salesforce に移植します!!
(なぜ「Salesforceなのか」・・・ 興味本位とロマンです(謎))
Lightning のホームページにも配置してみました。これで、いつでも遊べる。
仕様を確認しましょう
軽く仕様を確認しましょう。
1. ぷよ落下
2. キーボード:下キーで落下速度が上がる
3. ぷよが積み上がる
4. 画面一番上まで積み上がるとゲームオーバー
- テストケース
- 時間が経過するたびに、ぷよが落下する
- 下キーを押すと落下速度が早くなる
- 接地を判断して、消せるぷよがあれば消す
- 地面(最下層)への接地
- 地面を突き抜けたりしないこと
- 他のぷよとの接地
- ぷよが重なったりしないこと
- 消せる場合、当該ぷよを消す
- 色々な配置パターン(縦4つ、横4つなど)
- 消せない場合、当該ぷよはそのまま
- 地面(最下層)への接地
- ぷよが最上位まで積み上がると、ゲームオーバーになる
(まだまだある)
5. キーボード:左キーを押下で左に移動
- テストケース
- ぷよが左に移動する
- 最も左の場合、左には移動しない
- 画面外に移動しないこと
6. キーボード:右キーを押下で右に移動
- テストケース
- ぷよが右に移動する
- 最も左の場合、右には移動しない
- 画面外に移動しないこと
他にもスコア計算などもありますね。
Autify でシナリオ化してみましょう。
まず「キー操作」のあたりをRecodingできるか、シナリオ化してみます。
ぷよぷよを操作、キーボード左キー・右キーを入力して、移動させます。
録画結果を見てみましょう。
残念ながら、キー入力が録画されていません。
こまりました。 JSステップでなんとかならないでしょうか。
このあたりが参考になりそうです。
document.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft" }));
document.dispatchEvent(new KeyboardEvent("keyup", { key: "ArrowLeft" }));
こんなシナリオになりました。
実行結果
一応、キー操作は動作しており、ぷよが移動していることが、確認できます。
キー操作もかなり 2秒以内と早く、しっかりキャプチャも撮れており、ちゃんと移動していることが
確認できました。
# | 実行結果 | 画面キャプチャ |
---|---|---|
1 | ![]() |
|
2 | ![]() |
|
3 | ![]() |
![]() |
4 | ![]() |
![]() |
5 | ![]() |
![]() |
6 | ![]() |
![]() |
7 | ![]() |
![]() |
8 | ![]() |
![]() |
9 | ![]() |
![]() |
10 | ![]() |
![]() |
11 | ![]() |
![]() |
12 | ![]() |
![]() |
13 | ![]() |
![]() |
画像比較する
過去の実行結果と比較をします。
当然、Autifyサーバの状況やブラウザの状態に依るので、確実に同じにはならないですが
目視で問題ないことを確認できます。
ビデオログで確認する
タイミングが良いことに、2022年11月28日、【ビデオログ】と言う機能がリリースされました。
リリースノート本文
https://help.autify.com/docs/ja/release-notes-november-28th-2022
見てみましょう。
※ブラウザを別のアプリで動画撮影したので、若干速度等は異なります。
アクティブに動作する場合でも、これがあれば、わかりますね。
じゃぁ、どんなシナリオにすれば良いのかな?
(拙い絵ですみません汗)
ぷよは4つ連結することで消えますが、
これを自動化するのがなかなか難しいです。
絵では、2つの例を記載していますが、
4つ連結されるパターンが多いです。
自動化シナリオを考えたとき
そのパターンになるように移動させ、積み上げる必要があります。
ただ
・降ってくるぷよのパターンはランダム
・前述の通り、キーを押下して移動、放すことで移動が止まる (移動の距離が実行毎に異なってしまうことが考えられる)
・ぷよの落ちる位置が固定化されている
ことから、シナリオどおりにならない可能性が高いです。
そのため、このような「テストモード」を作成することにしました。
- 内部の情報を表示する機能
- 一時停止機能(Enterで一時停止・一時停止解除する機能)
- 内部で保持しているぷよの配置状態を編集できる機能
- 降ってくるぷよのパターンの固定化
1 | 2 |
---|---|
![]() |
・内部で保持しているフレーム値、動作しているモード、一時停止状態の確認 |
![]() |
・ぷよの配置情報の表示 |
![]() |
・ぷよの配置の編集 |
▼「ぷよの配置の編集」で任意のぷよ番号を指定して「Submit」ボタンクリックで、任意のぷよ配置を表現できます。
シナリオを作ってみましょう
実行結果
ぷよが消えるテスト。
ぷよを編集できるようにしたので、配置パターンでのテストができるようになりました。
# | 実行結果 | 画面キャプチャ |
---|---|---|
1 | ![]() |
|
2 | ![]() |
|
3 | ![]() |
|
4〜9 | ![]() |
▼4.の結果 ![]() |
10 | ![]() |
▼しっかりプルダウン設定されてます ![]() |
11 | ![]() |
▼ぷよが設定されました ![]() |
12 | ![]() |
▼上にちょこっとぷよが落ちてきてます ![]() |
13 | ![]() |
![]() |
14 | ![]() |
![]() |
15 | ![]() |
▼ちゃんと消えていることと、全消しが出てることを確認 ![]() |
16 | ![]() |
![]() |
17 | ![]() |
![]() |
ビデオログで確認する
言いたかったこと
-
ゲームのような随時動作するアプリでもAutifyの自動テストをすることができる。
-
ただ、デバッグモードのような機能を用意しないと実現できない場合がある。
-
当然、デバッグモードはリリースできない。自動テストの扱いは、あくまでも機能テストの一部。
- 裏手の機能に係るテストは、自動で。本番のテストは、手動で、と言った使い分けをしても良いかも。
-
自動テストを将来行う、という計画の際は、アプリケーション設計時から自動化テストについて考慮するべき。
-
またそれに係る工数も用意すべき。
最後に
長文になってしまい、申し訳ありません。
最後まで閲覧いただき、ありがとうございました。