AUTOROに行く
Updated on 2022年11月29日

Docly Child

ブラウザを操作する

965 views

この記事では、ブラウザを使ってWikipediaでキーワード検索を行なう方法を紹介します。

【できようになること】

  • AUTOROでブラウザを開くことができる
  • ワークフローを実行できる

　ブラウザを開く

AUTOROでブラウザ操作を行なうためには、最初にOpenBrowserアクションでブラウザを開く必要があります。

まずは、WikipediaのTOPページを開いてみましょう。

  • アクション一覧から、「OpenBrowser」をクリックします。
  • クイックガイドに、概要説明、各設定項目の説明が表示されるのを確認します。
  •  動画を参考に、「OpenBrowser」を真ん中にドラッグ&ドロップしてください。

⇒ドロップするとカード形でアクションが設定されます。

 
  • URLパラメータに https://ja.wikipedia.org と入力してください。
  • コメント欄にコメント（アクションの詳細）を入力します。
  • クイックガイドの下の青い「保存」ボタンをクリックします。
  • 保存が完了したら「実行」ボタンをクリックしてください。RPAが実行されます。
    ※「実行」を押すと設定が自動保存されます。
  • ブラウザのスクリーンショットが表示されればRPAの実行完了です。

　開いたブラウザを操作する

次に、Wikipediaでキーワードを入力して検索するというワークフローを設定します。
検索ワード「坂本龍馬」を検索してみましょう。

◇要件
  • Wikipediaで「坂本龍馬」を検索する
  • 検索結果をスクリーンショット撮影する

まず最初に、OpenBrowserで開くブラウザの解像度します。

  • OpenBrowserの詳細設定を開きます。
  • 解像度を1920×1080とします。

 

※解像度を変更する理由

OpenBrowserで開かれるブラウザ(Chrome)の解像度は、デフォルトでは800×600(縦横比4:3,昔のアナログテレビと一緒)となっています。
この解像度/縦横比のままであると、お手元のPC(ほぼ全てが縦横比16:9)で取得したCSSセレクタとロボットが開いたWebページのCSSセレクタが異なってしまう場合があります。

このような問題を回避し、かつログ画面のスクリーンショットを見やすくするために、OpenBrowserで開くブラウザの解像度/縦横比を変更する必要があります。

  • アクション一覧から、TypeTextアクションをドラッグ&ドロップします。
  • CSSセレクタを取得する
    拡張機能を利用して、検索バーのCSSセレクタを取得してみましょう。
  • 取得したCSSセレクタを、CSSセレクタパラメータに貼り付けましょう。
    「右クリック→貼り付け」で貼り付けされます。
  • 「坂本龍馬」を入力する設定
    文字列のパラメータに「坂本龍馬」と入力します。
  • アクション一覧から、Clickアクションをドラッグ&ドロップします。
  • CSSセレクタを取得する
    TypeTextと同じように、検索バー横の虫眼鏡アイコンのCSSセレクタを取得しましょう。
  • 取得したCSSセレクタを、CSSセレクタパラメータに貼り付けましょう。
    「右クリック→貼り付け」で貼り付けされます。

検索結果のページを確認するために、スクリーンショットを撮りましょう。

  • アクション一覧から、TakeScreenshotアクションをドラッグ&ドロップします。
  • 「詳細設定を開閉」を押す
  • 待ち時間を設定しましょう。
    ページの読み込み時間を考慮して、スクリーンショットを撮影する前に５秒間の待ち時間を設定します。
  • ページ全体を撮影できるようにしましょう。

ここまで設定できたら設定は完了です。設定したワークフローを実行してみましょう。

おつかれさまでした！

# ブラウザを開く
+open_browser_1:
  action>: OpenBrowser
  url: 'https://ja.wikipedia.org'
  lang: 'ja-JP'
  timeZone: 'Asia/Tokyo'
  headless: true
  windowSize: '1920 x 1080'
  useShadowDomSelector: false

# 文字入力
+type_text_1:
  action>: TypeText
  browser: +open_browser_1
  selector: 'input[name="search"]'
  text: '坂本龍馬'
  clearValue: false
  ignoreError: true

# クリック
+click_1:
  action>: Click
  browser: +type_text_1
  selector: 'form#searchform button'
  confirm: true
  ignoreError: true
  timeout: 30000

# スクリーンショットを撮る
+take_screenshot_1:
  action>: TakeScreenshot
  browser: +click_1
  full_page: true
  type: png
  waitBefore: 5000

　今回使用したアクション

最後に、今回のワークフローで使用したアクションを復習しましょう。

  • OpenBrowser（ブラウザを開く）

    新規ブラウザを立ち上げるアクションです。アクションについてはこちら

    TypeText（文字入力）

    文字を入力するアクションです。アクションについてはこちら

    Click（クリック）

    クリックするアクションです。アクションについてはこちら

    TakeScreenshot（スクリーンショットを撮る）

    スクリーンショットを撮影するアクションです。アクションについてはこちら

［参考記事］
＜OpenBrowser＞ブラウザを開く/ブラウザ操作

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

Related articles

Powered By EazyDocs