ShadowDOMを操作する
この記事では、ShadowDOMが存在するWebページの操作方法を紹介します。
ブラウザ操作のワークフローを構築中に以下の全ての問題が発生した場合、その問題の原因ShadowDOMかもしれません。
・操作できるはずのDOM要素が操作できない（諸々のログの詳細は確認済みであるにも関わらず）
・JavaScriptを使用しても操作できない
・操作したい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セレクタの取得方法
【ここに入れる】