Playwrightのスクリーンショットパスをメモ帳に自動保存する、Windowsアプリ自動化の活用術

# はじめに

2回目の投稿です。思いのほか早く仕上がったので記事を投稿することにしました。

前回の振り返り
* Playwrightを使って自動テストを実現した
* 標準のレポートにスクショが貼れなかった

今回、私は最近リリースされた **Windowsアプリの自動化機能** を使って、Playwrightで生成されたスクリーンショットのパスをメモ帳に保存するという実装に挑戦しました。確かに、テキストファイルに単純に出力するだけであれば、この新機能を使う必要はないかもしれません。しかし、新機能の使用感を理解し、その可能性を探るために、あえて実際に試してみました。

当初の計画では、コマンドライン実行機能を活用してCIツールと連携することを考えていました。しかし、この機能がWebアプリにのみ対応しているため、惜しくもその計画は実現できませんでした。

![0-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/ed25eefa-deb2-e63c-98dc-3d8b6d57193c.png)


## 実現するシナリオ

1. Playwrightを使って、「HOTEL PLANISPHERE」の宿泊予約のテスト
2. メモ帳を起動して、1のテストで撮影したスクリーンショットのパスを保存する

Webアプリのテストを実行し、続けてWindowsアプリの操作を行うシナリオを作っていきます。
このプロセスは以下のように構成されます：

**Webアプリのテスト:**

* Playwrightブラウザを開始し、特定のWebアプリにアクセス。
* アプリの機能を順にテスト。
* エビデンスを撮る
* 機能が期待通りに動作するかを確認する。

**Windowsアプリの操作:**

* Webアプリのテストが完了したら、Windowsアプリを開始。
* 特定のタスクを実行するためのアプリ内の操作を行う。これには、ファイルの開閉、データの編集、設定の変更などが含まれる。
* アプリの動作を監視し、不具合や改善点があれば記録する。

このシナリオでは、WebアプリとWindowsアプリの両方での操作の流れと機能テストに重点を置いています。




# 実現方法について

## 0. プロジェクトの準備

プロジェクトを作成します。


![0-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/3df461d1-affb-5efd-7129-7ef5457ea1bc.png)


①～④まで順に操作します。

| フィールド | 入力する値 |
| --- | --- |
| キー | winapp |
| プロジェクト名 | Playwrightで自動化してみた＋メモ帳 |
| 対象アプリ名 | メモ帳 |
| 対象アプリexeパス | `%windir%\system32\notepad.exe` |


![0-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/db2b5f8f-1726-a44a-2626-36505933dbbe.png)


作成したプロジェクトを押下します。

![0-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/7f7fa0a4-c378-0230-b49a-ea4a4f625389.png)


テストスイート、テストスイートを作成すの順に押下します。

![0-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/201eec26-8641-3aa2-19bf-6aee41395ed8.png)


| フィールド | 入力する値 |
| --- | --- |
| テストスイート名 | Web＋Windowsアプリの自動化 |


## 1. Playwrightを使って、「HOTEL PLANISPHERE」の宿泊予約のテスト

https://qiita.com/c615jpn/items/39cda785019d867b47f9

こちらと同じですので、割愛します。

:::note
差分は、以下のテストスイート名とテストケース名のみです。
![1-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/dec4c63e-a513-d2be-e86a-13945946faeb.png)

| 項目 | BEFORE | AFTER |
| --- | --- | --- |
| テストスイート名 | ホテル予約サイトのテスト | Web+Windowsアプリの自動化 |
| テストケース名 | 予約金額の確認 | Playwrightでテスト |


:::

## 2. メモ帳を起動して、1のテストで撮影したスクリーンショットのパスを保存する

![2-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/45fec505-1ceb-9390-5ea7-be28375cf4ab.png)


| フィールド | 入力する値 |
| --- | --- |
| テストケース名 | メモ帳にエビデンスのパスを出力 |

![2-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/dbb56f1f-1ed2-9ec8-bb4e-9e022eb0fd8f.png)

