Updated on 2026年9月2日

ブラウザのタブ切り替え

この記事では、複数のタブ/ウィンドウが開かれるときのタブ/ウィンドウ切り替え方法について紹介します。

【できるようになること】

  • タブ/ウィンドウの切り替え
  • ShowTabs/SwichTabの設定

　別タブ/ウィンドウが開かれるサイト

ページの遷移や、フォームの入力などの時に別タブ/ウィンドウが開くケースがあります。

こうしたサイトの動きに対してAUTOROで操作を行う場合、アクティブになっているタブの切り替えを設定しておく必要が出てきます。

　開かれているタブ一覧を取得

ワークフローの実行中に開かれているタブ/ウィンドウの一覧を確認するためには、ShowTabsアクション(開いているタブを表示)を利用します。

必須パラメータは、ブラウザの指定のみです。

 

ShowTabsアクションの実行結果は、タブの一覧が取得されます。

 

# ブラウザを開く
+open_browser_1:
  action>: OpenBrowser
  url: 'https://dawn-id.heteml.net/support.autoro.io/docs/example/%e6%a4%9c%e7%b4%a2%e7%b5%90%e6%9e%9c%e3%81%ae%e3%82%b9%e3%82%af%e3%83%ac%e3%82%a4%e3%83%94%e3%83%b3%e3%82%b0/'
  lang: 'ja-JP'
  headless: true
  useShadowDomSelector: false
  private: false

# キーを送信(新しいタブでリンクを開くショートカットキー)
+send_keys_1:
  action>: SendKeys
  browser: +open_browser_1
  selector: '.elementor-element-7a7acd02 :nth-child(6) a'
  keys: ["Control","Enter"]
  ignoreError: true
  private: false

# 開いているタブを表示
+show_tabs_1:
  action>: ShowTabs
  browser: +open_browser_1
  waitBefore: 2000
  private: false

　タブ/ウィンドウを切り替える

タブ/ウィンドウの切り替えには、SwitchTabアクション(タブを切り替える)を利用します。

ここでは、3つの切り替え方法を順にご紹介します。

  • 何番目のタブ/ウィンドウを利用するかを指定して、切り替えます。

    「0」を入力すると一番古いタブ/ウィンドウが指定されます。タブ/ウィンドウが開かれた順に「1」,「2」… となります。

 

ShowTabsアクションを組み合わせ、タブ/ウィンドウのタイトルを指定した切り替えができます。

こちらは、スクリプトを使用します。スクリプトの詳細は、下部の「ワークフロー設定内容1」をご参照ください。

  • ShowTabsアクションでタブ/ウィンドウの一覧を取得します。
  • （任意）ShowTabsアクションに実行前待機時間を追加します。タブ/ウィンドウが開き切るまでの待機となります。
  • 取得したタブ/ウィンドウの一覧を変数に保存します。
  • タブ/ウィンドウ一覧を特定のワードやURLで検索します。（RunScript）
  • 検索に一致したタブオブジェクトを、SwitchTabのタブパラメーターに指定します。
 

こちらは、スクリプトを使用せずに、タイトルやURLをもとにタブ/ウィンドウを切り替えます。

以下画像のような形になります。ワークフローのコード(yaml)については、下部の「ワークフロー設定内容2」をご参照ください。

  • ShowTabsアクションでタブ/ウィンドウの一覧を取得します。
  • ShowTabsアクションのアウトプット（一覧）で繰り返し処理を実施します。
  • キー情報（titleまたはurl）を指定して値を取得します。
  • Compareアクション(比較する)にて、任意の検索条件を設定します。
  • Compareアクションのアウトプットがtrueの場合、SwitchTabアクションで目的のタブ/ウィンドウを切り替えます（アクティブにします）。

※（任意）タブ/ウィンドウが開き切るまでに時間がかかる場合は、ShowTabsアクションの詳細設定で実行前待機時間を指定して、指定時間待機してからタブ/ウィンドウ一覧を取得してください。

 

