【AUTOROに行く】※ユーザーの方のお問い合わせもこちらよりお願いします
Updated on 2023年10月20日

Docly Child

不定期で出現するポップアップを閉じる

232 views

この記事では、ウェブサイトでお知らせなどを表示するポップアップを閉じる方法について解説します。

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

  • 偶発的なエラーを防ぐことができる
  • FindElementアクション（要素を見つける）の理解
Modal Example サンプル：

　ポップアップが表示されることによる影響

このページで解説する、「ポップアップ」とは、「主な画面の上に重ねられて表示される小さなウィンドウ」を指します。

多くのポップアップは、表示されている間、背後の画面操作を一時的に制限することがあります。

これにより、ロボットで特定の操作を試みた場合、目的の箇所が操作できないことが考えられます。

このような状況を避けるためには、「ポップアップが表示されていたら、閉じるボタンをクリックする」といった指示をロボットに与える必要があります。

以下セクションでは、AUTOROでポップアップを閉じる方法として代表的な2つの方法を紹介します。

  1.  ignoreErrorを利用する
  2.  FindElementアクションを利用する

ignoreErrorは簡単に設定ができ、FindElementは拡張性が高い内容になります。

 

また、よくあるご質問の対応方法を1つ紹介します。

  •  AUTOROで実行した時のみ、ポップアップが開く場合
手元のブラウザで再現できず、CSSセレクタを取得できない場合にお試しください。
 

　1.ignoreErrorを利用する

ignoreError（セレクタが見つからなくても次に行く）は、設定したCSSセレクタが見つからない場合に、エラー終了せずに処理を続行する機能です。

クリックアクションにこの機能を設定すると、以下のような動作をします。

状況アクション
CSSセレクタがあった時そのセレクタをクリックします。
CSSセレクタがなかった時エラーを返さず、次のアクションに進みます

この挙動を利用すれば、「ポップアップが表示されていた時だけ、閉じるボタンをクリックする（ポップアップが表示されていなかったら何もしない）」操作が実現できます。

ignoreErrorはデフォルトで有効になっています。

この用途で使用する場合は、タイムアウトの設定を短めに設定することを推奨いたします。

詳細は以下記事をご覧ください。

参考：ignoreError

 

　2.FindElementアクションを使用する

FindElementアクション（要素を見つける）を使用すると、「特定の要素が出現している時のみ、特定の操作をする」といった条件分岐処理が可能になります。

ここではサンプルとして、以下のワークフローを作成してみます。

AUTOROのサポートページを開きます。

  • OpenBrowserアクション（ブラウザを開く）を設定します。
    • URL欄には、当ページのURLの https://support.autoro.io/docs/example/不定期で出現するポップアップを閉じる/を設定します。
    • 下矢印のマークをクリックして、詳細設定を開きます
    • 出現した画面サイズの欄に、1920 x 1080と設定をします。
      （当サイトでクリックをする場合、この設定が必要になります。）

※ポップアップが自動で表示されるサイトでは、この工程は必要ありません。

ポップアップを開くために、このページの「ポップアップ表示」をクリックします。

  • Clickアクション（クリック）を設定します。
    • ブラウザの欄には、OpenBrowserアクションのアウトプットを設定します。 
    • CSSセレクタの欄に、#showModalButtonと記載します。

CSSセレクタの取得方法は下記サポートページをご覧ください。

CSSセレクタの取得方法

ポップアップが表示されているかを、閉じるボタンの有無で確認します。

要素があるかどうかは、FindElementアクション（要素を見つける）で調べます。

  • FindElementアクション（要素を見つける）を設定します。
    • ブラウザの欄には、Clickアクションのアウトプットを設定します。
    • 探し方の欄は、「CSSセレクターで検索」のままにします。
    • CSSセレクタの欄には、#closeModalButtonを設定します。
    • 下の矢印マークをクリックして、詳細設定を開きます。
    • タイムアウトの欄に、3000と入力します。

タイムアウトはCSSセレクタを検索する際の最大待機時間を指します。

この設定時間内にセレクタが見つからない場合、次の動作に移行します。

今回、セレクタが見つからない可能性を考慮し、待機時間を短く設定して無駄な遅延を防いでいます。

