シャドー DOM 内の要素に対するアクション

シャドー DOM 内にあるエレメントに対してアクションを実行するようにボットをプログラミングする方法について説明します。

シャドー DOM 内の要素に対してアクションを実行するには、 Run JavaScript コマンドを使用して、ターゲット Web ページで JavaScript コードを実行する必要があります。 以下のコード・スニペットは、その方法を示しています。

以下のコード・スニペットを IBM RPA Studio に貼り付けて、その方法の例を確認します。

defVar --name URL --type String --value "https://mdn.github.io/web-components-examples/popup-info-box-web-component/"
defVar --name WEB_INSTANCE --type String --value web
defVar --name infoText --type String
// Navigate to "Pop-up info widget - web components" and get text from info pop-up inside a shadow DOM, logging the text.

webStart --name "${WEB_INSTANCE}" --type "Chrome"
webNavigate --url "${URL}"
webExecuteJavaScript --script "return document.querySelector(\"body > form > div > label > popup-info\").shadowRoot.querySelector(\"span > span.info\").innerText;" infoText=value
webClose --name "${WEB_INSTANCE}"
logMessage --message "Info text: ${infoText}" --type "Info"

スクリプト・コードの明細

ボット・スクリプトは、 Google Chrome Web ブラウザーを開始し、 「ポップアップ情報ウィジェット-Web コンポーネント」 🡥 ページにナビゲートし、シャドー DOM 内のエレメントからテキストを取得して、 IBM RPA Studioの出力コンソールにログを記録します。 この Web ページは、MDN Web 資料の記事 Using shadow DOM 🡥で提供されています。

シャドー DOM のエレメントと対話するためのキー・コマンドは webExecuteJavaScript --script "return document.querySelector(\"body > form > div > label > popup-info\").shadowRoot.querySelector(\"span > span.info\").innerText;" infoText=valueです。 JavaScript コードを実行してページを操作します。この場合、 span HTML エレメントからテキストを取得して、それを infoText ストリング変数に返します。 shadowRoot JavaScript オブジェクトは、シャドー DOM エレメントとの対話を可能にします。

JavaScript コードの分析:

  • document.querySelector(\"body > form > div > label > popup-info\") は、 shadowDOMを含むエレメントを返します。
  • .shadowRoot は、シャドー Dom のエレメントを含む document オブジェクトを返します。
  • .querySelector(\"span > span.info\") は、 shadowRoot オブジェクト内にあるセレクター "span > span.info" に一致するエレメントを返します。
  • .innerText は、HTML 要素内のテキストを返します。
  • コード・ステートメントの先頭にある return は、 Run JavaScript コマンドの特殊な構文です。これは、コード・ステートメント document.querySelector(\"body > form > div > label > popup-info\").shadowRoot.querySelector(\"span > span.info\").innerText が返す値が、出力パラメーター Value(この例では infoText) に変数をロードする必要があることを設定します。 戻り値は常にテキストであることに注意してください。

shadowRoot を使用する必要があります。 互換性を確保するには、ブラウザーが最新であることを確認してください。

結果

上記のコード・スニペットは、シャドー DOM 内の要素と対話するようにボットを設定する方法を示しています。 この例では、HTML エレメントからテキストを取得し、テキストをログに記録します。 JavaScript を使用して、要素をクリックしたり値を要素に設定したりするなどの他のアクションを実行できます。 innerText を適切なメソッドまたはプロパティーに変更するだけで済みます。