実装前の機能をテストする
デザインツールから画像をインポートし、機能がまだ開発中のうちにテストを準備します。
まだ存在しない機能をなぜテストするのか
Figma やその他のツールで作ったデザインから始めるテスト駆動開発です: テストは機能より先に存在します。デザイナーがすでに作った画像が画面のあるべき姿を示しており、アサーションに必要なのは期待する内容の画像だけです。
そうすれば、機能ができあがったその日にテストの準備が整っています。最初の実行が、作られたものがデザインどおりかどうかを要素ごとにチームに伝えます。
考え方を 4 つの手順で
エクスポート
デザインツールのボタン、アイコン、画面を画像として
インポート
テストのコンテンツファイルへ
構成
ビジュアルリファレンストラックに並べる
アサーション
重要な要素ごとにアサーションを追加する
デザイン画像をインポートする
Figma、Sketch、Adobe XD、Photoshop などのデザインツールから、要素を PNG 画像としてエクスポートします: 画面全体でも、ボタン、アイコン、ロゴのような単独の要素でもかまいません。画面上で表示されるサイズでエクスポートしてください。
- 1
「メディアをインポート」をクリックする
GUI Test Studio のツールバー、またはファイル、メディアをインポートからです。画像を選ぶと、コンテンツファイルの画像の下に表示されます。
- 2
わかりやすい名前を付ける
画像を右クリックして名前の変更...を選ぶか、F2 を押します: 「購入ボタン」、「カートアイコン」のように。名前はテストと一緒に保存されます。
ビジュアルリファレンス上に画面を組み立てる
ビジュアルリファレンストラックは、各時点でプレビューに表示されるものです。通常は記録を保持しますが、画像も同じように保持できます。コンテンツファイルから画像をドラッグしてください: スライドショーのスライドのように、動かしたり伸ばしたりできるクリップになります。
複数の画像を順に並べて、これからの機能の流れをコラージュとして表現します: 一覧画面、次に開くダイアログ、そして確認画面です。
アサーションを追加する
- 1
画像の時点にアサーションをドラッグする
「アサーション」パレットからアサーショントラックへ、対応する画像の下にドラッグします。
- 2
何を探すかを示す
アサーションのエディターを開きます。表示されるフレームはデザイン画像です: ビジュアルアサーションなら要素を囲む四角形を描き、テキストアサーションなら文字をマークします。ビジュアルターゲットエディターでは、単独の要素の画像をコンテンツファイルからキャンバスへ直接ドラッグすることもできます。
- 3
その間の操作を追加する
クリックや入力を「イベント」パレットからドラッグするか、画面ができてから新しいシナリオを記録で後から記録します。
デザイナーが、新しいエクスポートボタンと「エクスポート完了」メッセージの画像を共有します。両方をインポートしてビジュアルリファレンスに置き、ボタンにビジュアルアサーションを、メッセージにテキストアサーションを追加します。テストはリポジトリで待機します。開発者または AI コーディングエージェントが機能を仕上げた日に、パイプラインがテストを実行し、ボタンがデザインどおりに見えるかどうかを報告します。
機能ができあがったら
| 最初の実行が示すこと | すべきこと |
|---|---|
| すべて合格 | 機能はデザインと一致しています。これからはテストがリグレッションから機能を守ります。 |
| 要素の見た目が違う | デザインと実装の間に本当の差があります。バグレポートを作成するか、途中でデザインが変わったのなら新しい見た目を採用します。 |
| 要素が見つからない | サイズを確認してください: 画面と異なる倍率でエクスポートされたデザイン画像は見つかりません。レポートが示す最も近い領域を採用するか、実際の画面から要素をもう一度キャプチャします。 |
デザインから準備したテスト
機能の完成
最初の実行
実際の見た目を採用
1 回だけ
まだ解決しませんか?何をしようとしていたかをお知らせください。1 営業日以内に回答します。Ask our team