コードが存在する前に Figma のデザインからテストを生成する

はい、コードが存在する前に Figma のデザインからエンドツーエンドテストを生成できます: GUI Test Studio の Figma プラグインが画面を 1 個のデザインファイルとして保存し、Figma からインポートがそれを要素ごとのアサーションを持つテストに変えます。

なぜ Figma のデザインからテストを生成するのか

デザイナーは、チームが持つ最も正確な仕様書をすでに書いています。Figma ファイルは、各画面が何を表示すべきかを語ります: 各ボタンの語句、アイコン、フィールドの順序、クリックの後に来る画面です。それなのに多くのチームは、数週間後に完成したアプリからエンドツーエンドテストを書き、その間はデザインを目で確認しています。

この記事では、テスト駆動開発、コードで書くエンドツーエンドテストを先に書けない理由、デザイン QA とデザインのずれとは何か、そしてデスクトップアプリと Web アプリのエンドツーエンドテストスイートである GUI Test Studio が Figma のデザインをどう実行できるテストに変えるかを説明します。

TDD、ATDD、BDD を 1 分で

3 種類とも、テストを先に書く方法です。違うのは、テストが何から書かれ、誰が読むかです。

TDD のループには 3 拍あります。レッド: 振る舞いがまだないので、不合格になるテストを書きます。グリーン: 合格させるのに必要なだけのコードを書きます。リファクタリング: テストが正しさを守る中で、コードを改善します。

なぜコードの前にエンドツーエンドテストを書けないのか

TDD は関数や API ではうまく機能します。ユーザーインターフェイスでは、たいてい止まります。その理由は、コードで書くエンドツーエンドテストが画面上の要素を見つける方法にあります。

Selenium、Playwright、Cypress のテストは、各要素をロケーターで見つけます: ID、CSS セレクター、XPath、ロールと名前です。Selenium は ID から XPath まで 8 種類のロケーター戦略を文書化しています。Cypress は、テストが触れるすべての要素に data-cy のような専用の属性を付けることを推奨しています。

cy.visit('/reports');
cy.get('[data-cy=export-pdf]')
  .click();

コードで書くビジュアルスナップショットも、ビルドから始まります。Playwright は最初の実行時にリファレンスのスクリーンショットを作るので、テストが比較する画像はデザインされたままのアプリではなく、作られたままのアプリです。Storybook と Chromatic は各コンポーネントのストーリーを承認済みのベースラインと比較し、ビルド間の変化を捉えます。

デザイン QA とデザインのずれ

書かれたテストケースは計画の大きな助けになりますが、人がそれを実行するかコードに変えなければなりません。生成されたスクリプトは、コードで書くどんなビジュアルテストとも同じく、機能が作られて初めて存在するロケーターを通して各要素に到達します。エンドツーエンドツールをより広く見渡すには、比較調査を参照してください。

Figma のデザインからエンドツーエンドテストを生成するには

それが GUI Test Studio の画面の検証方法です。ビジュアルアサーションは要素を見た目で見つけ、期待する画像と比較します。テキストアサーションは画面上の語句を読み取ります。デザインには、それらのアサーションに必要なすべての画像とすべての語句がすでにあります。

UI のためのテスト駆動開発、手順を追って

1. 1

   承認されたデザインからテストを生成する

   デザインが承認された日に、インポートしてください。これでテストは、誰かが機能を書く前に、デザインされたとおりの画面を記述します。

2. 2

   不合格になるのを見る: それがレッドのステップ

   今日のアプリに対して実行してください。新しい画面がないので、そのアサーションは不合格になります。レッドこそが要点です: テストは、残っている作業の一覧です。

3. 3

   グリーンになるまで作る

   開発者または AI コーディングエージェントが機能を作ります。パイプラインは gtr-cli ですべてのビルドでテストを実行します。信頼度レポートが、要素ごとに、デザインにすでに一致しているものとそうでないものを示します。

4. 4

   実際の見た目を一度採用する

   フォントの描画がわずかに異なるため、デザインと実際の画面がピクセル単位で一致することはめったにありません。最初の実際の実行の後、信頼度レポートから実際の見た目を一度採用してください。それ以降、テストは実物と比較します。アプリが意図的に変わったときを参照してください。

