変更される可能性がある DOM 検査テスト

Lightning Experience の HTML、CSS、DOM のコンテンツおよび構造は、いつでも変更される可能性があるため、安定した API と考えることはできません。Selenium WebDriver などのツールを使用してコンポーネント内部にアクセスする UI テストでは、継続的なメンテナンスが必要になります。

Salesforce では、HTML、CSS、または DOM の下位互換性は保証されません。Lightning Experience は最新の Web 標準に合わせて進化し続けるため、変更によるこのテストの脆弱性を指摘しています。Salesforce は、ユーザが自動 UI テストから得られる価値と、ユーザにかかるメンテナンスの負荷を理解しています。

Lightning Web コンポーネントは、Web コンポーネント標準に基づいています。この標準には、コンポーネントのマークアップ、スタイル、動作を他のコンポーネントから見えないようにする Shadow DOM が含まれます。このカプセル化により、特に DOM をグローバル検索したり、カスタム要素の内部にアクセスしたりするテストの場合に UI テストが困難になります。

shadowRoot プロパティは、要素の DOM サブツリーをカプセル化します。この shadowRoot は、DOM で DocumentFragment として表されます。この DOM サブツリー内の要素は従来の DOM クエリ方法では使用できません。Lightning Web コンポーネントで表示される要素には、この新しい shadowRoot プロパティが含まれます。また、この要素は通常の DOM クエリでは非表示になっています。

Jest は、個々の Lightning Web コンポーネントの単体テストに使用することをお勧めします。

Selenium WebDriver などの UI テストツールは、エンドツーエンドテストにのみ使用してください。

Lightning Web コンポーネント用の単体テストを作成するには、sfdx-lwc-jest を使用します。

Jest テストコンテキストでは、コードで、テストする要素の shadowRoot プロパティを使用してシャドウツリーにアクセスできます。shadowRoot プロパティは要素のシャドウツリーをカプセル化します。

次のコードは、「例」セクションの <lightning-lwc-parent> コンポーネントのシャドウツリーの <div> にアクセスします。

エンドツーエンドの UI テストの場合は、Shadow DOM 用に既存のテストを調整します。テストの調整はツールごとに異なり、戦略は急速に進化しています。Selenium WebDriver の適切な例としてこの記事を参照することをお勧めします。

記事で説明されているように、WebDriver.findElement() を使用したグローバルクエリは失敗します。Lightning Web コンポーネントのシャドウツリー内の要素を探すには、クライアント上で JavaScript を実行して、コンポーネントの shadowRoot プロパティから照会します。