FindElementアクションの結果をもとに、条件分岐を設定します。

  • Ifアクション（真のとき）を設定します。
    • 条件の欄には、FindElementアクションのアウトプットを設定します。
  • Ifアクションで囲うようにして、Clickアクションを設定します。
    • ブラウザの欄には、Clickアクションのアウトプットを設定します。 
    • CSSセレクタの欄には、FindElementアクションのアウトプットを設定します。

これでポップアップが出ている時のみ、閉じるボタンをクリックすることが可能です。

※本記事の主旨とは逸れる応用的な内容です。

4では、FindElementのアウトプットを条件分岐(IF)の条件式に使用しました。

ここでは応用として、4のような条件式指定が可能である理由を解説します。

結論から言うと「仕様により、FindElementがfalse以外を出力した場合、それはtrue(真)として扱われるため、上記の条件分岐が可能」となります。

AUTOROのIFの役割は「条件式がtrueになった時のみ、そのIFの範囲内のアクションを実行する（条件式がfalseだったら実行しない）」ところにあります。

ここでfindElementの仕様を見てみます。

挙動出力条件式としての判定(真理値)
要素が見つかった時CSSセレクタ(文字列)true(真理値)
要素が見つからなかった時false(真理値)false(真理値)

上述の仕様の通り、FindElementはCSSセレクタもしくはfalse(真理値)という2種類の値を出力するアクションです。

上の表に従えば、FindElementがCSSセレクタを出力していたらそれは条件式上はtrueになるので、IFの範囲内のアクションが実行されます。

　AUTOROで実行した時のみ、ポップアップが開く場合

AUTOROで実行した時のみポップアップが開き、手元でブラウザを開いてもCSSセレクタが取得できない場合があります。

その際の対応方法をご紹介します。

ウェブサイトの仕様によっては、ポップアップ以外の箇所をクリックするとポップアップが消える場合があります。

  • ポップアップ以外の箇所のCSSセレクタ
  • クリックをしてもあまり影響のない箇所

上記の条件を満たすCSSセレクタをクリックして、ポップアップが閉じるかをお確かめください。

AUTOROで開いた画面のHTML構造を出力して、CSSセレクタを確認する方法が考えられます。

以下ページでは、HTML構造を出力するワークフロー例がございます。

ご確認ください。

参考→HTMLファイルからのデバッグ

  • ポップアップが発見できている時

FindElementアクションで要素が見つかっています。

その結果をIfアクションが受け取り、条件分岐しています。

  • ポップアップが発見できなかった時

FindElementアクションで要素が見つからず、「false」を出力しています。

その結果をIfアクションが受け取り、条件分岐が真のときに進みません。

# ブラウザを開く AUTOROのサポートページを開く
+open_browser_1:
  action>: OpenBrowser
  url: 'https://support.autoro.io/docs/example/%e4%b8%8d%e5%ae%9a%e6%9c%9f%e3%81%a7%e5%87%ba%e7%8f%be%e3%81%99%e3%82%8b%e3%83%9d%e3%83%83%e3%83%97%e3%82%a2%e3%83%83%e3%83%97%e3%82%92%e9%96%89%e3%81%98%e3%82%8b/'
  lang: 'ja-JP'
  headless: true
  confirm: true
  windowSize: '1920 x 1080'
  useShadowDomSelector: false
  private: false

# クリック　ポップアップを開く
+click_3:
  action>: Click
  browser: +open_browser_1
  selector: '#showModalButton'
  confirm: true
  ignoreError: true
  timeout: 30000
  private: false

# 要素を見つける　ポップアップが出現しているか確認
+find_element_1:
  action>: FindElement
  browser: +click_3
  find_by: selector
  value: '#closeModalButton'
  timeout: 3000
  visible: true
  private: false

# 真のとき　ポップアップが出現しているのかをチェック
+if_1:
  if>: +find_element_1
  _do:

    # クリック　ポップアップが出現している時のみ
    +click_1:
      action>: Click
      browser: +click_3
      selector: +find_element_1
      confirm: true
      waitAfter: 2000
      ignoreError: true
      timeout: 30000
      private: false
［参考記事］
ポップアップ モーダル ブラウザ browser

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

Related articles

Powered By EazyDocs