Shadow DOMでのテスト

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

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

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つの<button>エレメントを含む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内にあるため、このスタイル指定の影響を受けません。

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の警告

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

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

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

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

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

Shadow DOMでのステップの実行

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

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

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