T-DASHテスト作成RTA

## 記事概要
T-DASHのことを全く知らない状態からテストをとりあえず一つ書くまでにどんなステップがあって、どのくらい時間がかかったかの記事です。
本記事は[テスト自動化ツールT-DASHの活用方法や事例を記事にしよう！ by T-DASH Advent Calendar 2022](https://qiita.com/advent-calendar/2022/t-dash02)の記事です。

※RTAとか言ってますが、厳密に時間を図ったわけではなく、だいたいの参考値だとお考えください。
※割と率直な意見を書きますがご容赦ください…！

## この記事の目的
T-DASHを自分のプロダクトへ導入できるかどうかのイメージをするための材料とする。

## ゴール
簡単なログイン画面で正常系と異常系のテストを一つずつかけるまで、とします。

## RTA部分
### トライアル申し込み＆ソフトウェアダウンロード（10分）
下記リンクより申し込みます。
https://service.valtes.co.jp/t-dash/request
ここで問題が一つ発生…！
私は一個人としてT-DASHを使いたいが、法人前提の申し込みだ！！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/0b1add84-4e28-251e-c6e8-c31025d22102.png)
が、たまたま最近個人事業主として開業届を提出していたので、その名義で提出することで難を逃れました。
（これアウトだったら本当にごめんなさい）
何故か会員情報入力後の送信ボタンを押下しても先に進まない事象※が発生しました。
何回かやり直すとうまくいきました
会員登録を無事済ませ、ソフトウェアをダウンロードします。
ダウンロードボタンを押しても404のページが開かれる※ので、ダウンロードページリンクをメールで送信してダウンロードしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/33d07436-bb2a-f61d-812a-bd363f010d1e.png)
※私はSidekickというchronium系のBrowserを使っているので、変な動作しているのは多分そのせいですごめんなさい。

### インストール&セットアップ（5分）
ダウンロードしたzipファイルを解答し、２つのソフトウェアをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/383644ab-8b53-bd9d-b400-253fad696658.png)
`t-dash_2.0.05_mac.dmg`はテスト用アプリケーションです。
`tdashcap-1.2.0.dmg`はxpath取得ツールです。
xpathの取得ツールがついてくるのは嬉しいですね。
非エンジニアでもテストを作るのが容易です。

両方をインストール後、起動します。
t-dashの方は初期設定で、pythoｎ3のpath指定が必要なようです。
macの場合finderが開かれますが、`cmd+shift+.`で隠しファイルを表示するのを忘れずに。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/dadefcc1-df1e-cefd-8361-1295b7a17c08.png)

### ドキュメントを軽く読んでみる（5分）
公式サイト上に、t-dashのチュートリアルが乗っています。
これを見ながらテスト作成するのが早そうなのでまずはさっと目を通します。
https://service.valtes.co.jp/t-dash/function

### プロジェクト作成（1分）
適当に名前をつけて、プロジェクトを作成します。
ローカルに保存されるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/2deef0d1-bf20-847a-ecd9-81bf6345ace2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/a19a8713-2f05-dd1f-1f04-2c4a8ad8dae2.png)

### テストケース・テストシナリオの作成（１分）
次にテストケースとテストシナリオを作成します。
操作は直感的なので迷うことはなさそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/f6602092-0122-e18e-01c4-c823a189ddb9.png)

### 画面定義（７分）
画面を操作するテストを自動化するので、画面の要素など指定する必要があります。
まずはカテゴリ（フォルダみたいなもの）と画面定義を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/b61439fc-be04-082c-8444-5c17877af136.png)
テストしたい画面のURLを入力して、画面キャプチャを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/682e7b09-0f94-653a-e0ff-2fc1d86e23cc.png)
tdashcapが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/ec3dfb62-629a-0d87-26a0-403ce6fe91fc.png)

テストシナリオ内で使いそうな要素を一通り、t-dash内のスプレッドシートにリストアップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/d37cac2c-4f72-433b-cb31-c3fcd3e9aaea.png)

