T-DASHで簡単なテストケースを作成し、実施結果「失敗」から「成功」に出来るまで（初心者向け）

## はじめに
こんにちは。一升餅と申します。

今回の記事では、こちらのテスト自動化の練習用のテスト対象サイト「HOTEL PLANISPHERE」を使わせて頂き、ログインから宿泊の予約を行うテストケースを作成していきたいと思います。

https://hotel-example-site.takeyaqa.dev/ja/index.html

このサイトはいろいろな機能があって、本当にありがたいです。

私のT-DASHの使用状況について簡単に説明です。
T-DASHを使い慣れているわけではありませんが、既に一度テストケースの作成までは行っています。
前回触ってから間が空いてしまったので、復習がてら簡単なテストケースを作成したいという気持ちです。

なので既にT-DASHを使っている方は、この記事を読んでもあまり得るものはないかもしれません。
まだ一度もT-DASHを使ったことのない人に、テストケース作成までの流れを説明するように記事を書いていきたいと考えています。
インストールまでは行えている前提の内容になるので、まだお済みでない方はこちらの公式記事を見ながら進めて頂きたいです。
https://service.valtes.co.jp/t-dash/function/tutorial/tdash_forbeginners001




## 手順
### テストケース完成まで
まずは、このサイトで使うプロジェクトの作成を行います。プロジェクトとはフォルダのようなもので、その中にテストケースなどが入ります。テスト対象ごとに作成するのが一般的な使い方なのかなと思います。

T-DASHを立ち上げた時に遷移するこの画面で、画面右上の「プロジェクトを作成」ボタンから新規プロジェクトを作成します。
（既に他のプロジェクトを開いている場合、ヘッダーの「プロジェクト一覧へ」を押下することでこの画面に遷移できます）
![image - 2024-12-30T230318.482.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/d6d92a3a-4fa6-f4ed-338c-b74951e1b7c4.png)


続いてプロジェクトを押下したら、左メニューから画面定義を行います。
画面定義とは、WEBサイトにはこういう画面があり、こういう要素がありますよ、という事をT-DASHに理解してもらうための工程です。
各画面ごとに、URLと、要素名（とそのXpath）を指定していく流れになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/2df4ad01-b5cd-8879-de92-45ea43cf2fc2.png)
今回遷移する画面はこの6つだと思います。画面名は適当に設定しちゃいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/24986522-f1e4-9ae9-4a64-dbce05db84f8.png)

足りなければあとで追加します。

次に画面名を選択し、URLに該当のWEBサイトのページのURLをコピペします。
その後、画面キャプチャを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/714ccc86-beb7-b39f-b1f2-30df1715ea32.png)

T-DASHにはキャプチャツールがあり、ツール上で対象のWEBサイトを開くことで、XPathを探しやすくなっています。
ただし全て自動で行ってくれるわけではなく、要素名の指定は手動で入力が必要です。
例えば「氏名」と手動で入力すると、それに関連するXPathを自動で取得してくれます。
完璧ではないので、上手く取得出来なかった場合は手動でのXPath取得が必要なこともあります。

こちらのキャプチャツールの使い方についてのリンクを確認しながら進めます

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

開いたキャプチャツールで要素名を手動で入力、完了したら「パス取得実行」ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/6ed3952f-5d05-166b-44d1-21589424c58e.png)

「パスチェック」ボタンを押下し、OKなら画面上に1つのXpathが取得できています。無事取得出来たようです、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/926f6311-aa75-bf40-9428-b8523eedbbe8.png)


チュートリアルの記載を見ながら進めていますが、この手順で詰まりました
>(手動でも値を確認しよう)
1.取得済みの値のセルをクリックすると、左エリアの該当する要素が黄色でハイライトされる
2.要素名と値が一致していることを確認できる

引用元：https://service.valtes.co.jp/t-dash/function/tutorial/screendefinition_vol_005
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/29fdc4ec-1c74-e336-be6b-39a4c0641d7c.png)

画像では黒い帯の位置にある「会員登録」を指定しているつもりですが、サイトのロゴの上あたりがハイライト表示されています。
公式のチュートリアルに以下のような記載がありました。
>※ 想定とは異なる場所が黄色にハイライトしている場合には、トラッキングによるパス取得を実施する。ハイライトの位置がサイトの作りによってズレる場合もあるので、どうしても異なる場合は一度テスト実施してみてください

引用元：https://service.valtes.co.jp/t-dash/function/tutorial/screendefinition_vol_005

トラッキングで該当のボタンにマウスカーソルを合わせた画像です。
![waku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/0076404c-52a2-1744-f190-875ee4688c6c.png)
赤枠が「トラッキング」で自動入力された値。青枠は「パス取得実行」で自動入力された値です。XPathが違いますね。
どちらが正しいかわからず、ハイライトがズレているだけかもしれないので一旦青枠の、自動で取得した値のまま進めます

他にも要素はありますが、今回のテスト実施のためにはこれで十分だと思うので「保存」ボタンを押下。
するとT-DASHの画面で、要素名と値が保存されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/3eaa1eed-5189-f131-434a-03075d5262c1.png)

