Difyでテスト設計のフローを書き起こし、テストケース生成まで試してみた

## はじめに
AIを活用したツールの一つにDifyがあります。今回、Difyのワークフロー機能に注目しました。Difyのワークフロー機能を活用して、テスト設計のフローを書き起こし、テストケース生成まで試してみた流れを簡単にまとめました。

## 今回作成したワークフロー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944846/d8c3a577-23b1-1afe-6b5d-f57a48924c96.png)

### DSL
作成したDSLをGistにアップしました。Difyでインポートすると内容を確認することができます。

[Dify_テスト設計_テストケース生成.yml](https://gist.github.com/RSR-YAMAKOSHI-NOBUHIKO/b417221be8afaa73bd99510d00ba865d)

### テストケース生成までの流れ
今回、Difyのワークフローの中でも「チャットワークフロー」を選択しています。
チャットボットとのやり取りを通してテストケース生成までを行います。

テストケース生成までの大まかな流れです。

1. 仕様と画面キャプチャを入力
1. 入力情報をもとに、画面要素一覧を生成
1. 入力情報をもとに、機能一覧を生成
1. 画面要素一覧、機能一覧をもとに、テスト観点を生成
1. 画面要素一覧、機能一覧、テスト観点をもとに、テストパラメータを生成
1. 画面要素一覧、機能一覧、テスト観点、テストパラメータをもとに、テストケースを生成

## 実際に動かしてみる
### 事前設定
LLM はGeminiを使用しました。Dify上でGeminiのAPI設定が必要です。

設定については以下の記事が参考になると思います。

https://zenn.dev/acntechjp/articles/1568fae30bac81

### サンプルの仕様と画面キャプチャ
サンプルは、一般的なWebのログイン画面です。
今回は簡単なサンプルを用意しました。
仕様はChatGPTで作成し、画面キャプチャはChatGPTで出力した仕様をBolt.newに入力して画面を生成し、その画面をキャプチャしました。

#### サンプル仕様
```
# ログインフォーム仕様

## 必須フィールド
- **メールアドレス入力欄**
  - アイコン付き
- **パスワード入力欄**
  - アイコン付き

## セキュリティ機能
- **パスワードの表示/非表示切り替え**
- **フォームバリデーション**
- **エラーメッセージ表示**

## 補助機能
- **「パスワードを忘れた方」リンク**
- **「新規登録」リンク**
- **ログイン状態保持チェックボックス**

## ソーシャルログイン
- **GitHub連携**
- **Twitter連携**

## アクセシビリティ
- **キーボード操作対応**
- **スクリーンリーダー対応のラベル**
- **フォーカス状態の視覚的フィードバック**

## デザイン
- **レスポンシブレイアウト**
- **グラデーション背景**
- **モダンなシャドウとボーダー**
- **アイコンによる視覚的ガイド**

```

#### サンプル画面キャプチャ
![login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944846/e30b6f2d-b5ed-ecec-31af-0965abe4f5ac.png)

### プレビューボタンよりチャット開始

1. 「プレビュー」ボタンを押すと、チャットを開始します
1. 「入力仕様」にサンプル仕様のテキストをコピーし入力してください
1. 「入力画面キャプチャ」にサンプルの画面キャプチャをアップしてください
1. 入力後、「画面一覧生成」ボタンを押します
1. 入力した情報をもとにLLMが生成した画面一覧を表示します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944846/350f58e7-b61c-2727-07d0-86a5ee3f078e.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944846/b458d24f-fd4e-77a9-6c6c-403899a7ad7e.png)

### 次のアクションを選択する
今回、1つの生成が完了すると、チャットボットが次の生成に進むかどうかを選択するための選択肢を表示します。
ユーザーがチャットボットの提示する選択肢を選ぶことで、画面一覧の生成からテストケースの生成まで、順序立てて実行を進めることができます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944846/12a72411-dc79-4a79-a029-c145d8213f9c.png)

### 実行過程がわかる

ワークフロー内で、どのノードが実行されているかをリアルタイムで確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944846/6d62568e-8d93-bd8d-7da7-4474cc3e9a56.png)


## Difyワークフローで詰まった点
Difyのワークフローを使ってテスト設計を行う際に直面した課題を以下にまとめます。

### 添付画像をフローの途中で変数に代入できない
画面キャプチャの画像をフロー内で設定し、変数に代入できれば柔軟に画像を扱えると思いましたが、その方法が分かりませんでした。そのため、フロー開始時点で画面キャプチャを設定し、フロー内で利用する形を取らざるを得ませんでした。

### フロー途中のデータを見やすい形で表示できない
フローを進める中で、画面一覧や機能一覧、さらにテストケース一覧を順次出力していますが、フロー内で表形式など見やすい形でデータを確認できる機能があると便利だと思いました。

### 生成したデータをファイルとして出力できない
テスト設計フローで生成されたデータを各段階でファイルとして出力したいと考えましたが、その方法が分かりませんでした。Pythonコードを実行できるため、生成したデータをExcel形式で出力しようと試みました。しかし、ローカルDify環境でも、PandasなどのPythonモジュールを使用できたものの、ファイルを保存するフォルダを作成できず、実現には至りませんでした。今後、ローカルDify環境でファイル出力が簡単にできるようになれば、利用の幅が大きく広がると思います。Dify内で完結できる機能が理想です。

### 条件分岐を含む複雑なフローの実現が難しい
これはDifyのワークフローに慣れていないことが原因かもしれませんが、変数の状態に応じてチャットボットの応答を分岐させるフローの構築が思うようにできませんでした。具体的には、生成したデータを変数に格納した後、そのデータを手動で修正し、修正後のデータでフローを続行する仕組みを実現したかったのですが、作成方法が分かりませんでした。

### ノーコード形式がかえって負担になる場合もある
プログラミングができる場合、生成AIを活用してコードでワークフローを効率的に構築できます。しかし、ノーコードツールでは画面操作による設定が必要であり、効率的に作業を進められないことがありました。例えば、ノードを簡単にコピーしたり、他のプロジェクトからノードを流用する機能が不足している点が不便でした。ただし、ワークフローを視覚的に確認できる点は非常に良いと感じます。

## DifyでAIを活用した業務効率化の可能性
Difyはローカル環境で動作可能なうえ、各種LLM APIの設定が非常に簡単に行うことができました。また、ワークフロー機能を活用することで、業務に合わせたプロセスを効率化する可能性を強く感じています。今後、複雑なワークフローも柔軟に作成できるようになれば、さらに多くの業務分野で活用が進むと思います。

さらに、DifyではPythonコードを直接実行できる機能も備わっており、プログラミングによるカスタマイズ性も兼ね備えています。この機能を最大限に活用することで、単純なタスク自動化にとどまらず、業務データの処理や高度な分析も可能になると感じました。