ブラウザでの操作を記憶する(要素の取得)

ブラウザを使用するシナリオを作成するときは、設定したい内容を実際にブラウザ(Google Chrome)で操作しながら、アクションとして記録しましょう。
ブラウザで操作してアクションを設定するには、次の2つの方法があります。 [URLにアクセス]を配置して設定する
シナリオを最初に作成するときは、この方法がお勧めです。ブラウザでの一連の操作を実際に行って、それぞれを連続したアクションとして設定できます。
アクションの要素を個別に指定する
作成済みのシナリオにアクションを追加するときは、この方法がお勧めです。個々のアクションで設定するブラウザの操作を、実際の画面を開いて設定します。

[URLにアクセス]を配置して設定する

設定したい一連の操作を実際にブラウザを操作しながら、連続したアクションとして設定できます。

  1. シナリオ作成画面で、アクション一覧から[URLにアクセス]を配置します。
    04-07 get-element-on-browser 01
  2. [URLにアクセス]の[URL]に、操作を記録したいWebページのアドレスを入力し、[要素選択を開始]をクリックします。
    04-07 get-element-on-browser 02
    別画面で、入力したアドレスのWebページが表示されます。この画面で実際にブラウザを操作して、アクションとして記録していきます。
    04-07 get-element-on-browser 03
Tips - ブラウザ上の操作を自動化するために、ブラウザ上のボタンやリンクなどのCSS要素を選択して記録することを、「要素選択」といいます。詳しくは、「CSS、CSSセレクター」を参照してください。
- [ブラウザを操作]をクリックすると、通常操作と要素選択を切り替えることができます。
- [開発画面に戻る]をクリックすると、要素選択を終了し、シナリオ作成画面に戻ります。
- プルダウンメニューなど、クリック後に開いたメニューから要素を選択したい場合は、通常操作でメニューを開いてから、要素選択に切り替えて要素を選択します。
- 要素選択の画面は、Chromeのシークレットモードで実行されます。そのため、通常のログイン時やCookie受け入れ時と表示が異なります。また、IDやパスワードは都度入力が必要になります。
Important 要素選択には、Chromeの拡張機能(Coopel Selector Helper)が用いられています。Coopel Selector Helperがインストールされていない場合、「Extensionが未インストールです。」という内容のメッセージが表⽰されます。

04-05 tutorial-making-scenario 06
その場合は、「Coopel Selector Helperをインストールする」を参照の上、Coopel Selector Helperをインストールしてください。

  1. ブラウザを操作し、自動化するアクションを記録します。
     1. 要素選択の画面で、操作する対象にカーソルを合わせ、青色にハイライトされた状態でクリックします。
    04-07 get-element-on-browser 04
    設定できるアクションの一覧が表示されます。
     2. アクションを選択します。
    CN15 get-element-on-browser 05
    選択したアクションの設定画面が表示されます。
     3. アクションの内容を設定して、[決定]をクリックします。
    04-07 get-element-on-browser 06
Tips - 操作や動作に合わせてアクション名を変更しておくと、内容がわかりやすくなります。処理内容が把握できるよう、元々のアクション名も残しておくと便利です。
- 繰り返しデータを取得したい場合は、[webスクレイピング]のアクションを使用すると、簡単にデータを抽出できます。使い方は「Webページの情報を抽出する(Webスクレイピング)」を参照してください。

設定したアクションが、シナリオ作成画面のシナリオに追加されます。
 4. 表示されている画面の要素選択が終わり、次の画面に移動する場合は、[ブラウザを操作]をクリックし、通常操作に切り替えます。
04-07 get-element-on-browser 07
Webページの操作ができるようになります。

Tips 次の画面に移動するには、一度要素選択モードを解除し、次の画面が表示されるようにWebページを操作する必要があります。

04-07 get-element-on-browser 08

 5. Webページが目的の状態になったら、[ブラウザを操作]をクリックし、要素選択に切り替えます。
04-07 get-element-on-browser 09
 6. 手順1~5を繰り返して、シナリオに必要な操作を設定します。

Tips プルダウンメニューなど、クリック後に開いたメニューから要素を選択したい場合は、一度通常操作に切り替えてメニューを開き、操作したい項目をクリックして選択した状態にします。その状態のままCtrl+Mキーを押すと、要素選択に切り替わり、設定できるアクションの一覧を表示することができます。
  1. 必要な操作の設定が終了したら、[開発画面に戻る]をクリックします。
    04-07 get-element-on-browser 10
    一連の操作がアクションとしてシナリオに配置されます。
    04-07 get-element-on-browser 11

アクションの要素を個別に指定する

個々のアクションでブラウザの操作を設定する場合も、実際のWebページを操作して設定することができます。

  1. シナリオ作成画面で、設定したいアクションを選択します。
    04-07 get-element-on-browser 12

  2. アクションのプロパティで、[要素]の[指定]をクリックします。
    04-07 get-element-on-browser 13
    要素選択の画面が表示されます。

  3. 必要に応じて[ブラウザを操作]をクリックし、通常操作に切り替えます。
    04-07 get-element-on-browser 14

  4. Webページを操作して目的の画面を表示したら、もう一度[ブラウザを操作]をクリックして要素選択に切り替えます。
    04-07 get-element-on-browser 15

  5. 操作する対象にカーソルを合わせ、青色にハイライトされた状態でクリックします。
    04-07 get-element-on-browser 16
    操作対象の要素が設定され、要素選択の画面が閉じます。

Tips 選択した要素のCSSセレクターの内容は、アクションプロパティの[要素]で確認できます。CSSセレクターについて詳しくは、「CSS、CSSセレクター」を参照してください。

04-07 get-element-on-browser 17

関連ヘルプ