トラッキングマウスオーバーでトラッキング開始するをクリックします。
リストアップした要素を順番にクリックして、XPathFullのパスをコピー、t-dashのスプレッドシートにコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/c9f445fc-fddb-b22c-e6c8-c6252e5ff6da.png)
こんな感じで全部の要素を埋め終わればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/dfdf6104-5f59-3b10-6452-53c9b4a13a63.png)

ログイン成功時の画面も画面定義しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/4db66f2a-8f0c-c980-763a-af3ceb40ad08.png)

設定と操作が簡単なのでサクッと出来ました。
（余談ですがappiumで同じことやろうと思った時に、作業始めるまでに３時間くらいかかったことを覚えています。）

### テストシナリオを書く（正常系）（18分）
先程作成したテストシナリオの中身を書いていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/0d77af83-379a-8aea-bca6-760ab78c95ec.png)
まずは正常系からです。


```　テストケース(正常系).md
1. `id`を入力
2. `password`を入力
3. `login`ボタンを押下
4. ログイン成功画面に遷移していることをURLから確認
5. ログイン成功画面に遷移していることを画面内の要素から確認
6. ログイン成功画面に遷移していることを画像比較で確認
```

画面の左のサイドバーから色々な操作が選べます。
テストケースの作成をしたことがある人なら、すんなり書けると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/242c4a4c-3790-0f64-0b05-d2f27fb5f530.png)
まずは画面を開くところです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/f8770ad9-6caf-f933-d9ab-2d9bfae8e369.png)

ここでちょっと詰まったのが、設定値（黄色のセル）の入力ですね。
フリーテキストで入力できるんですが、さっき折角入力した画面定義した値は選べないのか…？となりました。
（プルダウンで出てくると思っていた）
が、ちゃんと左側の下部にありました…ｗ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/5fccd5ec-78d3-5731-faec-43de056c6520.png)

こんな感じで基本的には画面左側のサイドバーをポチポチするしたり、設定値３を入力するだけでテストがかけます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/8793d6fa-dc3f-4449-375e-f0125802b2a4.png)
※なぜかスプレッドシートの部分が滅茶苦茶ぼやけるようになりました…？

<details><summary>画像比較について</summary>

画像比較もちゃんと出来ます。
画像比較の方法については[こちら](https://service.valtes.co.jp/t-dash/function/tutorial/%E7%94%BB%E5%83%8F%E6%AF%94%E8%BC%83%E6%A4%9C%E8%A8%BC%E3%82%92%E3%81%97%E3%82%88%E3%81%86)から!
※個人的には画像を自分で保存するのではなく、tdashcapを利用して画面定義みたいな感じで要素として定義できると嬉しいと思いました。

</details>

ここはチュートリアル読みながらやったので流石にちょっと手間取りました。
スプレッドシートに書く形式なので、テスト書きなれている人ならもっと早いかも…？


### テストケース試運転＆手直し（3分）
とりあえずテストを動かしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/f8afd103-176f-eac4-e85c-0dd65511eba5.png)

こんな感じで結果が出ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/758cfba9-0d15-bef7-5498-5a151df174f7.png)

レポートの詳細はこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/e57229bf-fec1-779f-3d40-171526c3348b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/55fe26d7-25c8-130f-bab3-aa65997fdc38.png)
フィルターとかもついてて見やすいです。
比較用画像のパスが間違っていたみたいなのでテストケースを手直しします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/2890ea37-da12-c17d-7473-3d0c88d7dce3.png)

今度は成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/b2c26dec-dcf5-cc96-8ec4-750c9b2996cc.png)
レポートもバッチリです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/7ed53ff7-6a0b-50fc-8991-e11f47de581a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/2c71e822-9199-6832-4d9f-8d859b4ddf42.png)

### 動作セット（寄り道：時間無計上）（参照値：5分）
動作セットといって、特定のテストケースをテンプレート化する、みたいな機能があります。
こうして範囲選択をして、動作セットを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/459b50b8-fd88-8d63-3f8e-6b5a87331ba5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/56a18481-3342-81cb-eb2e-91bc7a22291e.png)

これだけで他で使いまわせます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/09a3b2d1-38f4-e1f0-8b0d-aa7910cdb5b5.png)
ログインなど複数のテストケースで使う動作はこれを使うととても便利そうですね。

