Shadow DOMでのテスト

Shadow DOMは、ボタンやフォームなどのコンポーネントをページに埋め込み、他のコンポーネントやページ自体から分離することが可能です。Shadow DOMツリー内のエレメントは、メインのDOMとは異なり、通常の検索方法では発見できないため、このことがテストの自動化を行う上での課題となっています。

Shadow DOMとその用途の詳細については、Shadow DOMの概要に進んでください。Shadow DOMツリー内のエレメントに対してmablでテストを実行する方法を主に知りたい場合は、Shadow DOMにおけるmablセクションにスキップしてください。

📘

このガイドは、WebページのHTMLをノードツリーとして表現するドキュメントオブジェクトモデル (DOM) を理解していることを前提としています。

Shadow DOMの概要

Shadow DOMは、エレメントのDOMツリーが非表示の状態で作成され、メインのDOMツリー内のエレメントに追加されます。Shadow DOMツリー内のエレメントのスタイルと機能は分離されるため、メインページに適用されるCSSやJavaScriptは、Shadow DOMエレメントには影響しません。同様に、Shadow DOMエレメントのスタイルと機能は、メインDOMのレンダリングに影響しません。

ユースケース

Shadow DOMを使用すると、開発者は簡単にコードを再利用し、ReactやVue.jsといった別のフレームワークでWebコンポーネントを共有することができます。Shadow DOMの使用には、次のようなメリットがあります。

• コードベースへの依存を軽減する
• JavaScriptでは利用できないウィジェットやサードパーティのコンテンツをWebサイトに埋め込む
• 異なるチームが (場合によっては異なるフレームワークで) 開発したアプリケーションに一貫したスタイルでボタンなどのページエレメントを実装する

例

簡単な例として、2つのエレメントを含むHTMLのスニペットを見てみましょう。

"decline" ボタンは「表示される」メインDOM内にありますが、"accept" ボタンはShadow DOM内にあります。この例には、Shadow DOMの重要なコンセプトが表れています。

• Shadowホスト: 「表示される」メインDOM内にあり、Shadow DOMが追加されるエレメントです。この例では、
  がShadowホストです。
• Shadowルート: 非表示のDOMサブツリーのルートノードです。#shadow-rootで表されます。"accept" ボタンは、Shadow DOMツリー内に配置されています。
• モード: Shadowルートは、オープンモードでもクローズモードでも、ホストエレメントに追加されます。この例のShadow DOMは、オープンShadow DOMです (ほとんどのShadow DOMは、オープンです)。メインDOMからShadow DOMにアクセスするには、JavaScriptプロパティのElement.shadowRootを使用します。クローズShadow DOMでは、Element.shadowRootプロパティはnullを返します。

メインDOMのボタンエレメントには、紫の背景と白い大きな文字がスタイルで指定されています。このスタイルは、"decline" ボタンに適用されます。ただし、"accept" ボタンはShadow DOM内にあるため、このスタイル指定の影響を受けません。

📘

Webコンポーネント

Webコンポーネントは、 や のようなカスタムエレメントとして登録されていることがあります。こうしたコンポーネントのロジックとスタイルを分離しておくためにShadow DOMが使用されます。カスタムエレメントとShadow DOMを使用するWebコンポーネントの例については、MDNのweb-components-examplesを参照してください。

mablでShadow DOMをテスト

mablは通常のDOMでエレメントをさまざまな方法で検索できることに加え、Shadow DOMツリー内のエレメントを検出することもできます。

Shadow DOMでのステップのトレーニング

Shadow DOM内でステップを記録すると、mabl Trainerはターゲットエレメントの祖先のいずれかがShadowルートであるかどうかを確認します。Trainerは、Shadowルートを認識すると、そのエレメントを「Shadowの親」として記録し、発見方法をステップに記録します。

記録されたステップ内でShadow DOMを検出するほかに、TrainerはCSSクエリを使用して高度な発見ステップを記録することもできます。

📘

トレーニングの制限事項

• クローズShadow DOMでのトレーニングはサポートされていません。オープンShadow DOMのみがサポートされます。
• Shadow DOMツリー内のエレメントを、XPathを使用してターゲットにすることはできません。
• [Configure Find] でShadow DOM内のエレメントの属性を指定することは可能ですが、Shadowルート自体の属性を含めることはできません。

Shadow DOM内のエレメントをターゲットにするステップには、右下に紫色のアイコンが表示されます。このアイコンにカーソルを合わせると、アクションがShadowルート内にあることを示すメッセージが表示されます。

DOMの警告

記録したステップに “DOM Warning” アイコンが表示される場合は、Shadowルートを一意に特定できなかったことを示しています。この警告は、特定に使用できる属性がWebコンポーネントに存在しない場合に表示される可能性があります。この場合、CSSクエリを使用してShadow DOMを検索することで、より確実にターゲットエレメントを特定できます。カスタムの [Find elements] ステップの詳細については、こちらをクリックしてください。

slotエレメントに対するトレーニング

Webコンポーネントが を使用して、そのWebコンポーネントにテキストを渡している場合、Trainerはアサーションと [Configure Find] に "slotText" オプションを含めます。これは、そのWebコンポーネントのテキストの一部 (または全部) がinnerTextではなく、slotから渡される可能性があるためです。

📘

Webコンポーネント内のinnerTextには、slotの値も子コンポーネントのinnerTextも含まれません。

Shadow DOM内のエレメントのテキストをアサートし、そのinnerTextの値が空または不完全であることがわかった場合は、アサーションのプロパティをslotTextに更新してみてください。

slotエレメントの詳細については、MDNガイドを参照してください。

Shadow DOMでのステップの実行

これらのステップがブラウザーテストで実行されると、実行エンジンは初めにShadowの親エレメントを検索し、次にShadow DOMツリー内の正しいエレメントを発見するための追加の戦略を実施します。

📘

Shadow DOMでのステップの自動修復

Shadow DOMでのステップの自動修復: mablはエレメント内のエレメントを自動的に修復できますが、Shadowの親自体を自動修復することはできません。

クラウド実行のステップがShadow DOM内のエレメントをターゲットにしたかどうかを確認するには、そのステップのmablアクティビティログを調べます。

ターゲットエレメントがShadow DOM内に存在する場合は、mablアクティビティログに次の行が表示されます。Looking for a <element-tag> shadow parent with the closest match to the model mabl has learned

📘

クラウドの制限事項

• 現在のリンククローラーでは、Shadow DOMを検索できません。リンククローラーは、「表示される」メインDOM内のリンクのみを取得します。
• [Test Output] ページの [DOM] タブ内に表示されるHTMLには、Shadow DOMツリーが含まれません。