Shadow DOMでのテスト

Webアプリでは、Shadow DOM はメインの DOM ツリー内の要素に付随して、隠れた要素の DOM ツリーを作成します。開発者は、React や Vue.js など異なるフレームワーク間で共有しやすくするために、Web コンポーネントを分離する方法として Shadow DOM を使用します。Shadow DOM は、Shadow DOM 内の要素を従来の検索手法では見つけられないため、テスト自動化に特有の課題をもたらします。

この記事では、mabl が Shadow DOM 内の要素を検出してテストするためのアプローチを概説します。

mabl が Shadow DOM の要素を見つける方法

Shadow DOM 内でステップを記録すると、mablトレーナーは、対象要素の先祖のいずれかがシャドウルートかどうかを確認します。シャドウルートは、隠れた Shadow DOM サブツリーのルートノードで、ページの HTML では #shadow-root と表されます。トレーナーがシャドウルートを特定した場合、その要素を「shadow parent」として記録し、ステップに追加の検索戦略を加えます。

実行中、mabl はシャドウの親を検索し、その後、Shadow DOM ツリー内で正しい要素を見つけるための追加の戦略を適用します。クラウド実行でのステップが Shadow DOM を持つ要素を対象にしたか確認するには、そのステップの mabl アクティビティログを確認できます。

シャドウ DOM アクティビティに関するテスト ステップのログ

対象の要素がShadow DOM内にある場合、出力ログには、mabl が「shadow parent」を探していることが示されます。

Shadow DOM インジケーター

Trainer では、Shadow DOM 内の要素を対象とするステップには、右下に Shadow DOM インジケーターが表示されます。

DOM 警告インジケーター

記録されたステップに「DOM Warning」インジケーターが表示されている場合、mabl がシャドウルートを一意に特定できなかったことを意味します。これは、Web コンポーネントに識別に使える属性が不足していると発生することがあります。この場合、CSS クエリーを使って Shadow DOM を貫通し、対象の要素をより確実に特定できます。詳しくは、要素の検索ステップに関する記事をご覧ください。

[DOM Warning] アイコン

スロット要素

場合によっては、Web コンポーネント内のテキストが innerText 属性ではなく、slot 要素から供給されることがあります。Web コンポーネントが slot 要素のテキストを使用する場合、Trainer はアサーションおよび検索の設定向けに「slotText」オプションを含みます。

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

mablトレーナーでのslotTextアサーション

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

制限事項

Shadow DOM の要素に対してトレーニングする際は、次の制限に留意してください。

• クローズドな Shadow DOM のテストはサポートしていません。オープンな Shadow DOM のみサポートしています。
• Shadow DOMツリー内のエレメントを、XPathを使用してターゲットにすることはできません。
• [Configure Find] でShadow DOM内のエレメントの属性を指定することは可能ですが、Shadowルート自体の属性を含めることはできません。
• 実行中、mabl は要素内の要素に対して自動修復できますが、シャドウの親そのものに対しては自動修復できません。
• クラウド実行の出力では、DOM タブに表示される HTML に Shadow DOM ツリーは含まれません。