[T-DASH] キャプチャ＆リプレイを使って簡単にテスト自動化してみる

# はじめに

T-DASHでは、ここ最近、キャプチャ＆リプレイの対応をした。

https://service.valtes.co.jp/t-dash/function/tutorial/capture_and_replay_vol001

ただ、まだベータ版らしいので、さらなる改善が期待できる。
実際にどんな使用感かを含めて一つのアプリを自動化して、レポートする

https://service.valtes.co.jp/t-dash/

# キャプチャ＆リプレイとは

キャプチャ＆リプレイは、ISTQBで定義している「レコード・アンド・プレイバック」と同等の意味です

https://www.istqb.org/certifications/test-automation-engineer

キャプチャ＆リプレイとは、テスト実行者の操作を記録して、その記録内容がそのままテスト自動化スクリプトになります。
それを再生（実行）して同じ操作を行うことで、テストを自動化する手法です。
直感的に操作でき、初期コストが低いというメリットがあります。
一方、テストスクリプトの保守性が低く、複雑なシナリオには対応しづらいというデメリットも抱えています。

# テスト対象

テスト自動化練習サイトを用いる。

https://hotel.testplanisphere.dev/ja/index.html

こちらで、以下ユーザーでログインできることを確認するテストを作成する

| 項目 | 値 |
|:-----------|:------------|
| メールアドレス       | ichiro@example.com        | 
| パスワード       | password       | 
| 名前 | 山田一郎 |


上記ユーザーでログインする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/faf7c44d-c5c4-7f3b-c0a6-8800977a4c25.png)


# T-DASH

## 1. テストケース作成

まず、テストスイート、テストケース作成します
中身は空っぽです。

## 2. キャプチャ（デバッグ実行）

からっぽのテストケースにある、デバッグ実行をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/3054a934-867d-b211-596f-05f3e71d721d.png)


デバッグ実行モードになるため、
「URLを入力してください」のエリアに「 https://hotel.testplanisphere.dev/ja/index.html 」を入力し、「📷REC」をクリックします


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/9168ca86-e046-1ed7-0c16-a7e3b8deda3b.png)


なお、キャプチャ＆リプレイを初めて使う人にとって、Playwrightのインストールを求められます。
そのため、まずインストールを行ってください

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/098751ab-a74d-515c-d86c-c3f04b7d3747.png)


キャプチャツールが起動します
以下の図のように、上部に「操作」と「ポーズ」があります
「操作」が選ばれているときは、マウスのクリック操作や入力フォームなどへのキーボード入力操作が記録され、T-DASHに操作手順が自動的に出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/76f8afc7-93c1-a8ac-fe01-d8582025ba37.png)


「ログイン」をクリックし、「メールアドレス」「パスワード」にログイン情報を入力し、「ログインボタン」をクリックしたら、以下のようにケースが出来上がりました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/63ebbef5-c73a-7bcb-b25b-250596b51169.png)

尚、「クリック」や「キーボード入力」がメインで、検証処理ができないようだ。
たとえば、ログイン後、「氏名」が「山田一郎」であることを検証したいとき、キャプチャ機能で再現できない。

代替案として（かってに推測）
1. 「山田一郎」をクリックする　→　「ｘｘｘをクリックする」がステップ追加される
2. その手順を選択し、デバッグ編集で操作を「要素をクリックする」から「予想のテキストが一致するか検証する」に変更する。合わせて設定値を「山田一郎」にする

かな。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/0a683242-3969-dde0-3bd7-f550157eb33f.png)



これでテストスクリプトが作成された。
確かに簡単だ！


## 3. テスト実行

テスト実行を単純にする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/ecb26040-df20-a9d2-8f63-bc00871170bb.png)

このように、問題なくテストができていることが確認できました！



# 画面定義

画面定義を見てみよう。
キャプチャで自動的に取得された要素を確認できる

ただ、２点課題があるようだ

- 手動で作成した画面定義は再利用されていない
　手動で作成したテストケース、キャプチャで作成したテストケースで同じ要素、例えば”ログインボタン”があったとして、先に手動で作成したとして、キャプチャでレコーディングしたとき、同じ要素で改めて作成されてしまう

- キャプチャ機能で２回同じテストケースを作成しても、画面定義は再利用されていない
　キャプチャ機能で２回同じ操作を記録すると、画面が２つ作成される。ホームとホーム（１）のように。

このような事象が起きるため、画面定義の保守性が悪くなる！

ISTQBシラバスにも書かれていますが、レコード・アンド・プレイバックはシンプルだが、保守性に課題がある。
そこを念頭に実装しないと、最初作るのは簡単だけど、あとの運用フェーズに地獄になります。

この同様要素が取れるところが、Ｔ－ＤＡＳＨで改善されるといいな


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/cb737302-762e-928b-982a-f9dd6e5da322.png)