動機
現場ではまだまだ手動でのテストが多いと聞き、手動でのテストをしている人向けに自動テストに慣れてもらいたいと思い、自動テストコードを GUI で生成して、それを AWS上で実行できるアプリを作りました。
巷で売られている自動化ツールの簡易版みたいなもんです（Webページの画像から Xpath などを指定できない、とか）。
成果物
公開している URL は、
https://master.d28diowzfkuhqr.amplifyapp.com
になりますが、現在は使えません（サーバー代節約のため）。
公開しているコードは、
にあります。
GUI について
GUI で操作とは言っても、Xpath や If文・While文 くらいの基本的な IT知識は必要になります。
基本的な GUI は下のようになっています。
右側のパネル で サイト名入力・命令の入力・テスト結果の表示・左側のパネルで 命令を入力します。
命令は、「変数作成・If文・While文・変数代入・クリック・文字入力・結果チェック」の７種類あります。
それぞれを説明すると、
1. 変数作成
後の「変数代入」「結果チェック」「文字入力」で使う変数を定義します。
2. If文
条件に合っていた場合は、If文内で定義した「変数代入」「クリック」「文字入力」を実行します。条件式では、特定の文字列が上記の変数と「同じ」か「違う」か「含まれる」かを判定します。
3. While文
特定の「変数代入」「クリック」「文字入力」を定義し、それを何回か実行できるようにします。
4. 変数代入
現在のページから、Xpath を取得して その内容を変数に代入します。Xpath が取得されなかった場合は、空の文字列を代入します。
5. クリック
現在のページから、Xpath を取得して その要素をクリックします。要素が存在しない場合は、次以降の命令はスキップされ、全体でエラーが返ってきます。また、クリック後は DOM の描画があるので 2秒待つようにしています。
6. 文字入力
現在のページから、Xpath を取得して その要素に変数か値を送ります。入力欄に入力する時などに使います。
7. 結果チェック
ある変数が、特定の文字列と「同じ」か「違う」か「含まれている」かを判定します。この判定の結果は、API のレスポンスに入ります。結果チェックは、全体のフローを通して１回しか呼び出せません。
のようになっています。
これらの命令を組み合わせて、Selenium によるスクレイピングを行って行きます。
これらのフロントエンドは、React で作られています。Redux などは使わず Hooks で状態管理しています。
API バックエンド
この GUI の情報は、JSON で AWS lambda に流れて、AWS lambda 内で python の selenium コードに変換され、実行されます。lambda内では最低限のセキュリティは施されていますが、変数定義の時に予約語や数字を入力された場合に、それを変更する機能などはないため、予約語や数字を入力するとエラーが返ってきます。
もし手短に自分の環境で試したい場合は、flask で作れる環境もあるので、そちらを試してみて下さい（APIコールの URL を localhost:5000にする必要はありますが）。lambda 内のセキュリティは flask より少しだけ強くしていますが、まだ弱いかもしれません。
lambda では、CORS で OPTION を簡単に作れる API GateWay の HTTPAPI を使用してエンドポイントを作っていて、データは S3 に保存されています。
JSONによる保存・ロード、CSV保存
JSON でテストケースを保存・ロードしたり、テスト結果を CSV で保存できたりする機能もあります。
今後について
一通り機能が出来たので、公開してみたが、デザインも微妙だし、欲しい機能などもあったら教えて下さい。
あまり関係ありませんが、作っている時にちょうど テスト自動化のプロジェクト を見つけたが、みんな考えていることは同じだなと思いました。