T-DASH×コマンドラインでCI/CD実行してみた

# はじめに
Webサイト開発時、コードを変更する度にいちいち表示崩れがないかとか画面遷移が上手くいってるかとか確認するの面倒ですよね😭

そんな手間を省くためのテスト自動化ツールT-DASHに、コマンドライン機能が実装されたみたいなので使ってみました！
![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/310b23e6-0ac1-6c2f-13bb-96b56a067d67.png)

# 概要
テスト時の大まかな流れとしては、以下のような感じです！
![テストフロー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/bd0bf4b4-75cd-6ea2-6a5a-3ebeeb1b3591.png)
テスト実行方法がコマンドラインになったみたい。コマンドラインが使えると汎用性が広がりそう🤔

# 自動化してみたテスト内容
以前、[自分で作成したWebサイト](https://nakashimaakio.github.io/)の画面遷移テストを自動化してみます！
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/32cf4e0f-a446-c029-5e2a-3a0326aff6db.png)

# 導入 ~ テスト実行までの流れ
コマンドラインが使用できるWindows版で説明していきます！
全体の手順としては、

**1. T-DASH申し込み**
**2. T-DASHインストール**
**3. テスト作成**
**4. テスト実行**
**5. テスト結果表示**

となってます。

## 1. T-DASH申し込み
[ここ](https://service.valtes.co.jp/t-dash/request)から申し込みます。30日間の無料トライアルがあります。私も今は無料トライアル中です！

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

## 2. T-DASHインストール
ログインページの左にあるダウンロードボタンをクリックし、Windows版のT-DASHアプリをダウンロードしてインストールします。
![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/c29dc3a3-ba9e-2042-b7b1-b983f144e4cc.png)
インストール後、ライセンス認証が要求されたら左にあるライセンス管理からライセンスキーをコピペします。

## 3. テスト作成
### 3-1.プロジェクト作成
T-DASHを起動し、プロジェクトを作成します。
![スクリーンショット 2023-07-19 195747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/51486493-ac92-b282-b496-b227bf9b7a4c.png)

### 3-2. テスト対象のWebサイトを指定
画面定義から画面を追加するボタンをクリックします。
![スクリーンショット 2023-07-19 201034.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/c8bc6f0e-057b-6715-8437-d84d44f10fa0.png)
追加した画面を選択後、URLを記入&テストしたいボタンを指定し、保存ボタンをクリックします。
![スクリーンショット 2023-07-19 204348.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/b9a596cf-ada7-5f96-2453-888173e27f3b.png)

ボタンの指定方法は、htmlのタグを追う感じで書けばいいみたいです。
この例だと`//html/body/main/div[2]/a[3]`なので、`<html>` `<body>` `<main>`内の、2番目の`<div>`内の、3番目の`<a>`ということになります。
```html
<html>
  <body>
    <main>
      <div>
      </div>
      <div>
        <a>
        </a>
        <a>
        </a>
        <a>
          <!-- ここのボタン -->
        </a>
      </div>
    </main>
  </body>
</html>
```

### 3-2.テスト内容の記述
テストスイート・テストケースを作成します。
![スクリーンショット 2023-07-19 205924.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/07fb7e90-1b72-3e5b-8579-08248daf2cf5.png)

次に、テスト内容を記述します。
![スクリーンショット 2023-07-19 210332.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/8c16ad5d-73dc-c1d8-055d-f16c912f639c.png)
テスト内容としては、
1. 先ほど定義した画面のURLを開く
2. 先ほど定義したQiitaボタンをクリックする
3. Qiitaのページが表示されているか検証する

というシンプルなものになってます。

## 4. テスト実行
コマンドラインを使ったやり方について解説します。

### 4-1. コマンド実行に必要なexeファイルをダウンロード
ログインページからbeta版をダウンロードし、ダウンロードした`tdashbeta.exe`を適当なフォルダに移動させます。
![beta.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/60ef3e5b-2983-0036-1e14-26fc13a65224.png)
`tdashbeta.exe`があるフォルダに移動し、コマンドプロンプトから以下を実行します。
```shell-session
tdashbeta.exe setup
```

### 4-2. テスト実行の事前準備
コマンド実行時に必要なテストランを作成します。
![スクリーンショット 2023-07-19 211751.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/4f0b0553-ed49-74af-096e-620fbcc9ce70.png)
3-2で作成したテストスイートを追加し保存します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/1a75e8db-7430-ed37-6c9f-a45d5081840e.png)

### 4-3. テスト内容をPCに取り込む
4-2で作成したテストランをエクスポート&エクスポートしたフォルダを表示します。
![スクリーンショット 2023-07-19 212626.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/1b701c10-46ae-dcc6-a54b-04076413eaf2.png)

表示された`sync`フォルダを、4-1で作成された以下のフォルダに移動させます。

```
[tdashbeta.exeを配置したフォルダ]\projects\commandlinetestrun
```

### 4-3. テスト実行
コマンドプロンプトでテストを実行させます。テストラン名は4-2で作成したテストランの名称です。

```shell-session
tdashbeta.exe testrun テストラン名
```

## 5. テスト結果表示
以下のhtmlファイルを開くとにテスト結果が表示されます！！
```
[tdashbeta.exeを配置したフォルダ]\projects\commandlinetestrun\reports\コマンドライン実行用プロジェクト_20230719_XXXXXX
```

![スクリーンショット 2023-07-19 215154.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/06e8d7ad-bd09-2b1a-043f-5949b2445db0.png)

テスト結果は全部成功してました😊
![スクリーンショット 2023-07-19 215040.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/0442fa01-8554-e082-e1dd-0a4e467dfc43.png)


# さいごに
テスト自動化ツールを使用すること自体初めてでしたが、比較的簡単に導入することができました！！日本語によるテスト作成&コードを書かずにテスト自動化出来たのは非常に楽でした！
いいね、ストック宜しくお願いします🙇‍♂️🙇‍♂️