# ブラウザを開く
+open_browser_1:
  action>: OpenBrowser
  url: 'https://dawn-id.heteml.net/support.autoro.io/docs/example/%e6%a4%9c%e7%b4%a2%e7%b5%90%e6%9e%9c%e3%81%ae%e3%82%b9%e3%82%af%e3%83%ac%e3%82%a4%e3%83%94%e3%83%b3%e3%82%b0/'
  lang: 'ja-JP'
  headless: true
  useShadowDomSelector: false
  private: false

# キーを送信(新しいタブでリンクを開くショートカットキー)
+send_keys_1:
  action>: SendKeys
  browser: +open_browser_1
  selector: '.elementor-element-7a7acd02 :nth-child(6) a'
  keys: ["Control","Enter"]
  ignoreError: true
  private: false

# 開いているタブを表示
+show_tabs_1:
  action>: ShowTabs
  browser: +open_browser_1
  waitBefore: 2000
  private: false

# 変数に保存
+store_value_1:
  action>: StoreValue
  key: tab_obj
  value: +show_tabs_1
  private: false

# スクリプトを実行_【Browser】のタブを探す
+run_script_1:
  action>: RunScript
  code: "let tab = tab_obj.filter(el => /Browser/.test(el.title));\nreturn tab[0];\n"
  private: false

# タブを切り替える
+switch_tab_1:
  action>: SwitchTab
  browser: +send_keys_1
  tab: +run_script_1
  private: false

# ブラウザを開く
+open_browser_1:
  action>: OpenBrowser
  display_name>: 'ブラウザを開く'
  url: 'https://support.autoro.io/docs/example/検索結果のスクレイピング/'
  lang: 'ja-JP'
  timeZone: 'Asia/Tokyo'
  headless: true
  confirm: true
  windowSize: '1920 x 1080'
  useShadowDomSelector: false
  private: false
  meta:
    action:
      disabled: false

# キーを送信(新しいタブでリンクを開くショートカットキー)
+send_keys_1:
  action>: SendKeys
  display_name>: 'キーを送信(新しいタブでリンクを開くショートカットキー)'
  browser: +open_browser_1
  selector: '.elementor-element-7a7acd02 :nth-child(6) a'
  keys: ["Control","Enter"]
  waitAfter: 3000
  ignoreError: false
  private: false
  meta:
    action:
      disabled: false

# 開いているタブを表示
+show_tabs_1:
  action>: ShowTabs
  display_name>: '開いているタブを表示'
  browser: +open_browser_1
  waitBefore: 2000
  private: false
  meta:
    action:
      disabled: false

# 各要素について繰り返す
+for_each_1:
  for_each>:
    tab_obj: +show_tabs_1
    private: false
    display_name>: '各要素について繰り返す'
  meta:
    action:
      disabled: false
  _do:

    # オブジェクトのキーの値を取得
    +get_value_with_key_1:
      action>: GetValueWithKey
      display_name>: 'オブジェクトのキーの値を取得'
      object: ${tab_obj}
      key: title
      private: false
      meta:
        action:
          disabled: false

    # 比較する
    +compare_1:
      action>: Compare
      display_name>: '比較する'
      subject: +get_value_with_key_1
      compare_with: 'スプレッドシート'
      method: CONTAINS
      not: false
      private: false
      meta:
        action:
          disabled: false

    # 真のとき
    +if_1:
      if>:
        display_name>: '真のとき'
        condition: +compare_1
        private: false
      meta:
        action:
          disabled: false
      _do:

        # タブを切り替える
        +switch_tab_1:
          action>: SwitchTab
          display_name>: 'タブを切り替える'
          browser: +open_browser_1
          tab: ${tab_obj}
          private: false
          meta:
            action:
              disabled: false

        # 繰り返しを終了する
        +break_if_1:
          break_if>:
            display_name>: '繰り返しを終了する'
            condition: +compare_1
            private: false
          meta:
            action:
              disabled: false

# スクリーンショットを撮る
+take_screenshot_1:
  action>: TakeScreenshot
  display_name>: 'スクリーンショットを撮る'
  browser: +open_browser_1
  full_page: false
  type: png
  waitBefore: 2000
  private: false
  meta:
    action:
      disabled: false
［参考記事］

＜タブ＞タブ
ウィンドウ
ウインドウ
window

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

Related articles

CONTENTS

Powered By EazyDocs