ブラウザ上でJavaScriptを実行
この記事では、ブラウザに開かれているWEBサイト上でJavaScriptを実行する方法について紹介します。
【できるようになること】
- InjectScriptアクションを利用
- InjectScriptで値を出力
- StoreValueの値をInjectScript内部で利用
AUTOROでは、ブラウザ上でJavaScriptを実行することができます。
これにより、以下のようなことが実現できます。
・既存アクションで対応できない操作
・既存アクションと同等の操作を複数実行させ、1アクションに纏める
・複雑なHTTP Requestの送信
・テーブルデータの取得とスクリプトによる直接加工、値の出力
InjectScript
Webページ上でJavaScriptを実行するには、「InjectScript」アクションを利用します。
このアクションでは、既存のアクションでは実現できない操作を、JavaScriptで実行することができます。
ブラウザを操作
InjectScriptの用途の例として、次にあげるようなブラウザの操作やHTML要素の操作があります。
- 画面のリロード
- ページバック
- 要素の削除/追加
- ブラウザ上でのHTTPリクエスト
これらのJavaScriptは、Google Chromeの「右クリック→検証→console」の画面で実行するとInjectScriptで実行される内容を確認することができます。
JavaScriptの実行結果を取得
InjectScriptでは、JavaScriptの実行結果をテキスト/配列/オブジェクトなどの値として取得することも可能です。
実行結果を値として取得する場合は、次の設定が必要になります。
- 「詳細設定の開閉」をクリックします。
- 「実行時の値を出力」をONに設定します。
取得される値は、JavaScriptコードの一番最後の行の実行結果を出力します。
StoreValueの変数を利用
InjectScriptでは、アクション内において、ワークフロー内のStoreValue(変数に保存)アクションで定義された変数の値を利用することが可能です。
以下より、値の利用方法を紹介します。
文字列/数値/オブジェクト型の変数をInjectScript内部で利用する場合は、以下のフォーマットで書き込む必要があります。
"${StoreValueで定義した変数}";※全体をダブルクォーテーションで囲う必要があります
※injectScriptで利用する変数の型が数値である場合、この変数の型はinjectScript開始時点では文字列型に変換されています(仕様)。この変数を数値として利用したい場合は、スクリプト内部でparseInt()やNumber()をご使用ください。
改行のある文字列変数を扱う場合、前述の文字列/数値型変数の方法ではエラーとなります。
この場合は、以下フォーマットで記入する必要があります。
${JSON.stringify(StoreValueで定義した変数).split("\n")};※split()を利用していますが、InjectScript内部では改行のある文字列として扱われます。
※ダブルクォーテーションは不要です。
配列やオブジェクト型変数をInjectScript内部で利用する場合は、JavaScriptのメソッドを用いる必要があります。具体的には、以下のフォーマットで書き込む必要があります。
${JSON.stringify(StoreValueで定義した変数)};※JSON.stringify()を使用していますが、値は配列/オブジェクトとなります。
※ダブルクォーテーションは不要です。
※要素に改行を含んでいても問題ありません。
# ブラウザを開く
+open_browser_1:
action>: OpenBrowser
url: 'https://www.google.com/advanced_image_search'
lang: 'ja-JP'
headless: true
# 変数に保存 オートロ株式会社
+store_value_1:
action>: StoreValue
key: companyName
value: 'オートロ株式会社'
# ページ内でJavaScriptを実行する_変数の値をテキストボックスに入力
+inject_script_1:
action>: InjectScript
browser: +open_browser_1
code: "document.querySelector(\"#xX4UFf\").value = \"${companyName}\";\n"
returnValue: false
# 要素のスクリーンショットを撮る
+take_element_shot_1:
action>: TakeElementShot
browser: +open_browser_1
selector: form
type: png
ignoreError: false
# テキストを作成
+text_1:
action>: Text
text: "改行のある\n文字列"
# 変数に保存
+store_value_6:
action>: StoreValue
key: kaigyou
value: +text_1
# ページ内でJavaScriptを実行する_改行のある文字列を出力
+inject_script_3:
action>: InjectScript
browser: +inject_script_1
code: '${JSON.stringify(kaigyou).split("\n")};'
returnValue: true
# 変数に保存_CSSセレクタ
+store_value_3:
action>: StoreValue
key: selectors
value: ["#CwYCWc","#mSoczb","#t2dX1c"]
# 変数に保存_入力する文字列
+store_value_2:
action>: StoreValue
key: values
value: ["R","P","A"]
# ページ内でJavaScriptを実行する_配列関数で文字を入力
+inject_script_2:
action>: InjectScript
browser: +open_browser_1
code: "const inputValues = ${JSON.stringify(values)};\nconst selectors = ${JSON.stringify(selectors)};\n\nselectors.forEach((selector, i) => {\n document.querySelector(selector).value = inputValues[i];\n})\n"
returnValue: false
# 要素のスクリーンショットを撮る
+take_element_shot_2:
action>: TakeElementShot
browser: +inject_script_2
selector: form
type: png
ignoreError: false
# オブジェクトを作成
+create_object_1:
action>: CreateObject
object:
testKey: "オブジェクト\nです"
# 変数に保存 オブジェクト
+store_value_5:
action>: StoreValue
key: obj
value: +create_object_1
# ページ内でJavaScriptを実行する_Objectのキーの値を出力
+inject_script_5:
action>: InjectScript
browser: +open_browser_1
code: "const testObject = ${JSON.stringify(obj)};\ntestObject.testKey; //キーの値を出力"
returnValue: true