Docly Child

ShadowDOMを操作する

145 views

この記事では、ShadowDOMが存在するWebページの操作方法を紹介します。


ShadowDOMを利用する場面

ブラウザ操作のワークフローを構築中に以下の全ての問題が発生した場合、その問題の原因ShadowDOMかもしれません。

・操作できるはずのDOM要素が操作できない(諸々のログの詳細は確認済みであるにも関わらず)
・JavaScriptを使用しても操作できない
・操作したいWebページのデザインが比較的新しめである

上記問題が発生した場合は、このページで紹介している内容をご参照ください。

ShadowDOMが利用されているWebサイト


・Amazon Vendor Central
・Salesforce Lightningのレポート一覧画面

 ShadowDOMとは

ShadowDOMとは、あるページの本体とは分離された状態で構成/表示されている、ページ上の「影」のような要素を言います。(詳しくは後述します)

このような要素を操作するためには、OpenBrower(ブラウザを開く)アクションのuseShadowDomSelectorパラメータをtrueにする必要があります(デフォルトではfalse)。
useShadowDomSelectorがfalseである場合、ShadowDOM要素が操作できず、エラーとなってしまいます。

ShadowDOMは、概ね以下のように形容できます。

  • Aさんが光に照らされることによって発生した「Aさんの影」は、ShadowDOMである
  • ある殿様の「影武者」は、ShadowDOMである
  • プラトンのイデア論でいう、「現実世界に存在する三角形」は、ShadowDOMである

このように、ShadowDOMとはあくまでページ上に映っている影(Shadow)であって、その影の「発生元」ではありません。

例えば、私が、他人であるAさんの影を踏んだとしても、Aさん自身には物理的な痛みや痒みは生じません。(余程繊細な人でも無い限り)
ここで、ShadowDOMを操作する際にOpenBrowserアクションのuseShadowDomSelectorがfalseとなっている場合は、まさしく上述の「他人であるAさんの影を踏んだ」ような状態になります。つまり、操作したい要素を操作することができません。

逆に言えば、useShadowDomSelectorがtrueとなっていれば、ShadowDOMとなっている要素の本体を直接的に操作できます。上述の例で言えば、他人であるAさんの影ではなく、Aさん本人を直接踏むことができます。

 ShadowDOMの見分け方

GoogleChromeで検証ツール(Chrome DevTools)を開き、Elementsタブに#shadow-rootの表記が確認できたら、そのページにはShadowDOMが存在すると言えます。

※iframe中の要素がShadowDOMとなっている場合は、shadow-rootの表記が存在しないケースがあるようです(salesforce Lightningのレポート画面など)

 ShadowDOMのCSSセレクタ取得/指定方法

通常と変わりません。
AUTORO Assistant(ver 2.1.0以降)を使用してCSSセレクタを取得してください。
自動でShadowDOM対応のセレクタが取得されます。
参考:CSSセレクタの取得方法

【ここに入れる】

このページは役に立ちましたか?