これを各画面で、繰り返し行います。

ログインしないと遷移できないマイページ画面は、キャプチャツール内でログインしてからパス取得を行いました。
チェックアウト画面も同様に進めます。

これで全ての画面の必要な要素を取得できたので、テストケースの作成を進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/87fcbec0-25c9-7212-2862-ee191a2c8698.png)

左の画面の「テストスイート」から、テストスイートを作成します。
テストスイートとは、「特定のテストサイクルで実行されるテストケースやテスト手順のセット」です。
どのように分類すれば良いかまだ理解できていないので、仮置きで「基本操作」という名前にしてみます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/fe08d5c6-31b8-bb3b-10c0-6a3211ef1cc2.png)

テストスイートが出来たので、その中にテストケースを作っていきます。
この名づけ方も適切かわかりませんが、「ログインから宿泊予約」としました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/e99aa6ea-3523-e198-1813-cf5758ef6bdb.png)

画面左から「要素をクリックする」などの手順と、対象の画面や要素を選んでいくだけで、簡単にテストケースを作ることが出来ます。
更に、T-DASHキーワード手順という形で、操作内容を表した文章が自動で作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/f0a758f4-4cd9-79cb-1b9d-ab4b15d0d14a.png)

このテストケースの作りやすさ・メンテナンスのしやすさと、可読性の高さはT-DASHの魅力だと思います。
クリック回数が多いのでもしかすると面倒に感じる人もいるかもしれませんが自分は好きです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/08724ee8-9744-4003-d461-02df00b9f13d.png)
こんな感じで書き終えたので、保存して動かしていきます


### テストケース作成後のテスト実施・調整
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/ddf5e14c-a9f5-3e16-07e1-7784e809b562.png)
画面右上の選択したテストを実行するを押下すると、新しくブラウザが立ち上がり、自動で操作が行われて行きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/8e3c39da-7260-1738-ce4c-b950b61621da.png)

初回は失敗してしまいました。原因を見ていきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/d2dac2d9-6996-70f5-b355-662c087483cf.png)

どうやら、画面遷移が上手くいかなかったようです。
この画面遷移は別タブで開くので、工夫する必要がありそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/e22f8404-c2a0-35e3-fddd-83025a34f638.png)

選択できる手順に、「最新のウィンドウに切り替える」という項目があったのでこれを試してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/4ed99082-9a17-4ad8-f63a-08d6e41c8620.png)

先ほどの別タブ切り替えは成功したようです。
今度のエラーはテストケースのミスですね、別画面の要素を指定してしまっていました。
他にも入力する値が適切でなかった項目を修正します


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/1ac9124e-654b-3187-2100-337120d4f27a.png)

ミスを修正したところ、今度は長いエラーが出ました。
要素の指定が上手くいっていないかもしれないので見直します
XPathを変えてもダメでした、chatGPTに聞いてみます

どうやらクリックしようとしたのに、他のものにさえぎられてクリック出来なかったようです。
選択できる手順に「要素を強制クリックする」というものがあったのでこれを選択してみます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/25523b10-2065-d686-b5ba-69b6b577101d.png)

長いエラーは消えました！うまくいったみたいです
今度はプルダウンリストの選択が上手くいかないとのこと


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/7559b94f-78af-ddcc-92da-d5ea818efa51.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/cb727478-04be-292f-1346-74b7b2aa9959.png)

ソースを見ると、希望しないのvalueには"no"と入っているようです。
「希望しない」から「no」を選択するように変更。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/35eec8af-c0fa-a966-4c52-331a9543e15e.png)

プルダウンは選択できました。
次は要素の指定に問題があるのかな。あと見落としていましたが宿泊日の項目には入力可能な範囲が定められていたので、入力値を入れるのをやめてみます。（現在日から3ヶ月以内）
代わりに、デフォルトで実施日の翌日の値が入っているのでそれを取得するように変更

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/3b2e89d0-7213-0a5c-5669-aa9dc1f02290.png)

ついに成功しました…！！！良かった…
ただ、テキストを取得するを選択しましたがテスト結果には反映されないんですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3968149/18c99f90-eff0-2d3b-67d5-5ff16c0c5443.png)
このように取得した値を入力したり保存したりする向けの機能なのかもしれません。
このあたりは後日もっと触ってみたいです。

### おわりに
予想していなかったエラーが沢山でてきて思ったより大変でした。
動作を確認する目的で作ったので、必要最低限の動作のみの手順しか今回のテストケースには入れていません。
実際にテストをする時は、テストの目的に合わせてテストケースを調整していきたいです。
使えていない機能が沢山あるので、理解を進めていきたいです。

T-DASHは30日の無料期間があり、月額料金もお手頃です。
コードが書けない自分でも問題なく使えるので、興味のある方は一度触ってみてはいかがでしょうか。

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

記事を書き慣れていないので、読みにくい部分が多々あったかと思います。
最後まで読んでいただきありがとうございました。