作成したテストケースを押下します。

![2-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/8cfba1d1-957a-97bc-3276-3e6bce0bed9a.png)

テスト手順を作成します。

| 動作 | 画面名（設定値1） | 要素名（設定値2） | 設定値（設定値3） |
| --- | --- | --- | --- |
| Windowsアプリを起動する |  |  |  |
| 要素をクリックする | notepad | 編集エリア |  |
| 文字列を入力する | notepad | 編集エリア | `${OUTPUT_DIR}${/}advent.png` |
| キーを入力する | notepad | 編集エリア | CTRL+SHIFT+S |
| 要素をクリックする | notepad | ファイル名 |  |
| 全選択し削除する | notepad | ファイル名 |  |
| 文字列を入力する | notepad | ファイル名 | `C:${/}temp${/}${TEST_NAME}` |
| 要素をクリックする | notepad | 保存 |  |

テスト手順を作成したら、「保存する」を押下します。

![2-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/48cf83ec-6e3f-61f8-f2b0-ee3bbeddb44c.png)

画面定義の「notepad」の各要素に値を設定します。
「画面定義」「notepad」「T-DASH WinTool起動」の順で押下します。

### WinToolで値を取得する


![3-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/2757583e-ecd4-0bd7-ae87-010cbbf5704f.png)

「トラッキング」「アプリ起動」の順で押下すると『メモ帳』が起動します。

![3-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/fff567a0-c405-4e03-e315-83e56d48d8db.png)

メモ帳の入力エリアにマウスカーソルを移動し、CTRLキーを長押しすると、対象アプリウィンドウ構成ツリー以下に値が設定されます。
要素XPathの「コピー」をクリックして、右側のスプレッドシートの「編集エリア」の「値」に貼りつけします。

:::note
AutomationIdが設定されたパスが取れた場合は、以下のように変更したほうが安定する気がします。
//Document[@AutomationId="15"]
※ 取得するパスはWindowから指定されているので、見つからない可能性も出てくるかと思います。
:::

![3-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/bfd7ccaa-06eb-e79a-00af-f7946c6ec883.png)

メモ帳でCTRL+Sキーを押下し、名前を付けて保存ウィンドウを表示します。

![3-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/adef4af8-8c89-0685-5eed-b9716af8b40c.png)

編集エリアと同様に、「ファイル名」の値をコピーして貼り付けします。

![3-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/d9087efd-e312-2a62-24b7-9ba07a1bf2ba.png)

編集エリアと同様に、「保存」の値をコピーして貼り付けします。

![3-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/545fe447-4d8a-6edb-710f-539c2ac2ced1.png)

最終的にこのように値を編集しました。保存をクリックし、トラッキングツールを閉じます。


:::note warn
Windowsアプリのトラッキング機能ができるのは凄いと思いました。
ただ、CTRL長押しは反応しているのかしていないのかがよくわからず、使い勝手はいいとは言えないと思います。
必要なことはできるので、今後のアップデートを期待したいと思います。

※私は、Windowsアプリのパスを取得するのに「Accessibility Insights for Windows - Inspect - Live」のアプリを利用します。パスを取得したい要素の属性が表示されますので、自身でパスを生成します。（今回もトラッキングツールの結果があっているかどうかの確認で、このアプリを使いました。結果は、すべて正解だったので無駄足ではあったのですが。）
:::

# 作成したテストを実行する

![4-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/98aa0640-829b-e161-b686-11425fc5fa92.png)

「テストスイート」「選択したテストを実行する」の順で押下します。

![4-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/5e158311-56d7-d236-356f-4d6f6b476445.png)

少し待つと、実行が完了します。

![4-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/79f6753a-5dae-401c-c64e-29b520ca8845.png)

指定したフォルダにファイルが出力されます。今回は上書き処理を作っていないため、２回目以降のテストは失敗します。

![4-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/beb2ee8e-340b-9477-82cb-f69fc38da1df.png)