5. 5

   テストを守りにしてリファクタリングする

   アプリのスタイルを変え、リファクタリングし、フレームワークを変えてください。テストはコードを読まないので、画面が正しい間は合格し続けます。ユーザーに違いが見えるときに不合格になります。

Figma からインポート: 機能の前にテストを

1. 1

   Figma にプラグインを一度だけ追加する

   プラグインは GUI Test Studio と一緒にインストールされます。Figma のデスクトップアプリで、プラグイン、開発、マニフェストからプラグインをインポート...から一度追加してください。

2. 2

   Figma からインポートを開く

   GUI Test Studio でファイル、Figma からインポート...を選んでください: ウィンドウがデザインを待ちます。

3. 3

   Figma から画面をエクスポートする

   Figma でプラグインを起動し、欲しい画面にチェックを入れるか、プロトタイプのフローを選んでください。するとその画面が、ある画面から次へ導くクリックと共に、順番に入ってきます。エクスポートされたファイルはダウンロードフォルダーに置いたままにしてください: GUI Test Studio がそのフォルダーを監視していて、1、2 秒以内にデザインを開きます。

4. 4

   検証される内容を確認する

   

   拡大

   • レビューは各画面をすべての要素を枠で囲んで表示し、それぞれがどのアサーションを得るかを示します。テキストは、画像上で本当に読み取れるときだけテキストとして検証されます。小さすぎたり薄すぎたりする語句は代わりにビジュアルアサーションになり、一覧がその理由を示します。長い段落と大きな写真は、たいていサンプルコンテンツなので、一覧には載りますがチェックは入りません。
5. 5

   「インポート」をクリックする

   インポートをクリックすると、すべてがデザインの名前を付けた 1 個のシナリオとして配置されます。各画面はビジュアルリファレンストラックの画像になります。そのアサーションはアサーショントラックに、セクションごとにまとめて置かれます。プロトタイプのフローでは、次の画面へ導くクリックは、デザインがリンク元としたボタンに狙いを定めます。

拡大

デザインが変わったら: Figma から同期

デザインは動き、デザインから書かれたテストはそれに付いていかなければなりません。デザインが変わったら、Figma からもう一度エクスポートし、GUI Test Studio でファイル、Figma から同期...を選んでください。

拡大

自分で編集したアサーションにもチェックは入らないので、同期が断りなく作業を上書きすることはありません。バックグラウンドで検証されることはなく、テストは同期したときだけ変わります。

AI アシスタントで Figma のデザインからテストへ

デザインを AI アシスタントに渡すこともできます。GUI Test Studio に接続した Claude、ChatGPT、または自分のコンピューター上のローカル AI モデル (当社が提供するものか、自分で用意するもの) が、同じインポートを通してデザインパッケージからテストを作ります。プロンプトからテストを作成するを参照してください。

Create a test from C:\Designs\Login.gtsdesign, following its prototype flow.

テストが保存され、GUI Test Studio がそれを開いてレビューを待ちます。AI コーディングエージェントとの相性も良好です: エージェントが機能を作り、デザインから作られたテストが、デザインどおりに作られたかどうかを伝えます。AI エージェントとの開発を参照してください。

ベストプラクティス

Figma ファイルがありませんか?Sketch や Adobe XD など、どんなデザインツールの画像でも使えます: 実装前の機能をテストするを参照してください。

要点

• 1Figma のデザインはすでに仕様書です: テストが見つけるべきすべての語句、アイコン、画面を語っています。
• 2コードで書くエンドツーエンドテストは先には書けません: そのロケーターは、機能が作られて初めて存在するからです。
• 3Figma からインポートは機能の前にテストを生成します: 画面ごとの画像、要素ごとのアサーション、そしてクリックとしてのプロトタイプのフローです。
• 4レッド、そしてグリーン: テストはビルドがデザインに一致するまで不合格になり、その後はすべてのビルドでそれを守ります。
• 5Figma から同期はデザインに付いていき、自分で編集したアサーションを上書きすることはありません。

よくある質問

Figma、Selenium、Playwright、Cypress、Storybook、Chromatic、Cucumber、Testsigma、BrowserStack、Applitools は各所有者の商標です。