UI Test Automation Model（UTAM）でエンドツーエンドのテストを実行するには
オリジナル記事
Run End-to-End Tests with the UI Test Automation Model (UTAM)
品質を担保する上で、アプリケーションのテストは非常に重要です。テストには、ユニットテスト、統合テスト、エンドツーエンドテストなど、さまざまな種類があります。このブログでは、自動化されたエンドツーエンド（E2E）のテストを中心に、UI Test Automation Model（UTAM）について説明します。
2022年5月11日
品質を担保する上で、アプリケーションのテストは非常に重要です。テストには、ユニットテスト、統合テスト、エンドツーエンドテストなど、さまざまな種類があります。このブログでは、自動化されたエンドツーエンド（E2E）のテストを中心に、UI Test Automation Model（UTAM）について説明します。UTAMとは、あらゆる種類のアプリケーションでE2Eテストを実行できる、Salesforceが開発したオープンソースソリューションです。アプリケーションでの利用事例の1つとして、E-Bikesの事例をご紹介します。
エンドツーエンドテストの概要
E2Eテストは、WebdriverIOやSeleniumなどの自動化UIテストツールを使って実行されることがよくあります。隔離された個々のコンポーネントを対象とするユニットテストとは異なり、E2Eテストはビジネスユーザの操作に非常に近い状態で実施されます。
E2Eテストではコンポーネントを実際に操作するブラウザーを使用し、テストシナリオを実行しつつ、画面を順番に移動していきます。
E2Eテストの主なメリットは、ソースコードにフルアクセスできない場合でも、アプリケーションのテストを行えることです。たとえば、AppExchangeパッケージと連携するSalesforceアプリケーションのテストを実行しようとしているとしましょう。ユーザには、Lightning Experienceのソースやパッケージへのアクセス権はありません。しかし、E2Eテストであれば、このような場合でもアプリケーションのテストを実行できます。
しかし、それには代償が伴います。E2Eの重大な欠点は、その脆弱性と、管理のしづらさにあります。Webアプリケーションに変更が生じると、DOMも同様に変更されます。E2EテストはDOMとの組み合わせが緊密であるため、このような変更によりE2Eテストが壊れてしまうことがよくあります。先ほどの例で言えば、Salesforceの新しいリリースやパッケージの新しいバージョンのリリースなど、Lightning Experienceのアップデートにより、テストが壊れてしまう可能性があるのです。
このようにメンテナンスにコストがかかるために、一般的にはユニットテスト、統合テスト、E2Eテストという優先順位で投資することが望ましいとされます。ソフトウェア開発の黄金律とも言うべき規範がありますが、ごく簡単に言えば次のような内容です。
ソースコードに近ければ近いほど、バグの発見と修正は安価である。
こうしたメリットとデメリットに留意しつつ、SalesforceチームはUI Test Automation Model（UTAM）という画期的な提案を生み出しました。
UTAMについて
UTAMはE2Eテストの作成や維持を簡単に実行できるようにすることで、一般的な制約を解消します。UTAMはUIテストツールを代替するものではありませんが、ページオブジェクトによりテストコードをDOMから切り離すことで、そのサポートを行います。
強力かつわかりやすい文法でJSON内にUTAMページオブジェクトを作成します。ページオブジェクトは再利用可能なブロックで、CSSセレクターによりテスト対象のページのDOMを参照する役割を果たします。ページオブジェクトを構成することで、高度なパターンを作成できます。
ページオブジェクトが共有可能なコントラクトとして機能すること、およびJSONで作成できることは、他のUIテストツールと比較した場合の大きな差別化要因です。UTAMが言語に依存しない多くのアプローチと連携できるのはこのためです。これは、テストに用いるテクノロジーが何であれ、複数のチームがコラボレーションし、ページオブジェクトを共有できるということでもあります。
E2Eテストの準備が終わると、UTAMはプロジェクトの設定にもとづき、ページオブジェクトをJavaScript、TypeScript、またはJavaにコンパイルします。テストではコンパイルされたページオブジェクトを用いて、ページとやり取りすることが可能です。
UTAMでエンドツーエンドのテストを実行する
UTAMの概要や動作について確認したところで、次は実際の利用方法をご紹介しましょう。まずは簡単な「Hello, world」の例を確認し、続いて実際のアプリケーション、「E-Bikes」サンプルアプリケーションをテストする方法を解説します。
「Hello, world」のテスト
まずは簡単な例を実行してみましょう。分かりやすいUTAMチュートリアルから、「Hello, world」の例をご紹介します。この例では、「Hello, 🌍 🌏 🌎!」と表示された静的なHTMLページのテストを実行しています。
このページをテストする主なステップは次のとおりです。
- world要素を含むJSONページオブジェクトを宣言します。この要素には.world CSSクラスセレクターがあり、テスト対象のページのDOM要素と一致します。
- ページオブジェクトをコンパイルすると、JSONで定義したworld要素と関連付けられた、getWorldメソッドを持つクラスが生成されます。
- テストコード内のコンパイルされたページオブジェクトからgetWorldメソッドを使い、.world CSSクラスを持つDOMのコンテンツにアクセスします。
こうしたシンプルなユースケースの割には冗長な手順であるように思えるかもしれませんが、ページがこれよりも複雑な場合には、UTAMがいかに有用かがさらに際立つことになります。これらの事例（実際のアプリケーションにより近いもの）では、構成と再利用可能性を欠かすことはできません。そのような場合に、UTAMが役に立つのです。
「E-Bikes」サンプルアプリケーションのテスト
UTAMはSalesforceアプリケーション以外のテストも実行できます。あらゆるテクノロジーやプラットフォームとの連携が可能です。しかし、SalesforceはLightningのベースコンポーネント（lightning-input、lightning-buttonなど）やLightning Experience（リソースセクションのリンクをご参照ください）向けの再利用可能なUTAMページオブジェクトを多数提供しています。これを活用して、SalesforceアプリケーションのE2Eテストの作成にかかる時間を大幅に短縮することができます。多くのSalesforceエンジニアリングチームがUTAMを社内で活用し、アプリケーションのテストを行っているのは、こうした理由があるからです。
E-BikesサンプルアプリケーションのProduct Explorer Lightningアプリケーションページでエンドツーエンドのテストを実行する方法を確認してみましょう。
このページには、標準およびカスタムのLightning Webコンポーネントが多数掲載されています。UTAMベースのページオブジェクトを利用せずにページのDOMを検索してこれらのコンポーネントの要素にアクセスすることは非常に困難です。これは、多くのShadow DOMレイヤーをトラバースする必要があるためです。
以下の図で、このような内容を概観できます。このページを構成する、ネストされたコンポーネントを簡単に表しています。カスタムコンポーネントはオレンジで、Lightningベースコンポーネントは青で示されています。
カスタムコンポーネントはユニットテストが可能ですが、ここではE2Eテストも実行して、ユーザインタラクションを検証することを目指します。以下は、UTAMでテストを進める際のシナリオです。
- 製品タイルリストでデフォルトのページネーション情報を確認する
- 選択した製品カードがデフォルトで何も書かれていないことを確認する
- 製品フィルターで検索用語を入力する
- 新しいページネーション情報を確認する
- 最初の製品タイルを選択する
- 選択した内容が製品カードに表示されていることを確認する
- 製品カードのボタンアイコンをクリックして、製品レコードページを開く
- 製品レコードページが開くことを確認する
E2Eテストのコードを書く前に、テストの一部であるカスタムコンポーネントのUTAM JSONページオブジェクトの定義を行います。簡潔に説明できるよう、ここではすべての定義を説明することはしませんが、E-Bikes GitHubリポジトリよりご確認いただくことが可能です。JSONページオブジェクトのある__utam__サブフォルダは、Lightning Webコンポーネントのメタデータが保存されたフォルダに存在します。
たとえば、製品フィルターページオブジェクトは以下のように表示されます。Lightning入力ベースページオブジェクトと.search CSSクラスセレクターにより、検索の入力内容をこのように取得できます。
{
"shadow": {
"elements": [
{
"name": "searchInput",
"selector": {
"css": ".search"
},
"type": "utam-lightning/pageObjects/input",
"public": true
}
]
}
}
UTAMページオブジェクトにより、上記のE2Eテストシナリオを100行未満のJavaScriptに要約することができます。ここには表示されていませんが、テスト設定も含まれます。
it('displays, filters and selects product from list', async () => {
// Check default pagination info in product tile list
let pageInfo = await productTileList.getPaginationInfo();
expect(pageInfo).toBe(PAGINATION_ALL_ITEMS);
// Check default empty selection in product card
const productCardBodyText = await productCard.getBodyText();
expect(productCardBodyText).toBe(SELECTION_EMPTY);
// Enter search term
const searchInput = await productFilter.getSearchInput();
await searchInput.setText('fuse');
// Wait for updated pagination info
await productTileList.waitForPaginationUpdate(PAGINATION_FILTERED_ITEMS);
// Check updated pagination info
pageInfo = await productTileList.getPaginationInfo();
expect(pageInfo).toBe(PAGINATION_FILTERED_ITEMS);
// Select first product tile
const productTiles = await productTileList.getTiles();
await productTiles[0].click();
// Wait for product selection
await productCard.waitForSelectionUpdate('FUSE X1');
// Open selected product record
await productCard.clickOpenRecord();
// Ensure that product record page is open
await domDocument.waitFor(async () =>
RECORD_PAGE_URL.test(await domDocument.getUrl())
);
});
UTAMのおかげで、コードはかなり読みやすくなりました（ボイラープレートコードやCSSリファレンスのせいでわかりづらいということがなくなりました）。また、DOMの変更時（CSSクラスの削除や名前の変更など）にもアップデートが必要なく、安定性が高い傾向にあります。メンテナンスが必要となるのは、主にJSONページオブジェクトです。
最後に
今回は、UTAMの機能の概要をご紹介しました。E2Eテストとは何か、UTAMの概要、テストコードをDOMから切り離すことでどのように付加価値を実現するか、といった内容を確認しました。また、UTAMを活用したE2Eテストの事例もいくつかご紹介しました。動的なセレクターやメソッドを使った構成など、さらに詳細なコンセプトはUTAM Webサイトのガイドやチュートリアルをご確認ください。
リソース
- ドキュメントやチュートリアル：UTAM Webサイト
- 事例のリポジトリ：UTAM Recipes
- Lightningベースコンポーネント：UTAMページオブジェクト
- NPMパッケージ（JavaScript）
- Maven Centralパッケージ（Java）
- UTAMを使ったエンドツーエンドテストの事例：E-Bikesサンプルアプリケーションリポジトリ
著者紹介
Philippe Ozilは、Salesforceのプリンシパルディベロッパーアドボケートとして、Salesforce Platformを中心に担当しています。テクニカルコンテンツを執筆し、講演で頻繁にスピーカーを務める一方で、フルスタックの開発者として、DevOpsやロボット、VRのプロジェクトを楽しんでいます。Twitterで@PhilippeOzilをフォローしてください。GitHubプロジェクトは@pozilです。