ファイルにはエビデンスのパスが書かれています。

![4-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3641355/2bafa27f-efa8-a6b8-706d-8632d4021765.png)


パスも正しいもので間違いありません。


# 今回試せなかった、実装しなかったこと

* ファイル名に日時を追加するなどしてユニークにする。
* CIツールとの連携（T-DASHは、Windowsアプリの自動化には非対応のようです。）


# 総評

最近リリースされたWindowsアプリの自動化機能を使用してみたところ、やはり標準機能としてのサポートは大きな安心感があります。この機能により、カスタム動作を作成する必要がなくなり、テストプロセスがよりスムーズになることが期待されます。
しかしながら、トラッキングツールの操作についてはいくつかの改善の余地があるかと思います。特に、操作の導線が直感的でなく、どの要素のパスを取得したのかの判断が対象要素の画像を見る必要があります。
トラッキングツールの画面の隅々まで見て初めて正しいものではないかと判断できる印象でした。ただ、機能としては申し分なく必要な機能はほぼ搭載されているので、後は「誰でも使えて簡単」を実現するようにもっとシンプルになると良いと感じました。


## （１）良いと思った点

* Windowsアプリの自動テストが標準サポート
  * サポートしているフレームワークは決まっているようなので、そこだけ注意が必要そう。Swingのサンプルアプリは動作しませんでした。
* 使いやすさ
  * トラッキングツールの使い方には慣れが必要に感じました。
* 低価格
  * この価格帯でWindowsアプリも標準サポートは凄いと思います。
* マニュアルが豊富
  * 公式ページのマニュアルをみれば、使い方がわからないということはない。

## （２）改善の余地ありと思った点

* テストが失敗したら、残りのケースを実行するか、そこで辞めるかの設定がほしい
  * この記事で作ったケースで言うと、「Playwright」のテストケースで失敗したら、そのあとのテストケースは実行したくない。
  * 特にデータドリブンでは、この設定は必要ではないかと思います。（前回も書きましたが、Teardownが使えればどうにでもなりそうです）
* Windowsアプリのトラッキングツールの操作性の改善と取得した要素がどこにあるかわかるようにしてほしい
  * 操作のためのマウス移動に課題があると思います。上下左右に頻繁に動かす必要がありました。
  * CTRLキーの長押しは、いつまで押していたらいいかが判断つかない。（失敗しているかどうかに気づけない）
  * 取得要素のハイライトは必要かと思います。ファイルメニューの中にある「名前を付けて保存」などのメニューアイテムのパスがとれないのには、しばらく気づきませんでした。
* テスト実行したときにT-DASH（ブラウザ）がフロントに出ていると自動テストが失敗するので改善してほしい
  * テスト実行ボタンをクリックすると、「WIN＋D」のデスクトップを表示するなどが動けば失敗は減りそうです。
  * Setupが使えれば最初に実行しても良いかなとは思います。


# おわりに

わずか3,960円でこれほどのことができるとは驚きです！このアドベントカレンダーの期間中にWindowsアプリが自動化できるようになるとは思ってもいませんでした。このツールを使用して、自動化ツールの可能性を実感しました。多くの場合、自動化したい動作を実現できないためにテスト自動化ツールの導入を諦めがちですが、T-DASHにおいてはそうではないと感じました。ツールは日々進化しており、その進化に期待しつつ、今後も自動化のさらなる可能性を探求していきたいと思います。

# 参考サイト

## （１）公式サイト

このマニュアルをみるとほぼ使えるようになりました。
前回も思いましたが、必要なものを見つけることができればマニュアルは充実しています。

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

* [T-DASHでWindowsアプリのテスト自動化をしよう](https://service.valtes.co.jp/t-dash/function/tutorial/windowsapp_vol_001)
* [【画面定義】Windowsアプリのキャプチャツールを使用しよう](https://service.valtes.co.jp/t-dash/function/tutorial/windowsapp_vol_003)

## （２）その他

Accesibility Insight

* https://accessibilityinsights.io/