### テストシナリオを書く（異常系）（3分）
今度は異常系です。
```　テストケース(異常系).md
1. `id`を入力
2. `password`を入力（誤った値）
3. `login`ボタンを押下
4. ログイン失敗のエラーメッセージが出ていることををURLから確
5. ログイン失敗のエラーメッセージが出ていることを画面内の要素から確認
6. ログイン成功画面に遷移していることを画像比較で確認
```

ここで気づきましたが、出来上がった正常系のテストケースコピーしたほうが早いですね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/20c45016-8071-4895-f925-8fb0239ba265.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/55b7781b-f2d7-0ba1-d138-72ce54076051.png)

スプレッドシートのセルを４箇所書き換える＆画面キャプチャを一つ保存するだけで完成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/1c9388f8-0398-1a10-158a-ffed97ed9f27.png)

動作セットもあるので、テストを書けば書くほどどんどん一本あたりにかかる時間は短くなっていく気がします。

## テストケース試運転＆手直し（5分）
テストケースを実行します。
すんなり行くかと思いきやなにかのエラーがでました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/bb1414d6-db73-dd5f-a15f-b486ee14e1db.png)

```
error: OpenCV(4.6.0) /Users/runner/work/opencv-python/opencv-python/opencv/modules/core/src/matrix.cpp:246: error: (-215:Assertion failed) s >= 0 in function 'setSize'
```
うーん、画像がうまく読み込めない感じのエラーっぽいですね。
mvコマンドで横着したのが良くなかったのか、比較用画像が滅茶苦茶小さくなってます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/d02a7588-4f78-8498-8ed7-3bba7c264280.png)
比較用画像を取り直してもう一回テスト実行します。

今度はバッチリ成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/bd91230a-7e18-27f4-7f8d-622fb7b52bae.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/e891f9f8-39b8-2c5f-36a1-9e5c97cd8526.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/ebe78475-e24c-a60f-124e-b4f6f2bb4848.png)


### テストプラン作成（１分）
今回はテストシナリオがひとつなので不要といえば不要ですが、テストプランも作ります。
複数のテストシナリオをまとめることができるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/4b8fc973-7f72-c0ae-25d4-08bb977ab3b2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/cf25f04d-cba5-ef23-89f2-8cdbd08cf2b1.png)


### プロジェクトのエクスポート（寄り道：時間無計上）（参照値：２分）
gitとかで管理できるようにエクスポートも試しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/3c43a22c-9c79-fbe3-1c48-77a92ffdb4c8.png)

このsyncというファイルを共有するだけで良いみたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455591/a931741d-4ff2-a830-2b8f-770698453b57.png)


## まとめ
タイムは`58分`でした！！
T-DASHの事を何も知らない状態から、ログインのテストケースを書くまでで１時間程度でできるのは早いですね。
自分がappiumで全く同じようなことをしようとしたときはここまで辿り着くのに５０時間以上かかった記憶があります。
自分が今より未熟だったこと・モバイルアプリであることの２つを考慮してもかなりお手軽にできるな、という印象です。

今回使用したweb　appliaction（もどき）とsyncファイルを置いておきます。
https://github.com/R-Az/test_web_app/tree/t-dash_20221201
多分これとT-DASHのライセンスがあればすぐテストは動かせると思うので是非お試しください！
（何かあればコメント下さい。）

### ポエム（主観100％です）
非エンジニアでもテストケースを書くのが簡単、というのが一番の良い点だと思います。
プロジェクトによりますが、PdMやテストエンジニアがソースコードを書いたことがない人でも安心というのが良いですね。
自動化（E2E）テストは、作成もそうですがメンテナンスが一番大変ですから…。
あとは、CIへの組み込みは機能がほしいですね〜。
[機能一覧](https://service.valtes.co.jp/t-dash/function)を見る限り、CIとの連携機能は現状なさそうです。
自分でCICDへの組み込みはそこそこ労力を使いそうなイメージです。（やろうと思えばできるとは思いますが）
私が昔担当したモバイルアプリのテスト自動化プロジェクトはテストケースが沢山あって、それを１から自動化する案件だったのでT-DASHがあれば相当楽にいいテストが用意できたなぁ…としんみりしました。